Cara Membuat Widget Popular Post Round Image

Halo Bloggers!

Kali ini admin akan berbagi ilmu lagi yang lainnya di dapat dari web tetangga yang sangat jauh..hhe. Intermezzo dikit ya.




Oke, tampilan widget nya seperti gambar diatas ya dan widget ini sangat cocok bagi kamu yang suka dengan warna warni yang tentunya akan semakin menambah kesetiaan pengunjung blog kamu. Yuk disimak ya...



Kunjungi Blogger Dashboard→Select Template→Edit HTML then CTRL + F untuk mencari kode ]]></b:skin>. 
Copy semua kode script dibawah ini, dan paste tepat diatas kode   ]]></b:skin>.





.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixb7kshPvDhpvrAgG5ZsZegeXOuG-el64LTuKo7p-hwxXT6VtmmhN-ZF2f7CPRybPqvFl5gZj1B5gfRc1872ZuUlmIFxbmQdELy6F6YWkz1m9izcWzyvKRx3MAERiRvb49TSE3I33W7Y/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  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);
}






Simpan semua dan setelah itu kamu kunjungi Layout blogger→Untuk Add widget Option→ dan pilih Popular post widget.






Semoga bermanfaat yaaa....