Beranda » Tips Blogger » Cara Membuat Widget Entri Populer Menjadi Animasi Gambar Berputar

Cara Membuat Widget Entri Populer Menjadi Animasi Gambar Berputar

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