How to format Blogger blog label gadget

Labels in blogger blog are used to group posts so that all posts belonging to one label can be viewed together. To bring up the list of labels to visitors, you can add the Blogger blog labels. 

The default view of this Labels gadget is a list of labels.

You may want to customize its appearance to suit your blog's appearance. This tutorial will describe how to do this task by using CSS.

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 label 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 blog label 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 blog label gadget.

By doing this you can know the id selector of your label gadget. In my case it is 'Label1'.

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:

#Label1 {
   /* css code */
}

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

#Label1 h2{
   /* css code */
}

Step 3: Add Custom CSS to your blog

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

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

#Label1 ul li{
  list-style-type:none;
  display:block;
  padding-top: 5px;
}

#Label1 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