Cara Membuat Widget Popular Post Berwarna

Cara Membuat Widget Popular Post Berwarna - Pada kesempatan kali ini saya akan memberikan widget popular post keren yaitu popular post yang berwarna-warni sehingga pengunjung blog kamu akan nyaman apabila berkunjung pada blog kamu.Pasti kamu tahukan fungsi popular post.yup...Widget ini berfungsi untuk menampilkan postingan blog kamu yang paling banyak dikunjungi berdasarkan waktu yang kamu tentukan bisa setiap waktu,setiap minggu,dan setiap bulan.tetapi sebelum memasang Popular Post kali ini,periksalah apakah template kamu sudah terpasang CSS popular post,kalau ada sebaiknya dihapus terlebih dahulu agar tidak terjadi kesalahan.Oke langsung saja ikuti langkah dibawah ini :

1. Login Blogger
2. Buka Menu tata Letak
3. Tambahkan gadget
4. Pilih Entri Popular
5. Atur Seperti dibawah ini :
     

6. Simpan

7. Setelah melakukan langkah diatas buka Menu Template

8. Pilih Edit HTML

9. Cari kode ]]></b:skin> atau </style>

10. Hapus kode yang saya tandai dikotak ini :

/* 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);}

11. Setelah itu cari kode </body>
12. Tempelkan kode dibawah ini tepat diatas kode </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>

13. Pratinjau Template Agar melihat Widget sudah Benar sesuai harapan atau belum
14. Apabila sudah bisa tinggal Simpan template.
    Mudahkan.Apabila ada kebingungan.Silahkan Tinggalkan komentar.
Semoga Artikel ini bermanfaat.

Tweet

Subscribe to receive free email updates: