Widget Popular Post Warna-Warni

Widget Popular Post Warna-Warni - Ok, di postingan ke dua hari ini dan kebetulan ini yakni artikel ke-100 akan membuatkan sebuah widget popular post yang dibentuk sedemikian rupa sehingga bentuknya jadi agak sedikit nyentrik berbeda dengan tampilan widget pada umumnya.

Tentunya 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.

Langsung saja, berikut cara penerapannya :.

Catatan : Jika di template sudah terpasang CSS popular post, ada baiknya dihapus terlebih dahulu semoga tidak terjadi kesalahan nantinya.

Setelan widget Popular Post sesuaikan dengan screenshot di bawah ini :

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

/* Popular Posts */ .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:50;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);font-weight:700;font-size:120%;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:51;transition:all .4s;} .PopularPosts .widget-content ul li:hover:before{right:-55px;} .PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);} .PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);} .PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);} .PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);} .PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);} .PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);} .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);}

Hapus instruksi yang ditandai bila menentukan widget tanpa perhiasan warna-warni.

2. Selanjutnya tambahkan instruksi di bawah ini sebelum </body>

<script type='text/javascript'> // Popular Post Thumb $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});}); //<![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>

3. Selesai, simpan template dan lihat hasilnya.

Result

Cukup sekian, terima kasih dan semoga bermanfaat.