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  6 Stylish Recent Post Widget for Blogger

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

Related Post

Increase Thumbnail Resolution on Blogger By default, in Blogger when we add a widget, the default side of every widget and thumbnail resolution on blogger will be 72 x 72 which might not look...
Blogger vs WordPress : Which is better and Why? We are regularly asked by new users for what good reason they ought to utilize WordPress rather than free blogging administrations like Blogger vs Wor...
Add Recent Comment Widget with Avatars to Blogger In a previous article, I have learned how to add Recent Comments Widget for Blogger.Now in this article, we are moving a step forward that is by add...
Learn how to Deal with Blog Plagiarism Writing genuine content is the reason behind all successful bloggers in the world. Writing an original content for a blog has many positive impacts ov...
We will be happy to hear your thoughts

Leave a reply