Cara Membuat Popular Post Berputar

tahap pertama :

• Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini (kalau tidak ada bisa cari entri Popular) :
  

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
• Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
• Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan

• Save

  tahap kedua
  
  Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar
  
  
  • Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
  • Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini 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);
  
  }

  • Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • Dan ganti semua kode tersebut dengan kode 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>

  • Save template kalian