5 Different Types of Popular Posts Widget For Blogger

The Popular Posts Widget is one of Blogger's official widgets and it is very easy to add this to your Blog. Here is a simple tutorial for creating beautiful Popular Posts Widgets for your Blog using CSS. No need to edit the template. 

Step I: Adding the Popular Posts Widget to Your Blog

From your Blog's Dashboard, navigate to Layout --> Add a Gadget --> and select Popular Posts from the list. Under the 'Show' section, check 'Image Thumbnail' and uncheck 'Snippet'. Also select the number of posts from the drop down list. Now click Save.

Step II: Adding CSS

Now go back to your Blog's Dashboard and navigate to Template --> Customise --> Advanced --> Add CSS. Select one of the following CSS styles. Copy the code and click Apply to Blog.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 1:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px;

-webkit-border-radius: 100px;

border-radius: 100px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 2:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 30px/10px;

-webkit-border-radius: 30px/10px;

border-radius: 30px/10px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 3:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px 0px;

-webkit-border-radius: 100px 0px;

border-radius: 100px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 4:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 0px 20px 0px;

-webkit-border-radius: 20px 0px 20px 0px;

border-radius: 20px 0px 20px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 5:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 20px 0px 0px;

-webkit-border-radius: 20px 20px 0px 0px;

border-radius: 20px 20px 0px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}