Popular Posts dengan Thumbnail Besar

Popular Posts dengan Thumbnail Besar

Salah satu widget yang penting ada pada blog adalah popular posts atau artikel popular. Popular posts merupakan tampilan beberapa artikel yang paling banyak dikunjungi atau posting dengan klik tertinggi dalam suatu blog. Fungsinya untuk memberitahukan pengunjung beberapa artikel yang sering dikunjungi. Permasalahannya, widget popular posts bawaan blogger tidak terlalu menarik. Oleh karena itu kita harus mengedit widget popular posts tersebut agar terlihat cantik dan menarik. Selain itu popular posts bawaan blogger juga lumayan berat ketika diloading. Dengan memasukkan menambahkan CSS dan JavaScript, sehingga widget tersebut akan menjadi ringan ketika di loading. Kali ini saya akan bagikan trick membuat widget popular posts dengan thumbnail besar, sehingga terlihat lebih menarik untuk dipasang di blog anda. Baiklah, sekarang mari kita bahas cara membuat popular posts dengan thumbnail besar.

Cara membuat popular posts dengan thumbnail besar

• Pertama anda harus memasang dulu widget popular posts dan setting seperti tampilan gambar di bawah ini

• Selanjutnya klik simpan.
• Klik Template
• Klik Edit HTML
• Masukkan CSS berikut di atas ]]></b:skin> atau </style> kalau peletakan css anda sudah berubah

#sidebartab .popular-posts li{background:none repeat scroll 0 0 transparent; border-bottom:1px solid #E9E9E9; overflow:hidden; padding:10px 0}
.PopularPosts img:hover, #sidebartab .widget-content img:hover{opacity:0.4}
#sidebarlab .sidebar li a:hover{color:#fff; background:#222}
.PopularPosts .item-title{padding-bottom:1.2em; color:#454C56; font-size:17px; font-weight:400}
.PopularPosts a{font-weight:bold}

• Selanjutnya masukkan JavaScript berikut di atas kode </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
// change the dimension variable below to be the pixel size you want
var dimension = 400;
var image_width=300;
var image_height=150;
var auto = "auto";
// this identifies the PopularPosts1 div element, finds each image in it, and resizes it
$('.PopularPosts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')});
image.attr('width',image_width);
image.attr('height',image_height);
});
});
//]]></script>

• Kalau sudah silahkan klik Simpan Template dan lihat hasilnya.

Demikian penjelasan cara membuat popular posts dengan thumbnail besar. Semoga artikel yang membahas tentang widget popular posts ini bisa bermanfaat bagi semua, amin. Selamat mencoba dan sukses selalu. Salam sahabat blogger.

Share this post