Adding a third column to your template

If you're interested in adding a third column to your free blogger template, search no more. Our blogger tutorials will teach you everything you need to turn your two column blog into a three column blog.

add this code in the CSS after the

 <b:skin><![CDATA[

tags after increasing the width to 1024px as shown :

#outer-wrapper {
max-width:890px; /*<----INCREASE THIS to 1024px */ padding: 0 30px 50px; width:100%; width/* */:/**/auto; width: /**/auto; } 

Save the template. Now you can notice that your width has changed. The next step is to define a new column in the newly generated space . You can do it as follows:

#rightsidebar-wrapper {
width:32%;
float:right;
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 */
}
#rightsidebar {
margin:0;
padding-top: 100px; /* reduced from 170px of leftsidebar */
}


Notice that the right sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'twocol'.


#twocol {
width:67%;
float:left;
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 */
} 

Since the right sidebar wrapper is 32% we have sized this at 67%. Save Template.


We have defined the sizes and the positions of the columns in the CSS. Now we have to add them in the body of the template. Scroll down till you come to this line :

<div id='main-wrapper'> 

and add the following code just above this line.

<div id='rightsidebar-wrapper'>
<div id="rightsidebar">
</div></div>
<div id="twocol"> 

Notice that the right sidebar wrapper along with its sidebar has been added before the main wrapper and the twocol division has been opened but not closed. To close it add this code

</div> 

just before the footer wrapper code starts here :

<div id='footer-wrapper'> 

Thus the twocol includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it. Save Template.


We have added the third column but it is empty. To populate it with widgets or Page Elements add these lines :

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

at the position marked by xxxxxxxxxxxxxx below :

<div id='rightsidebar'>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

Save Template.

Posted in: