ADDING TWO COLUMN GADGET ON BLOGGER SIDEBAR.

Wanted a cool sidebar for your blog but you can't customize it well because of your blog template support only one column sidebar??? that's a long question
but simply as 1..2..3 the solution is here today you can learn how to add two column under your sidebar.yes you heard it right!
We need widget sections to add some blogger gadgets for navigation etc.
Now if you want to add two small sidebar columns below main sidebar in your blogger template, then I will tell you how to do it.

So let's begin!
First go to Design > Edit HTML and backup your template.
1. Find the below section:

#sidebar-wrapper {
width:220px;
float:right;
word-wrap:break-word;
overflow:hidden;}

if you can't find above code look for the id:

sidebar-wrapper

2. And just below it add the following codes:

#right-col {
width:48%;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#left-col {
width:48%;
float:left;
word-wrap:break-word;
overflow:hidden;
}

3. Now find:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>

again if you cannot find above code look for their ID (the color green)



4. Now add below blue codes or replace step 3 whole code with this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

Those blue codes are added which would actually add two widget sections below the main sidebar.



5. Now preview your template for any errors and save it. Tadaa your done.




Oops i forgot to mention if some of you have problem tweaking columns in their templates and may be getting an XML error. So, here's the solution:

Assume You have already a widgets in your sidebar like:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
< ..here is your curently using widget.. >
</b:section>
</div>

Put the two column codes below </b:section> as shown below:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
< ..here is your curently using widget.. >
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>