Popular Posts widget with Rounded Thumbnails Images

This Article will help you to add a stylish POPULAR POST WIDGET to your Blog along with an image thumbnail of the post

The following are the easy steps to add this POPULAR POST widget for your blog

Step 1: Login in to Blogger Dashboard 

Step 2:Click on Add a gadget link and choose popular posts gadget (If you already added it ,then ignore this step)

Step 3: Go to: -> Template -> Edit HTML

Step 4: Search for  ]]>

Step 5:. Paste the below code just before ]]>

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

5. Thats it, now preview the template