Cara Modifikasi Widget Popular Post Dengan Sircle Image

Salah satu widget yang disediakan oleh blogger ialah widget popular post yang mana widget tersebut masih dapat sobat mudifikasi tampilannya agar lebih menarik dengan merubah tampilah image atau thumbnailnya berbentuk lingkaran atau sircle.

Untuk lebih jelasnya liat gambar di bawah ini.

Cara Modifikasi Widget Popular Post

1. Login ke blogger
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code ]]></b:skin> kemudian copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

.popular-posts ul{padding-left:0px;font:14px PT Sans
  Narrow;text-align:left;color:#555;line-height:14px;margin:5px 0}
  .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px;
  list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px
  !important;font-size:12px;font-family: Arial Tahoma,
  Verdana;!important;font-weight:550; border: 1px solid #ccc; border-radius:5px;
  -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul
  li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .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);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover {
  -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);-webkit-transition:
  all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out;
  
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s
  ease-in-out; 
-webkit-transform:rotate(360deg);
  
-moz-transform:rotate(360deg); 
-ms-transform:rotate(360deg);
  
-o-transform:rotate(360deg); 
transform:rotate(360deg);}

5. Simpan dan lihat hasilnya.

Semoga tutorial kali ini bermanfaat dan jangan lupa untuk meninggalkan komentar demi kemajuan blog ini. Terimakasih :)