How to Customize Each Sidebar Header Differently?

How To Find out Unique ID Name of each Blogger Widget?

Simply follow these steps,

1. Log into your [a href="http://blogger.com" target="_blank"]Blogger[/a] Account
2. And click the link that says  View your Blog
3. At your Blog below each widget you will find this Edit key image,
4. Hover your mouse cursor on it and right Click and choose Copy Link Location
5. The link will look something like this,

http://www.blogger.com/rearrange blogID=#####&widgetType=HTML&widgetId=HTML4&action=editWidget

Copy your Widget ID and keep it save as it will be used in the next part. In my case you can easily see that the widget Id is HTML4

HTML/JavaScript widgets are usually assigned such ID’s as HTML1, HTML2, HTML3 and so on.

About me widget will have an ID like Profile1 and Link lists widgets have Ids as LinkList1, LinkList2 etc.

The ID’s are case sensitive so use them as they appear.

How to Customize a Widget using its Unique ID?

Now here comes the interesting part. We will now customize the Widget’s Heading Style i.e H2 tag. Customization of other portions of the Widget will be shared in future posts.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Paste the following code just 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;
}

 

Now replace ID with your unique widget ID. To change the background color change #575656 and to change the Font colour change #ffffff. May be you will like using our [a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank" rel="Colour Code Generator Tool"]Colour Code Generator Tool[/a]

   5. Hit save and you are Done!

View your blog to see the new dress :)

Hope you find it useful and worth trying. More interesting CSS tricks on it will be shared soon InshAllah.

Note: Kindly respect Copyrights. Most of our tricks are being duplicated without attaching any credits and this really destroys our efforts. It’s a request from all our readers to respect the content of the original author.

Source: http://www.mybloggertricks.com/2011/01/how-to-customize-each-sidebar-header.html