How to customize the appearance of Blogger popular posts gadget

Blogger popular posts gadget can display a list of up to ten most viewed posts in descending order of popularity. It is a useful gadget for your blog. Adding this gadget to your blog is also rather easy. You can go to ‘Design’ -> ‘Page Elements’ -> ‘Add a Gadget’. You can then choose the ‘Popular Posts’ gadget in the list.

Then you can move the just added gadget to anywhere in your blog. In my case I created two popular posts gadgets and moved them below 'Blog Posts' gadgets.

However, in some cases the problem with this gadget would be the default appearance that does not really go with that of your blog. Here is the default view of this gadget:

Here is the customized view using CSS:

Therefore, this tutorial will describe how to change the look and feel of Blogger popular posts gadget by customizing the CSS code.

Step 1: Sign in to your blog
Visit Google Blogspot home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.

Step 2: Locate the CSS id selector of your popular posts gadget

When you sign in to your blog, you are presented with the main dashboard. You can then click 'Design' link under your chosen blog title.

Under 'Page Elements' tab, click 'Edit' link of your Blogger popular posts gadget. In the title text box copy the title of your blog label gadget.

You can then click 'Edit HTML'. Tick the 'Expand Widget Templates'. Search for the title of your Blogger popular posts gadget.

By doing this you can know the id selector of your popular posts gadget. In my case it is 'PopularPosts1'.

You can also find the tag determining the appearance of your gadget title below:

 <h2><data:title/></h2>

So to change the appearance of your label gadget you would need to modify something like the following:

#PopularPosts1 {
   /* css code */
}

#PopularPosts1 ul li{
   /* css code */
}

#PopularPosts1 h2{
   /* css code */
}

Step 3: Add Custom CSS to your blog

Add the following CSS codes to your blogger blog html template (click here) :

#PopularPosts1
{
border:1px solid #B3B3B3;
background-color: #F8F8F8;
}

#PopularPosts1 h2{
   margin-bottom: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   background-color:#ADD8E6;
   color:#3399FF;
   border-bottom:1px solid #B3B3B3;
   font-weight: bold;
   text-align: center;
   text-decoration:none;
}

Related Posts