Three Colum Templates

FINAL RESULT
BEFORE
AFTER
Three column templates are popular because they make more use of the screen real estate. Adding another column to your blog enables you to add more widgets or advertisements to your blog.


In this post I will show you how to transform your blog into a three column blog in three simple steps. Have a look at the before and after screenshots below :
To demonstrate this I have taken the Minima Dark Template of Blogger. I have shown the columns using colors to demonstrate them better...........

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 tags in the template :

#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 :

immediately above this line in the template :

I have added two Html widgets to the code as examples. Preview and save template. You can change the background color of the columns if you want to. This is the final result :

Enjoy. Siyurce: Dummies Guide