Cara Membuat Popular Post With Thumbnail

Diposting pada
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. Tampilan merupakan salah satu faktor yang pertama kali dilihat oleh pengunjung. Jika tampilan blog kita terlalu norak atau berlebihan, maka pengunjung juga tidak nyaman. Apalagi widget Popular Post nya tidak pernah diganti sejak awal ngeBlog. Hal ini lah yang mengakibatkan banyak orang enggan untuk mengunjunginya lagi karen amembosankan.

Berikut ini NBTEKNO 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.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *