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,

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 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 ▼
PLEASE NOTE:
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
    Samsexy98

    ReplyDelete
  2. @Myworld4free
    You are welcomed!

    @Sam

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

    @Digital Bunch
    Pleasure pal

    ReplyDelete
  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

    ReplyDelete
  4. Mohammad
    u r the best. Thanks

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

    ReplyDelete
  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

    @Adeel
    All praise is due to Allah :)

    @007
    Thanks brother. :)

    ReplyDelete
  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..:)

    ReplyDelete
  8. Hello Mohammad,

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

    ReplyDelete
  9. @ToTO

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

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

    ReplyDelete
  11. @vamsi

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

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

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

    ReplyDelete
  14. Urgent!

    A lot of your content is on http://shubhamtricks.blogspot.com/.

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

    ReplyDelete
  15. Thanks for the great tips! Worked perfectly!

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

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

    ReplyDelete
  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?

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

    ReplyDelete
  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!

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


    ReplyDelete
  22. Hi Mohammad,

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

    ReplyDelete
  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 http://www.nicebloggingtips.com Well I want to show widgets and gadgets with no borders or lightbox effect

    ReplyDelete