Cara Membuat Widget Entri Populer Dengan Gambar Berputar Cara Membuat Widget Entri Populer Dengan Gambar Berputar

Cara Membuat Widget Entri Populer Dengan Gambar Berputar adalah cara mengedit blog selanjutnya. Dengan memasang Widget Entri Populer dengan Thumbnail Gambar Berputar, dijamin dapat membuat blog anda lebih hidup bervariasi. Contoh screenshot dari widget ini:

Telah saya buktikan dan masih di terapkan pada blog ini, widget entri populer dengan gambar bisa berputar jika di sentuh kursor ini membuat blog saya menjadi lebih ringan dibandingkan sebelumnya. Mungkin dikarenakan entri populer yang saya gunakan sebelumnya memuat gambar dan deskripsi. Jika hanya gambar saja, akan lebih ringan. Langsung saja kita ke tutorialnya

Cara Membuat Widget Entri Populer Dengan Gambar Berputar

1. Memasang Widget Entri Populer

Pertama, login ke akun blogger anda

Kedua, pada dashboard blogger, klik menu Tata Letak

Ketiga, klik Tambah Gadget di tempat yang anda inginkan widget ini muncul

Keempat, akan muncul jendela tambah gadget, cari gadget yang bernama Entri Populer

Kelima, atur Judul dan Paling banyak dikunjungi sesuai keinginan anda tetapi untuk Tampilkan, centang thumbnail gambar saja. Untuk Tampilkan hingga, saya buat menjadi 9 karena gambar nanti berderet 3, jadi, agar rapi, buat yang kelipatannya.

Terakhir, klik simpan

2. Memberi Efek Gambar Berputar

Pertama, masuk menu Template
Kedua, klik Edit HTML
Ketiga, cari kode ]]></b:skin>
 menggunakan CTRL + F atau F3
Keempat, copy kode dibawah ini lalu paste di atas 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>

Terakhir, klik Simpan Template

Bagaimana? apakah anda sudah berhasil memasang widget entri populer yang gambarnya bisa berputar? Sekian dulu postingan Jona Rendra yang berjudul Cara Membuat Widget Entri Populer Dengan Gambar Berputar, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar