How to Customize Each Sidebar Header Differently?

Customize-Sidebar 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,

  1. Log into your Blogger 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,Blogger Edit-key
  4. Hover your mouse cursor on it and right Click and choose Copy Link Location
  5. The link will look something like this, 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{
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-family: Sans-serif, Arial, Helvetica;
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.

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

27 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hi Mohammad
    Very cool for bloggers who want a colorful blog..:)

    Btw is the SEO Book that you are recommending really worth and do they help sites like mine...
    I am because I have read some books which do not deal with my kind of site..:(

    Thank You

  2. @Myworld4free
    You are welcomed!


    Sam to learn something exceptional you will have to invest. The book is worth it.

    @Digital Bunch
    Pleasure pal

  3. @Mohammad
    Thats what I am asking...

    I mean is the book worth reading so that we can use it in our blogger interface which is HTML...???
    And also will I be able to optimize my site with it...

    I am asking specially for my site because I read some books which deals with same stuff like find keywords, this and that and don't know what else...
    I really got fed up reading those same things in every book and none of them helped me to optimize my site...

    They just say do this and that but HOW..??
    This "HOW" doesn't leaves me alone :p

  4. Mohammad
    u r the best. Thanks

  5. Amazing !!! no words for u r creativity.....hats off

  6. @Sam

    Then my coming posts on SEO are what you need. They will be specific to Blogger. I hope you will really like them

    All praise is due to Allah :)

    Thanks brother. :)

  7. @Mohammad
    I am eagerly waiting for them...
    I would be really be helpful if I will be able to optimize a site like my niche..:)

  8. Hello Mohammad,

    Your post are very helpful..Can't help but appreciate how brilliant you are. Now my page looks beautiful...

  9. @ToTO

    My pleasure. I am happy it worked for you. :>

  10. Hi Mohammad, your site rocks!!! I'm going to give it a try & thanks 4 the tips.

  11. @vamsi

    Oh thanks for the love. Peace be on ya :)

  12. Wow!!!!, thank you, thank you and thank you. It herlp's me a lot.

  13. i Like all ur posts Mh. Plz post some more !

  14. Urgent!

    A lot of your content is on

    Are you associated with this website or allow for your content to be reproduced?

  15. Thanks for the great tips! Worked perfectly!

  16. can this also be used for the widget itself? :-)

  17. Thank you mohomd :) Thank you Very MUCH :)

  18. Hello Mohammad, this tutorial was exactly what I was looking for! Thank you so much!

    I do have a question though, what if I want to have a picture as background instead of colour and font? What should I do then?

  19. sir why this not work in my new blogger templates?

  20. Hello, my friend, is there any way to modify the content of each sidebar content according to the content of the post? For example, a blog dedicated to sell diverse products; the client clicks on one of the products and the sidebar offers info about that specific product, like price and if there's any in stock. When the client selects another product, then, the sidebar shows the info for the new product. Something like a dynamic sidebar, it's that possible? Thank you!

  21. Thank you Bro for this post, I have tried and its working,
    thanks again and God bless

  22. Hi Mohammad,

    How do you add an image background for sidebard header? Thanks

  23. Hey my blog show widgets with borders I want to remove those borders and I dont know how can you please help my blog is Well I want to show widgets and gadgets with no borders or lightbox effect