Customize Your Blogger Widget Title

December 07, 2012


Good 24-hour interval people of planet earth! During this past week I made about changes inward about of my weblog too I notice a blogger widget championship doesn't look to check on my designs, that is why I unremarkably operate out it blank.

But now we tin edit those widgets, past times using its unique widget ID, this trick will allow yous to modify the color background, font color, size too fifty-fifty the font fashion of your widget title.

The steps are unproblematic merely follow the instructions too yous tin run into skillful results on your blogger template. I will portion how to uncovering the the unique blogger widget ID too how to role it to fashion your blogger title widget.

Here is how

Before we customize our sidebar, allow us kickoff expect for the ID cite of your widget.

Find unique widget ID

 1. Log into your blogger.com concern human relationship select a weblog of your pick thus preview your blog. You will run into a wrench icon on your weblog or the blogger edit primal merely similar this one


2. Point your mouse cursor on that ikon too role correct click, thus click on re-create link address too glue it on a notepad, because we will role them later.


This is a sample on ane of my widget, the link address unremarkably expect similar this


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


HTML16 is the unique widget ID thus maintain that inward mind. HTML/ Javascripts ID are unremarkably named HTML1, HTML2, too thus on. These ID's are sensitive thus role them equally they are.

Customize your championship widget

Now lets teach customize your widget too brand certain your backed upward your template earlier proceeding inward instance yous made about mistakes.

1. Lets role an example, I will role my "popular post" widget. Its link address will expect similar this one.


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


2.  Open your weblog template > edit HTML > role CTRL+F too expect for this code ]]></b:skin> and re-create the code below too glue 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 real own widget ID, based on our sample it will last replaced by PopularPosts1.
  • #575656 is the background color, yous tin modify them to whatever color you want using this color code generator. 
  • 12 is the default font size but yous tin modify them to whatever size you want.
  • #ffffff is the font color, modify them to whatever color using the color code generator.

3. Hit SAVE too yous are all done!


Just repeat the steps for the balance of your widget its real unproblematic virtually of the fourth dimension yous merely re-create too paste. 

I promise yous liked it, don't forget to share! 

Cheers!