Customize Popular Post Widget In Blogger

Customizing and Stylizing Blogger Popular Post Widget:

1. go to Blogger >> Template >> (Create a backup in case anything went wrong).
2. Select Edit HTML >> Proceed.
3. Now  Search for ]]></b:skin> (CTRL+F Shortcut to quick search)
and just above it paste the following CSS Coding.

/*--- LWTHacker --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
.popular-posts ul
  li a:hover {
.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);

All Done: Finally, Press the Save Template button and you have successfully customized your  post widget. Now visit your site and enjoy the results.