Popular Posts With Thumbnail

Dalam postingan saya yang sebelumnya telah membahas bagimana cara membuat Artikel terkait dengan mode thumbnail maka pada postingan kali ini MWcrew akan membahas bagaimana cara membuat Artikel populer dengan menggunakan thumbnail juga dan mempunyai efek berputar sekaligus membesar jika di lintasi dengan mouse/kursor (Hover Effect).

Popular posts with thumbnail juga membantu menaikkan page view di blog sobat, karena tampilannya yang menarik juga mempunyai efek hover yang bagus,
Preview :

Caranya tidak sulit alias mudah, tempatkan kode berikut di bawah ]]></b:skin>

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Selesai, jangan lupa disimpan.

Setelah itu anda hanya tinggal membuat widget Entri Populer atau Popular Post seperti yang ada pada gambar dibawah ini.

Lalu aturlah widgetnya seperti pada gambar dibawah ini.

Klik Simpan, lihatlah blog anda maka Popular Post tadi sudah berubah menjadi thumbnail.
Selamat Mencoba....

Posted in: Blogger