How To Customize Your Blogger Widget Title In Blogspot

Customize your blogger widget title

Customize your blogger widget title: Good morning people of planet earth! Over the past week, I made some changes to some of my blogs and I notice that the title of a blogger widget doesn't seem to fit my designs, so I usually leave it blank.

But now we can edit those widgets, using their unique widget ID, this trick will allow you to change the background color, font color, size, and even the font style of your widget title.

The steps are simple, just follow the instructions and you will see good results in your blogger template. I will share how to find the unique id of the blogger widget and how to use it to design the blogger title widget.

Here is how

Before customizing our sidebar, let's first find your widget's identifying name

Find unique widget ID

1. Login to your blogger.com account, select a blog of your choice and then preview your blog. You will see a wrench icon on your blog or blogger edit-key like this

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

This is a sample on one of my widget, the link address usually looks 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 IDs are sensitive so use them as they are.

Customize your title widget

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

1. Let's 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 it's very simple most of the time you just copy and paste. 

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

Cheers!