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 😁 .
Widget popular post sangat berguna bagi blog karena dapat menambah jumlah pageviews dan mempermudah pengunjung dalam mengexplorasi blog kamu.
1. Di Blogger 😀
2. Pilih menu Layout / Tata letak ➔ Add a Gadget/ Tambahkan Gadget ➔ Popular Post
3. Contoh settingannya seperti di bawah ini.
4. Letakan kode CSS ini di atas]]></b:skin> atau diatas </style> .
</body>
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.
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.
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
.sidebar .popular-posts ul { counter-reset:popcount; margin:0; padding:0; }5. Letakan script dibawah ini diatas
.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; }
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>6. Save template.
<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>
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.
