Widget Entri Populer Dengan Gambar Berputar

Cara Membuat Widget Entri Populer Dengan Gambar Berputar

Cara Membuat Widget Entri Populer Dengan Gambar Berputar. Kembali saya membuat postingan terbaru yang berlabel Tutorial blogging, setelah postingan sebelumnya saya yang berjudul Cara Menerapkan Tampilan Facebook Terbaru News Feed. Sekarang saya posting yang baru lagi tentang widget. Widget ini menurut saya sangat bermanfaat. Mau tau widget apa itu? Inilah widgetnya. Entri Populer Dengan Gambar Berputar.

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

Terakhir, klik Simpan Templat

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