Displaying Popular Posts To Blogger With Round Image Thumbnails

Advertisement Here

If your planning to display your popular posts with round images thumbnails follow below simple steps:

Here is a simple way of creating beautiful and colorful Popular Posts Widgets for your Blog using CSS. First you have to login into blogger account, then select template>Edit HTML  now search ]]></b:skin> to your blog HTML and CSS code, after that Paste below code just above this tag and Save the Template.

Codes:

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2m0k7dOrQ2cxQ4gHAJSYX5RCs_-qw8SB3WLHmQUbpNgJsXHRNUVEWe3IVOrY0y-mNbax9uuNwQGxnoJsQ-aO0JK5GmyRAozR0HbaZMkTU4zcKKitrXn6GLlJYStmh5rdoeiD2mI6McGs/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);
}

And your Done!.. If it worked for you don't forget to leave your comments.