Customize All Sidebar With Different Color And Style In Blogger

Now you are make your blog sidebars with colorfull header like in screenshot .
Its also help to make your blog colorfull and sylish .
With different color or random colors header of your sidebar .
If you also want this so follow this easy step but before you can do this i am tell you that you can follow this step many times because in one time you can Customize only one widgets header .
In This Trick You can add your widgets code in code . All the widget code was different who was present in url of widget . when you click edit on any side bar then see the Url . In url see the end you can find your widget code like HTML1

DEMO LINK

How To Customize All Sidebar With Different Color And Style In Blogger ?

1. Go to Blogger > Template .

2. Backup Your Template.

3. Go to edit HTML .

4. Find (Ctrl+F) this :

]]></b:skin>

5. Paste this code before it .

#Code h2{
background:#C400DA;
margin:10px 0 10px 0;
padding:8px 0 8px 10px;
font-size:15px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
}

 Now replace Code with Your widget id who was present in widget Url .
Go to Blogger > Layout . Then click edit on your widget and see at the end of your widget url which was like

http://www.blogger.com/rearrange?blogID=****&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=HTML3

 HTML3 it is a widget code .

Now Replace this background:#C400DA;  'C400DA' with your color code .
If you want to change the font style change this code ' font-family: Sans-serif, Arial, Helvetica; ' .

For Stylish font see this post - style post titles and sidebar titles in blogger

6. Click on Save Template button .

Note - Do same step for all widgets Like :

#HTML1 h2{
background:#BD06D5;
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;
}
#HTML2 h2{
background:#D50606;
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;
}
#HTML3 h2{
background:#109B53;
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;
}
#HTML4 h2{
background:#FF9512;
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;
}

Done !!
If you have any question . please comment :]