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 protect your account from Adsense Invalid click activity

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

Related Post

How to Perform a keyword research How to Perform a keyword research?? Great SEO starts with great keyword research. All things considered, on the off chance that you don't have the fo...
51 Ways to Promote your blog and boost traffic Are you looking for some free ways to promote your blog and boost traffic?As per the data give out by New York Times, 95% of the world’s population fa...
What to Do Before Applying for AdSense It is common among every blogger's that they need to make money by using Google Adsense and what is that spot you? It is relatively simple, easy and s...
How to create Web 2.0 backlink that rank your site... We all know that Web 2.0 backlink is an integral part of link building which helps you to increase your blog traffic. I would say Web 2.0 backlink is ...
We will be happy to hear your thoughts

Leave a reply