cara membuat popular post dengan kolom kapsul keren

seperti ini hasilnya..

Bagaimana cara menambahkannya di blog?

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML
  
  
  
  • Kemudian cari tag/kode ]]></b:skin> 
  • Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 
  
  
  .popular-posts ul{padding-left:0px;}
  .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
  list-style-type: none;padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  height: 40px;
  -moz-box-shadow: 3px 2px 5px #242424;
  -webkit-box-shadow: 3px 2px 5px #242424;
  box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
  }
  .popular-posts ul li a {
  font-style: italic;
  }
  .popular-posts ul li:hover {
  border:1px solid #d10202;
   -moz-box-shadow: 3px 2px 5px #d10202;
  -webkit-box-shadow: 3px 2px 5px #d10202;
  box-shadow: 3px 2px 5px #d10202;
  }
  .popular-posts ul
  li a:hover {
  text-decoration:none;
  }
  .popular-posts .item-thumbnail img {
  height:40px;width:40px;
  webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  }
  .popular-posts .item-thumbnail img:hover{
  -moz-box-shadow: 0px 0px 5px #d10202;
  -webkit-box-shadow: 0px 0px 5px #d10202;
  box-shadow: 0px 0px 5px #d10202;} 
  
  

• Simpan template...

• Selanjutnya masuk lagi ke akun blogger anda
• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

• Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:
• 
  
• 
  
  
  Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

  
  

  • Simpan gadget, selesai..
  Semoga bermanfa'at...