Membuat Popular Post Dengan Animasi

Membuat Popular Post dengan Animasi gambar berputar. Cara membuat popular post yang kali ini akan saya share yaitu hanya menampilkan gambar dengan hover. Sebelumnya saya juga pernah menulis artikel tentang cara membuat widget popular post animasi 3D. Tentunya kali ini hasilnya akan beda dari yang kemarin dan saya rasa lebih simpel dan lebih bagus :D. Lanjut ke cara membuat widget Popular Post dengan Animasi gambar berputar.

Membuat Popular Post dengan Animasi Gambar berputar

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1

  • Login ke Blog anda > Design > Pada page lemen silahkan add gadged baru Popular Posts seperti contoh gambar di bawah ini.
Membuat Popular Post dengan Animasi Gambar berputar
  • Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
  • Centang image thumbnail
  • Pada bagian snipet tidak perlu di centang
  • Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
  • Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

  • Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
  • Cari kode ]]></b:skin> dan paste Css berikut di atasnya
.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);}
  • Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • kalau sudah ketemu, ganti kode tersebut 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>
  • Sekarang simpan template

Bookmark and Share



Artikel Terkait :)

0 komentar:

Posting Komentar

 

Mengenai Saya

Foto saya

Janganlah Memandang Seseorang Hanya Luarnya Saja Tapi Lihat Dari Dalam Hatinya.

Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik