Cara Membuat Widget Entri Populer Menjadi Animasi Gambar Berputar

Oleh Rafid Aslam

1 September 2012

Hai sobat blogger, kali ini saya mendapatkan ilmu baru dari sebuah blog. Sebagai informasi, widget entri populer adalah sebuah widget yang dibuat oleh Blogger(Google), gunanya untuk mempermudah pengunjung untuk memilih sebuah entri (artikel) yang enak untuk dibaca, karena semakin banyak orang yang mempelajari ilmu blogger, muculah sebuah java script yang membuat gambar berputar jika di sentuh oleh mouse, dan java script ini dipergunakan untuk entri populer, guna java script ini hanya untuk membuat widget tersebut lebih menarik, karena orang itu memberitahukan ke blog, maka semua orang-pun tahu cara membuat entri populer menjadi menarik, mungkin anda sudah pernah melihat widget seperti gambar di atas, pasti anda sudah pernah, ada dua faktor anda sudah melihat widget tersebut, anda memakai widget tersebut, atau anda melihat gambar di atas.

Nah anda sudah tahu kan tentang widget entri populer, sekarang kita akan membahas cara membuat widget entri populer menjadi lebih menarik.

1. Masuk ke Dasbor
2. Pilih Template

3. Klik Edit HTML

4. Klik Lanjutkan

5. Centang Expand Template Widget

6. Cari kode di bawah ini (Gunakan CTRL+F untuk mempermudah pencarian)

]]></b:skin>

7. Copy kode di bawah ini, lalu pastekan 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>

8. Klik Simpan Template
9. Pilih Tata Letak

 10. Klik Tambah Gadget (pilih yang mana saja)

 11. Pilih Entri Populer

12. Pilih Judul
13. Pilih Paling Banyak dikunjungi
14. Centang Thumbnail gambar
15. Jangan centang cuplikan
16. Pilih tampilkan hingga

  17. Klik Simpan

Tag : Tips Blogger

Bagikan :

Tweet