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  7 Best Free WordPress Ecommerce Plug-ins

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

Related Post

5 Sites To Get Free copyright free images Every blogger needs the importance of copyright free images for their sites. Many bloggers use images downloaded from Google images or from other webs...
Proven ways to increase AdSense impressions An Ad Impression in the online advertising context is explained as a single visual impression made by a user on an ad displayed in a wb page. It does ...
Facebook Like Box with Hover Effect for Blogger Hello blogger, in this post I will like to share you some two different types of Facebook like box with Hover effect. Kistharah is always ready to giv...
13 things to do for Google AdSense Approval within... So, you want to make some money from your website using Google AdSense Approval? Who does not dream about making some money from online? It is a...
We will be happy to hear your thoughts

Leave a reply