Membuat Widget Popular Post Menarik dan Unik di Blog

Membuat Widget Popular Post Menarik dan Unik di Blog

Rio Ilham Hadi

05 September 2015

Style Popular Post Menarik, keren dan Unik - Tutorial Memodifikasi tampilan Popular Post agar terlihat menarik ini bagus di terapkan agar tampilan blog sobat tidak terlihat kuno dan jadul, Style Popular Post ini sedikit saya modifikasi yang sebelumnya adalah Style Popular Post Warna Warni buatan Arlina Design, Popular Post ini saya terapkan pada template sebelumnya yaitu Micrown Soft Grid.

Tampilan Popular Post kali ini unik karena sangat berbeda dari style Popular Post yang terlihat pada blog/website yang sering kita temukan.

Pastinya sobat sudah tahu fungsi dari widget ini yaitu menampilkan postingan yang paling banyak dilihat oleh pengunjung berdasarkan waktu bisa setiap minggu, bulan, atau sepanjang waktu.

Berikut Tutorial cara membuat Widget Popular Post menjadi menarik :

Note : Jika di Template sobat telah terpasang CSS Popular Post, hapus CSS Popular Post tersebut agar tidak terjadi kesalahan nantinya.

Setelan Wiget Popular Post sesuaikan dengan screenshot di bawah ini :

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Popular Post */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:10;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255, 255, 255, 0.88);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:11;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

2. Selanjutnya tambahkan Script di bawah ini dan letakan di atas kode </body>

<script type='text/javascript'>
// Thumbnail Popular Post
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Selesai, simpan template dan lihat hasilnya.

Result

Sekian.. Semoga Tutorial "Membuat Widget Popular Post Menarik di Blog" ini bermanfaat. Terima kasih.

Referensi : www.arlinadzgn.com/2015/08/widget-popular-post-warna-warni.html

Share This