Membuat Entri Populer dengan Thumbnail Berputar

Membuat Entri Populer dengan Thumbnail Berputar. Hi selamat malam sobat blogger, Pernahkan anda melihat entri populer dengan efek thumbnail berputar 9 gambar? sebelum masuk ke topik tahukah anda guna widget Popular Posts atau Entri Populer di blog? tentunya semua blogger tau, fungsi populer pos agar pengunjung dapat mengetahui artikel mana saja yang paling banyak 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 mousediarahkan atau disorot ke salah satu gambar, maka efek hover-nya akan membuat gambar tersebut membesar dan juga berputar.

Untuk memasang widget Entri Populer dengan Efek Berputar 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!