Ubuntu / Linux news and application reviews.


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:

blogger 2 columns