Membuat popular Post Dengan Thumbnail Keren - Nanda Network

Membuat popular Post Dengan Thumbnail Keren

https://nandanetwork.blogspot.com/2017/10/membuat-popular-post-dengan-thumbnail.html

Widget popular post kali ini menurut saya cukup keren, awalnya bentuk popular post ini disediakan dan sudah diterapkan dibanyak template AMP. Dan beberapa waktu lalu, arlinadzgn Menerapkannya ditemplate baru miliknya yaitu "Simplify premium v4", Widged popular post ini menampilkan gambar postingan selain itu yang membuatnya menjadi tampak lebih keren adalah juga memberikan efek Hover yang responsive.

Kemudian, widged ini menampilkan tampilan yang bagus dan enak dilihat oleh para pengunjung dan mungkin mereka bisa betah dengan tampilan ini.
Untuk membuat widged popular post ini cukup mudah, berikut tutorial membuat popular post widget keren dengan thumbnail dan efek hover responsive.

Cara membuat popular post dengan thumbnail responsive

1. Masuk Ke Template > Edit HTML 
2. Cari kode </style> atau ]]></b:skin> kemudian  tempelkan kode dibawah ini tepat diatas kode tersebut

/* CSS Popular Post Thumbnail */
#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)}

3. Kemudian copy kode dibawah ini dan letakkan tepat diatas kode </body>
 <script type='text/javascript'>
//<![CDATA[
// Popular Post Thumbnail
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>

4. Dan Simpan Template

Langkah selanjutnya ialah memasang widget popular post tersebut diblog, caranya
1. Buka Tata Letak > Add new widget > Tambahkan widget popular post dan lakukan Setting seperti gambar dibawah

Kemudian Save dan lihat blog anda.

Mudah bukan? jika ada pertanyaan jangan lupa sampaikan semoga saya bisa membantu. Terimakasih dan jangan lupa untuk follow blog ini untuk mendapatkan tutorial menarik lainnya segera Dan share kepada teman-teman anda.

2 Responses to "Membuat popular Post Dengan Thumbnail Keren"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel