Image Adding left sidebar to Blogger

Denim is a standard 2 column template provided by Blogger. With small changes to the template, we can add a third column to Denim. The third column can be on the right or on the left. I added the third column to the left and called it left sidebar. Follow the steps given below to add left sidebar to your blog.
Step 1

Log in to Blogger and go to Layout > EditHTML. Check Expand Widget Templates.
Step 2
Change the header width to 960px. Edit the #header portion of the CSS.

#header {
width: 960px;
margin: 0 auto;
background-color: #336699;

Change the content-wrapper width to 960px. Edit the #content-wrapper portion of the CSS.

#content-wrapper {
width: 960px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;

Change the main-wrapper width to 480px and margin-left to 10px. Edit the #main-wrapper portion of the CSS.

#main-wrapper {
margin-left: 10px;
width: 480px;
float: left;

Step 3
In your template there is a sidebar-wrapper. This is the right sidebar wrapper. It will be like this

#sidebar-wrapper {

margin-right: 14px;

width: 240px;

float: right;

background-color: #ffffff;

display:inline;

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 */

}

Change #sidebar-wrapper to #right-sidebar-wrapper, margin-right to 10px from 14px and width to 220px from 240px.

After the editing it will look like this

#right-sidebar-wrapper {

margin-right: 10px;

width: 220px;

float: right;

background-color: #ffffff;

display:inline;

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 */

}

Step 4

Add the code given below just before the #right-sidebar-wrapper.

#left-sidebar-wrapper {

margin-left: 10px;

width: 220px;

float: left;

background-color: #ffffff;

display:inline;

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 */

}

Step 5

Find out the portion of code given below.

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

Add the code given below just below the code given above.

<div id='left-sidebar-wrapper'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'>

</b:section>

</div>

Step 6

Find out the portion of code given below.

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Replace it with the code given below.

<div id='right-sidebar-wrapper'>

<b:section class='sidebar' id='right-sidebar' preferred='yes'>

Step 7
Save Template.

Leave your comments and URL of your blog :)