Cara membuat Popular Post Dengan Efek Animasi Gamabr Berputar

Hy Teman- teman kali ini aku akan mengajarkan Cara Membuat popular post Dengan Efek Animasi Gambar Berputar. Yaitu dia hanya menampilkan gambar dengan efek hover berputar saja.
Cara membuatnya juga cukup simpel kok gug sah sulit sulit.
oke kalau kalian penasaran mari kita lihat demonya.
kalau pengen lihat demonya langsung dari web slihakan klik disini.
dan yang ini hasil screenshotnya

 Cara Membuat Popular Post Dengan Efek Animasi Berputar
Ikuti Langkah - langkah dibawah ini.
1.  Login Ke Blog Anda Terlebih Dahulu.
2.  Pilih rancangan /design
3.  Pada Page Elemen Silahakan Anda pilih Add Gadged Baru popular posts seperti contoh gambar dibawah ini.

4.  Beri judul widget tersebut "popular posts"
5.  Centang image thumbnail
6.  Pada Bagian Snipet itu tidak perlu dicentang / kalian Hapus Centang pada bagian Snipet.
7.  Jumlah artikel yang ingin ditampilkan bebas atau sesuka hati kalian.
8.  Klik save
9.  Kalau sudah pilih Edit HTML
10. Cari kode ]]></b:skin>  dan paste Code CSS dibawah ini tepat diatas Code ]]></b:skin>

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-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;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

11. Sekarang Cari Kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
12. Kalau Sudah ketemu, Kalian hapus dan kalian  ganti dengan kode dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

13. Sekarang Simpan template dan lihat hasilnya

Catatan

membuat Popular post dengan efek animasi hover gamabar berputar semacam ini tidak akan mengurangi kecepatan loading blog Anda karena tidak ada pengguna javascipt dalam pembuatanya.
  Dan untuk kode yang berwarna kuning  kadang ada yang kodenya popularpost2. Jika kodenya popularpost2 yah Anda tinggal ganti kdoe yang saya berikan (yag berwarna merah) menjadi popularpost2 juga ya .

kalau masih bingung silahakan tinggalkan komentar dibawah ini

Selamat Menggerjakan Semoga Sukses Selalau

GOOD LUCK