How to Customize Each Sidebar Header Differently? ~ GprsBay

Thursday, March 10, 2011

How to Customize Each Sidebar Header Differently?

After successfully customizing Blogger Comment Form and then the About me/Profile widget we have again got something really different this time. Few months back while looking at some word press templates I observed that some Sidebars had each sidebar headers with a different Look. I kept looking for a way through which this trick could be implemented in Blogger and just last week while editing my test bog I came across an interesting fact about Blogger Widgets. All widgets that I added on sidebars had a unique ID assigned to it by Blogger. I used this ID and tried if I could use it to customize the Sidebar Header and amazingly it worked wonders! With this ID I could customize any portion of the widget I wanted. So I am curious to share this brilliant trick with you. Today we will keep it simple. We will learn first on how to customize the Sidebar Headings and in our coming posts we will keep on doing more interesting things to today’s tut. So lets jump on to the tutorial..

First kindly view a demo to see how each sidebar headings have been customized differently,

Live Demo

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

Simply follow these steps,

Log into your Blogger Account
And click the link that says View your Blog
At your Blog below each widget you will find this Edit key image,
Hover your mouse cursor on it and right Click and choose Copy Link Location
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.

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin>
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 Colour Code Generator Tool
5. Hit save and you are Done!
View your blog to see the new dress :)

That’s All!

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.