Custom Popular Post Widget Blogger Style V.6

HaiSob apa kabar 😊 ? Setelah pada waktu yang lalu saya sudah membagikan widget-widget popular post yang berbeda-beda maka pada kesempatan ini saya akan membagikan lagi widget popular post versi keenam.

Widget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi atau dibaca oleh pengunjung. Widget ini sudah disediakan oleh Blogspot Blogger tapi kita bisa memodifikasinya sesuai dengan keinginan kita.

Popular Post Widget Blogger Style V.6


widget popular post versi enam
Widget Popular Post V.5

Widget popular post sangat berguna bagi blog karena dapat menambah jumlah pageviews dan mempermudah pengunjung dalam mengexplorasi blog kamu. Untuk fersi sebelumnya kamu bisa membaca: widget popularpost v.5.



Cara memasang widget popular post V.6 di Blogger


1. Di Blogger 😀
2. Pilih menu Layout / Tata letak ➔  Add a Gadget/ Tambahkan Gadget ➔ Popular Post

Add Widget Popular Post v.6
Add Widget Popular Post v.5

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.6
Setting widget popular post v.6

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.
.sidebar .popular-posts ul { counter-reset:popcount; margin:0; padding:0; }
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li { font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif; height:130px; list-style:none !important; overflow:hidden; padding:0 !important; position:relative; margin:2px; border:0; width:48%; float:left; }
.sidebar .PopularPosts .item-thumbnail { margin:0; width:100%; }
.sidebar .PopularPosts ul li img{display:block; float:left; padding:0; width:100%; height:130px; -webkit-transition-duration:1.0s; /*Webkit:Animation duration*/
  -moz-transition-duration:1.0s; /*Mozilla Animation duration*/
  -o-transition-duration:1.0s; /*Opera Animation duration*/
  transition:1.0s}
.sidebar .PopularPosts ul li img:hover{-webkit-transform:scale(1.06); /*Webkit:0.5 times the original Image size*/
  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
  transform:scale(1.06); overflow:hidden}
.sidebar .PopularPosts .item-title { bottom:0; left:0; right:0; padding-bottom:0; position:absolute; z-index:999; }
.sidebar .PopularPosts .item-title a { background:rgba(32,32,32,0.77); color:#FFFFFF; display:block; font-size:12px; line-height:normal; padding:5px 0 2px 5px; text-transform:capitalize; transition:all .4s ease-in-out; }
.sidebar .popular-posts ul li:hover .item-title a { color:rgba(255,255,255,1); background:rgba(231,76,60,0.88); text-decoration:none; }
.sidebar .popular-posts ul li:before { background:rgba(255,252,8,1); color:#000; content:counter(popcount,decimal); counter-increment:popcount; float:left; font-size:14px; line-height:20px; list-style-type:none; padding:0 8px 1px 1px; border-radius:0 0 10px 0; position:absolute; top:0; z-index:4; border:solid #FFF; border-width:0 2px 2px 0; }
5. Letakan script dibawah ini diatas </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  var tbn = 150;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
    image.attr('width',tbn);
    image.attr('height',tbn);
  });
});
//]]></script>
6. Save template.

Jika tampilan widget popular post di blog kamu terasa kurang menarik, kamu dapat mengubahnya, misalnya dengan mencoba mengubahnya menjadi seperti widget popular post for Blogspot Blogger versi enam ini.

Sekian semoga bermanfaat.