Membuat entri populer dengan efek thumbnail berputar

Gimana si cara membuat entri populer dengan efek thumbnail berputar 9 gambar? sebelum masuk ke topik tahukah anda guna widget Popular Posts atau Entri Populer di blog? tentunya 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.

Beberapa waktu lalu saya melihat widget yang seperti ini dan saya mencari-cari di mbah Google.
ternyata ketemu juga dan saya mencobanya. hasilnya seperti berikut.

Untuk memasang widget artikel populer dengan tampilan gambar ini, Anda dapat menyimak langkah-langkahnya di bawah ini. Okeh langsung saja ke TKP!

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>

Jadinya seperti ini:

5. Klik tombol "simpan template".

6. Klik tab Elemen Laman >> Tambah Gadget>> Entri Populer.

7. Konfigurasikan "Entri Populer" sesuai keinginan Anda. Namun, jangan centang pada kotak "cuplikan" karena akan memunculkan deskripsi singkat dari isi posting pada widget.

8. Klik tombol "Simpan".

9. Pindahkan elemen ke tempat yang Anda inginkan.

10. Klik tombol "SIMPAN".

11. Selesai dan lihat blog Anda. Gampang kan??

Terimakasih telah membaca artikel saya tentang Membuat entri populer dengan efek thumbnail berputar, semoga bermanfaat!