Buffer

How To Customize Sidebar Header With Different Style And Color

By Durodola Ridwan | Monday, August 06, 2012 | | 2 Comments

After a little break, i decide to come up with something cool, so i will be sharing with you, how you can customize your sidebar widgets with different style and color. It's been a while now, that i have be looking for a way which i can customize my sidebar header with a nice style, but unfortunately i finally created a code which can do the work after observing that all my sidebar widgets have a unique id. This id will be use to customize each sidebar header with different background color and style, so follow the few steps below and see the awesome changes.





How To Customize Each Header

STEP 1
  • View your blog homepage
  • Scroll down at the bottom of each sidebar widget and click the edit button, like the one shown below

  • Hover your mouse on the button and right click
  • Choose Copy Link Location and paste the link in a notepad
  • The link will look something similar to the one below
www.blogger.com/rearrange?blogID=**********&widgetType=Followers&widgetId=Followers1&action=editWidget&sectionId=sidebar-right-1
  • Your sidebar widget id will be sidebar-right-1, and note that you may have something else as your widget id, and if it's HTML/JavaScript, you will have something like HTML1, HTML2 and so on
  • Copy your sidebar id and let's move on
STEP 2
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTMLback up your template
  • Use ctrl F to find ]]></b:skin> and paste the following code above it
#SIDEBAR ID h2{
background:#006882;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:11px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:normal;
text-transform:uppercase;
color:#ffffff; text-shadow:0 1px 0 #fff;
}
  • Replace SIDEBAR ID with your sidebar widget id which you copied in step one
  • To change the background color of your widget header, edit #006882 with your preferred hex color, check here for 100's of hex color code
  • Click "SAVE TEMPLATE" and you are done.
In my future post, i will publishing lot's of tutorial on how you can spice your blogger sidebar with cool style, so subscribe now and receive all our latest posts directly into your email.

Enjoyed This Post? Subscribe For More Update!

Related Posts Plugin for WordPress, Blogger...

2 comments:

  1. Nice Tutorial RB, a DEMO page would have been nicer !! or do you have and I missed it ?

    ReplyDelete
  2. I just know the trick (widget id will be there in eddit button),
    you are very help me,
    awesome.
    I have to follow your twitter :D

    ReplyDelete

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML code in comments then please use our HTML Encoder
2. For perfect customization of our tutorials, use our HTML Editor
3. If you want to be notified on follow up comments or replies, click on "Subscribe by email" below the comment box.
4. Please do not spam, Spam comments will be deleted immediately upon our review.

Regards,
Ridwan

Next Post Previous Post Home

About Me

My Photo
Durodola Ridwan is a blogger enthusiast and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, SocialMedia strategies, and Tech news in general. You can hook him up on facebook, twitter @realcombiz, and Google+.

Recent Posts

Copyright © 2013. All Rights Reserved | Home | Contact | Privacy Policy
Powered by Blogger