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 HTML" back 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!".

Follow @realcombiz