Cara Membuat Popular Post With Thumbnail

Cara Membuat Popular Post With Thumbnail

Cara Membuat Popular Post With Thumbnail - Mungkin para Blogger akan merasa bosan melihat tampilan template blognya yang tidak ada perubahan walaupun sudah dirasa perfecto. Apalagi widget Popular Post nya tidak pernah diganti sejak awal ngeBlog.

Berikut ini I AM RYLL 09 akan share Cara Membuat Popular Post With Thumbnail dengan penjelasan bisa sangat dimengerti. Mari simak caranya:

Cara Membuat Popular Post With Thumbnail

• Login ke Blogger tercinta
• Template > Edit HTML
• Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img {
    width: 318px;
    height: auto;
}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {
    margin: 0px;
    width: 103%;
    height: 180px;
    overflow: hidden;
    display: block;
}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

• Agar Thumbnail nya tidak blur, tambahkan kode dibawah ini tepat diatas kode

 

<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});
//]]>
</script>

• Simpan Tema.
• Masuk ke Tata Letak > Tambahkan Widget > Tambahkan Widget Entri Populer.
• Lalu Simpan. 

Jika tidak muncul, silahkan anda hapus telebih dahulu CSS Popular Post yang lama lalu ganti dengan CSS diatas.

Demikian artikel ini Cara Membuat Popular Post With Thumbnail, semoga bermanfaat bagi Nusa dan Bangsa.