Widget Popular Post Style V7 di Blogger! Ubah Tampilan Blogmu Menjadi Lebih Keren

Pastinya sobat sudah tahu kan apa itu Widget Popular post? Yah, Widget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi atau dibaca oleh pengunjung menurut perhitungan Google Analytic. Widget ini sudah disediakan oleh Blogger tinggal kita saja yang menentukan ingin memasangnya, kemudian memodifikasinya 😁 .

Setelah kemarin admin telah membagikan cara membuat widget recent post dengan navigasi, maka pada kesempatan ini akan membagikan widget popular post versi 7.

Widget Popular Post V.7

Widget popular post sangat berguna bagi blog karena dapat menambah jumlah pageviews dan mempermudah pengunjung dalam mengexplorasi blog kamu.

LIHAT DEMO

Cara memasang widget popular post V7 di Blogger

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

Add Widget Popular Post

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post

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",sans-serif; height:130px; font-weight:bold; list-style:none !important; overflow:hidden; padding:0 !important; position:relative; margin:2px; border:0; width:100%; 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:16px; font-weight:bold; line-height:normal; font-family:"Oswald",sans-serif; padding:10px 0 5px 10px; 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 menjadi lebih menarik, misalnya dengan mencoba mengubahnya menjadi seperti widget popular post V6 yang pernah admin bagikan sebelumnya.