FIRST : INCREASE BLOG WIDTH
The first step is to increase the width of the blog. To do this follow these steps :
1. Login at Blogger.com.
2. The Blogger Dashboard page opens on successful login.
3. Click the Layout link under your blog title.
4. The Page Elements subtab of Layout tab will open.
5. Click the Edit Html subtab of Layout tab.
6. The Template Code box page will open. Scroll down in the box to this code :
#outer-wrapper
{width: 660px;
margin:0 auto;
background:#ff0000;
padding:10px;text-align:$startSide;
font: $bodyfont;
}
Increase '660px' in the width line in the above code to '880px' and save template. We have increased the width of the outer-wrapper so that it will accommodate a third column. Since we want the second sidebar to have the same dimensions we have increased the width by the same width - 220px - as that of the original sidebar. This is how it looks now :
The outer-wrapper is the red column containing the main posts column (blue) and the yellow original sidebar. Space has now been created to add a third column.
SECOND : ADD THE CSS CODE.
Now that we have created space for the third column we need to define it in the template. This is done by adding code to the CSS part of the template. We want the new column to be exactly like the original sidebar on the right. We want it to be on the left og the posts column. So we add this code between
#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 */}
This is the same code as the original sidebar. To differentiate it we have added a 'L' after 'sidebar-wrapper'. It has the same width. Since we want it to be on the left of the posts column we have changed the float property to be '$startside'.
Since Blogger has enabled support for bidirectional languages the float:left and float:right have been replaced by $startSide and $endSide respectively.
Save template.
THIRD : ADD CODE IN THE PAGE BODY.
Lastly we need to add the code for the new sidebar in the part of the template. Since it has to be the left of the posts column this code will come before it. Scroll down and paste this code :
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
immediately above this line in the template :
<div id='main-wrapper'>
