Widget Popular Post Warna-Warni

Widget Popular Post Warna-Warni - Ok, di postingan ke dua hari ini dan kebetulan ini ialah artikel ke-100 akan menyebarkan 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 arahan 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 arahan yang ditandai kalau menentukan widget tanpa pelengkap warna-warni.

2. Selanjutnya tambahkan arahan 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.

Tweet

Subscribe to receive free email updates: