How to Create Three Column Blogger Template

You must have seen many blogs having three columns. You may also want to make your own three column Blogger Layout Template and give your blog a new level in style. So let's do it with a simple tutorial.

You can see in Design > Page elements that you already have two column, one for the main body and the other is the sidebar. So you need to create and add an extra sidebar column.

Adding the Third Sidebar Column in Blogger Template

1. Go to Design > Edit Template and backup your template.

2. Find:

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

And change float to:

float: right;

3. Below it add:

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

This "float: left" will make the sidebar float to left. Thus you will be having a sidebar to the left of your blogger template.



4. Find and change the width of the outer-wrapper to 900px or more to avoid overlapping of sidebar over the main-wrapper.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

5. Find #main-wrapper and replace it with:

#main-wrapper {
width: 410px;
float: left;
margin:0 20px; 
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 */
} 

Here a margin to left and right of 20px is added to avoid overlapping of sidebars with the main wrapper. You can change it accordingly to overcome the issue of overlapping of sidebars.

7. Find the section:

<div id='main-wrapper'>

And just before this add:

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

8. Save your template and "Wallah", its done. You have created an extra sidebar

   for your Blogger template. 

Now you have to do some adjustments yourselves. Adjust the widths by 
altering the pixels (px) of the "outer-wrapper", "main-wrapper", 
"sidebar-wrapper" and "left-sidebar-wrap". Adjust the margins, paddings 
and width by same way to "header-wrapper" and "footer-wrapper" to match 
the style.