Cara Edit Popular Post Widget

Costumisasi Popularpos
Lihat lah gambar...

kita akan buat popular post seperti itu, popular post ku kali ini menggunakan effect CSS3 Transisi





!!Important: Make Sure you've backed up your template before do this











So, How To Edit The Popular post??

• buka blogger.com buka tata letak dan edit popular post mu
• set seperti gambar di atas
• selanjutnya , go to your template >> Edit you template editor, and cari kode sperti dibawah, beberapa kostum template 

.PopularPosts
.PopularPosts .widget-content ul li{

• Ganti dengan kode ku
  

  .PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
  .PopularPosts .widget-content ul li{padding:0.7em 0;background: url(http://3.bp.blogspot.com/-5T_xlsI0aIc/T-lcR7ChM9I/AAAAAAAAAUc/G8Y7AbJ_3lQ/s1600/BI+logo.png) no-repeat 5px 10px;list-style-type: none; 
  margin:0 0 5px 0px; 
  padding:5px 5px 5px 20px !important; 
  border: 1px solid #dddddd; 
  border-radius:5px; 
  -moz-border-radius:10px; 
  
  -ms-transition: all 0.26s ease-out; /* IE10? */
  -moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out
   }
  
  .PopularPosts .widget-content ul li:hover{
  border:1px solid #6BB5FF; 
  color: #0CF;
  text-transform: none; 
  float: none;
  margin:0 0 5px 0px; 
  border-radius:15px; 
  -moz-box-shadow: 1px 1px 4px #000;
  -webkit-box-shadow: 1px 1px 4px #000;
  box-shadow: 1px 1px 4px #000; z-index:999999; font-weight:bold;  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
      -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31); 
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
  -moz-transition: all 0.26s ease-out; /* FF4+ */
  -o-transition: all 0.26s ease-out; /* Opera 10.5+ */
  -webkit-transition: all 0.26s ease-out; /* Saf3.2+, Chrome */
  -ms-transition: all 0.26s ease-out; /* IE10? */
  -moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  text-shadow:1px 1px 3px #D2BCB0, -1px 1px 3px #D2BCB0, -1px -1px 3px #D2BCB0, 1px -1px 3px #D2BCB0; 
  }

If You Can't find any code above , we will try another method

• Search  ]]></b:skin>
  selanjutnya paste code ku di atasnya
• simpan, dan gerakkan mouse mu kearah popular post
  maka kamu akan melihat effeknya

kalo kamu mau ganti warna border , cari   #6BB5FF,
ganti dengan warna yg sesuai menurutmu
Jika kamu ingin dalam bahasa Inggris, Just Click Link Below
costumize blogspot popular post