Thumbnail pada Popular Post berputar

Dunia Blogger, pada kesempatan ini saya akan menuliskan cara membuat rotating Thumbnail pada Widget Populer Post atau gambar widget popular post berputar. Rangkaian script yang penulis bagikan ini mempunyai efek memutarkan Thumbnail (gambar) widget popular post ketika mouse pointer disentuhkan pada gambar tersebut.

Manfaat Rotating Thumbnail pada widget popular post ini adalah untuk mempercantik tampilan pada blog, dengan mempercantik tampilan (khususnya pada widget popular post ini) akan membuat pengunjung bisa jadi tambah betah dan rela untuk berlama-lama di blog kita. Jika anda ingin membuat Rotating Thumbnail pada Widget Popular Post berikut ini langkah mudahnya :

Cara Membuat Rotating Thumbnail pada Widget Popular Post :
1. Anda login ke akun blogger anda
2. Anda masuk pada bagian Edit Template
3. Klik Edit Template
4. anda cari kode ]]></b:skin>
5. Selanjutnya anda copykan kode berikut dan terapkan setelah kode ]]></b:skin> tadi.

<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>

Namun sebelum anda meng-copykan rangkaian script tersebut di atas, anda harus memastikan dulu telah memasang widget popular post tersebut dengan menghilangkan checklist pada bagian cuplikan, seperti gambar di bawah ini.