Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Customize Sidebar Header With Different Style And Color

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.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

4 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. 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

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger