Entri Populer dengan Tampilan Gambar Berputar dan Membesar

Entri Populer dengan tampilan gambar.

Adanya widget Popular Posts atau Entri 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. Skrip widget Popular Posts Thumbnail View ini saya dapat dari http://mwcrew10.blogspot.com/2012/01/popular-posts-with-thumbnail-view.html. Terima kasih Sob..

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

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.

Mengonfigurasikan widget "Entri Populer".

8. Klik tombol "Simpan".

9. Pindahkan elemen ke tempat yang Anda inginkan.

10. Klik tombol "SIMPAN".

11. Selesai dan lihat blog Anda.