Entri Populer dengan Tampilan Gambar Berputar dan Membesar

Adanya widget Popular Posts atauEntri Populer di blog membuat pengunjung dapat mengetahui artikel mana saja yang paling banyak dibaca atau dikunjungi dalam suatu periode tertentu.Blogger sendiri telah menyediakan gadget ini sejak beberapa waktu yang lalu.

Di luar Blogger, para pembuat widget ada yang memodifikasi widget ini agar penampilannya menjadi lebih menarik. Salah satunya adalah widget Popular Posts dengan tampilan berupa gambar-gambar yang tersusun menjadi beberapa baris dan kolom. Selain itu, bila mouse diarahkan atau disorot ke salah satu gambar, maka efek hover-nya akan membuat gambar tersebut membesar dan juga berputar.

Untuk memasang widget Entri Populer keren ini, kita cukup meletakkan skrip pada HTML template blog kita serta menambahkan gadget Entri Populer Blogger tentunya di sidebar.


Untuk memasang widget artikel populer dengan tampilan gambar ini, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Jika nanti terjadi apa-apa, kita sudah mempunyai salinannya sehingga mudah untuk mengembalikan template seperti semula.


4. Tempatkan kode berikut di bawah kode ]]></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>

5. Klik tombol "SIMPAN TEMPLATE".