How to Easily Add 2 More Sidebars to A Blogger Template

Suppose you only have a big sidebar on your Blogger blog and want to add 2 more, smaller sidebars (columns) under it (just like here, on Web Upd8). This can easily be done by following these steps:

1. Go to your Blogger dashboard: Layout > Edit HTML. DO NOT CHECK the "Expand Widget Templates" box and search for the following code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

(actually it won't be exactly like this, but search for something that resembles the above code)

Copy this code and change it's #ID, for instance #sidebar-wrapper-double:

#sidebar-wrapper-double {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

And paste it directly under the original code (do not remove the original code).

2. Just under the code from step 1, paste the following CSS code - this is actually the CSS for your 2 new smaller sidebars:

#column-left {
width: 48%;
float: left;
}
#column-right {
width: 48%;
float: right;
}

3. Locate the following code in your template:

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

and just below it, add the code for your 2 new sidebars:

<div id='sidebar-wrapper-double'>
<b:section class='sidebar' id='column-left' showaddelement='yes'>
</b:section>

<b:section class='sidebar' id='column-right' showaddelement='yes'>
</b:section>

<div style='clear: both;'/>
</div>

Now you can save your template. The result: