Customize your blogger widget title

Good day people of planet earth! During this past week I made some changes in some of my blog and I notice a blogger widget title doesn't seem to fit on my designs, that is why I usually leave it blank.

But now we can edit those widgets, by using its unique widget ID, this trick will allow you to change the color background, font color, size and even the font style of your widget title. A demo of this trick can bee seen on this blog, check out my sidebar its all dark black it used to be green before.

The steps are simple just follow the instructions and you can see good results on your blogger template. I will share how to find the the unique blogger widget ID and how to use it to style your blogger title widget.

Here is how

Before we customize our sidebar, let us first look for the ID name of your widget.

Find unique widget ID

1. Log into your blogger.com account select a blog of your choice then preview your blog. You will see a wrench icon on your blog or the blogger edit key just like this one

2. Point your mouse cursor on that image and use right click, then click on copy link address and paste it on a notepad, because we will use them later.

This is a sample on one of my widget, the link address usually look like this

http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=HTML&widgetId=HTML16&action=editWidget&sectionId=sidebar

HTML16 is the unique widget ID so keep that in mind. HTML/ Javascripts ID are usually named HTML1, HTML2, and so on. These ID's are sensitive so use them as they are.

Customize your title widget

Now lets go customize your widget and make sure your backed up your template before proceeding in case you made some mistakes.

1. Lets use an example, I will use my "popular post" widget. Its link address will look like this one.


http://www.blogger.com/rearrange?blogID=4286932960589248134&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebar


2.  Open your blog template > edit HTML > use CTRL+F and look for this code ]]></b:skin> and copy the code below and paste the copied code above ]]></b:skin>.

#ID h2{
background:#575656;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:12px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}

CUSTOMIZE

• Replace "ID" with your very own widget ID, based on our sample it will be replaced by PopularPosts1.
• #575656 is the background color, you can change them to any color you want using this color code generator. 
• 12 is the default font size but you can change them to any size you want.
• #ffffff is the font color, change them to any color using the color code generator.

3. Hit SAVE and you are all done!

Just repeat the steps for the rest of your widget its very simple most of the time you just copy and paste. 

I hope you liked it, don't forget to share! 

Cheers!