Cara Membuat Gambar Berputar pada Widget Popular Posts

Gambar pada Widget Popular Posts mempunyai efek berputar, akan mempercantik tampilan Blog. Ketika cursor disentuhkan pada gambar di widget popular posts, gambar tersebut akan berputar. Mudah-mudahan dengan ini dapat mengurangi kejenuhan pada tampilan Blog sobat.
Memang tampilan pada blog tidak terlalu dipentingkan. Yang penting itu kerapihan, konten-konten yang berkualitas, dan SEO yang baik. Namun tidak ada salahnya untuk mempercantik tampilan blog. Asalkan tidak memasang widget yang tidak perlu dan malah memberatkan Blog sobat ketika dimuat.
Ok, jika sobat ingin membuat gambar pada widget popular posts berputar, beginilah langkah-langkahnya:
1. Login ke akun Blogger sobat.
2. Pastikan widget popular posts telah terpasang di Blog sobat. Jika belum pasanglah terlebih dahulu. Saya yakin hal tersebut gampang dan tidak perlu panduan khusus.
3. Jika telah terpasang, sobat masuk pada bagian template.
4. Klik Edit Template.
5. Cari kode ]]></b:skin> , agar lebih mudah gunakan tombol ctrl+F.
6. Masukan kode berikut diatas 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>

7. Klik simpan.

Selesai, silakan lihat hasilnya. Gampang sekali kan sob.

Tweet

Postingan terkait:

— Add Comment