Stylish Popular Post Widget With Round Thumbnail For Your Blogger

 This post about how to customize your popular post widget more attractive with round thumbnail. This widget is more beautiful than other. when mouse hover, it shows a thin solid blue border. It fully customized with CSS code. If you like this widget,and  you can add it in your blogger. Just follow below instruction, and add it . 


Now Go to Blogger Dashboard

• Go to Layout option

• Click on Add a Gadget

• Add Popular Posts Widget from given list.

• Select "display up to 5 posts" and check image thumbnail and snippet.
  
  

• Now Save the widget

• Then Go to Template Option.

• Click on Edit HTML .

• Find (CTRL+F)  ]]></b:skin> tag.

• Copy and paste below CSS code above ]]></b:skin> tag.

/*--- Customize Popular Posts Widget Design By www.techtoones.blogspot.com --- */


.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-8V9smqs4PQsVKC54nwUmYIX-eMhUKbPbQqHefstQ7ORF_8oM5n6WUygmEhkzxYtFJ7J4tG-TZ2DVjcxFKVUH2N0LnmuAD3n_SPZx5PXuIIxkfHJlt6ktsMRy49eyjqec0qaEYvyguM/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);
}

• Save your Template. Click on Preview.

Are you happy?………………Leave a comment ….below..

Posted in: Blogs and Websites, Tips N Tricks, Tricks + Hacks