Jumat, 09 Maret 2012

membuat popular post dengan animasi berputar

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.

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

  1. Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
  2. Centang image thumbnail
  3. Pada bagian snipet tidak perlu di centang
  4. Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
  5. 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.

0 komentar:

Posting Komentar

  • This is my teacher.
  • BLOGGER LAMPUNG
  • ON B.LAMPUNG.
  • EXIS ON SCHOOL
  • This is my teacher
  • Teknisi on METRO M COMPUTER kota metro.
  • teknisi on metro m computer kota metro.

 
Design by http://4-jie.blogspot.com/ | Bloggerized by Fajri Alhadi