Membuat Artikel Populer Bergerak di Blog

Pada kesempatan yang berbahagia ini, admin mau share sedikit tentang membuat artikel populer (popular post) dengan gambar bergerak, salah satu kelebihan widgets ini adalah tampilannya yang bagus karena Mouse Hover Effect dan membesar (zoom) ketika dilintasi oleh mouse. Baik langsung saja ke materi kita kali ini..hehe biar agak serem..

Ok ..langsung saja gan.

Preview dulu gan ::

Gimana Tertarik..

>> Pertama, tempatkan kode berikut di bawah ]]></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>

>> Kedua, jangan lupa disimpan.

>> Ketiga, tambahkan widgets seperti biasa, lihat gambar dibawah.

>> Keempat, aturlah widgets tersebut sesuai dengan gambar dibawah

>> Terakhir, simpan dan lihatlah blog sobat.

Jika ada masalah bisa tinggalkan komentar dibawah.Terimakasih telah berkunjung.