page contents

Types of Popular Posts Widget for Blogspot – 5 styles

The Popular Posts Widget for Blogspot is one of Blogger’s official widgets and it is very easy to add this to your Blog. You do not have to pay any money for using these widgets as it is free for all. Here is a simple tutorial for creating beautiful Popular Posts Widget for Blogspot using CSS. Don’t worry you don’t need to have any HTML skill to do this.

Step I: Adding the Different Types Popular Posts Widget for Blogspot

Go to 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

Widget for Blogspot

Read:

WordPress or Blogger which is better ?

5 Easy Ways to Improve the SEO of a blog

How to make a free Blog using Blogger Platform

Step II: Adding CSS Popular Posts Widget for Blogspot

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 for Popular Posts Widget for Blogspot

 .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-thumbnailimg
{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 : Popular Posts Widget for Blogspot

 .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-thumbnailimg

{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 3Popular Posts Widget for Blogspot

 .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-thumbnailimg

{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 4Popular Posts Widget for Blogspot

 .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-thumbnailimg

{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 5Popular Posts Widget for Blogspot

 .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-thumbnailimg

{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);}

Well, these are just a few types of popular posts Widget for Blogspot that we can use and there are many more methods. I will keep updating this page with the latest methods I find successful, so make sure you are subscribed to the WhizBlogger email newsletter for updates.

READ  How to add a custom domain in Blogger

I’m sure this will help those who are looking for ways to modify their Blog with great designs.

Related Post

Use LSI Keywords To Rank Higher in search results If you are familiar with SEO, you would probably know how important is keywords in bringing traffic to your site. You might have faced difficulties in...
How to Tell Which WordPress Theme a Site is Using   So you've discovered a site you like the look of and extravagant making one that appears to be identical (or if nothing else comparative)? A...
How to Choose the Best WordPress eCommerce Solutio... How to choose the best WordPress eCommerce Solution?I know you will be having a lot of questions running through your mind on setting up a WordPress...
Most Commented Posts Widget for Blogger with Comme... One of the best widgets for your blogger is a Most Commented Widget for your Blogger. This lets the visitors to see the trending post and encourages...
We will be happy to hear your thoughts

Leave a reply