Membuat Widget Popular Post Menarik Dan Unik Di Blog

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

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

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

Berikut Tutorial cara menciptakan Widget Popular Post menjadi menarik :

Note : Jika di Template sahabat telah terpasang CSS Popular Post, hapus CSS Popular Post tersebut biar 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 sempurna di atas arahan ]]></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 arahan </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

Sumber https://www.idblanter.com