Add a Third Column to Your Blog

One of the most common questions are how to create a 3 column blog. You can do this by adding an additional sidebar. If you are unable to download a 3 column template you may just want to manually change the html code to create one. Note that templates html codes will vary. I am using the Minima template. To get to you html code, click on the Layout tab then Edit HTML. Scroll down the box containing the code until you see this code.

#header-wrapper {
width:660px;
margin:0 auto 10px; border:1px solid $bordercolor;
}

Make the changes you see in red.

#header-wrapper {
width:860px;
margin:0 auto 10px; border:1px solid $bordercolor;
}

Click the Preview button at the bottom of the html code box. You should notice the title box has gotten wider. Next scroll down the box till you see this code.

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

Make the changes you see in red.

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

Click your preview button and you should see space open up between the post column and your side bar.

Now scroll down a little further till you see this

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

This is your side bar. To create another side bar copy and paste this entire code and past it below the code that is already there. So now it will look like this.

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

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

If you hit preview you will not see any new changes. You will need to name your side bars. Make the changes you see in red.

#right-sidebar-wrapper {
width: 170px;
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
*/
}

#left-sidebar-wrapper {
width: 170px;
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
*/
}

Now if your were to preview your blog you will see the side bar down under your posts. Well we will need to change that. Scroll down till you find this html code. (Note there may be other things between the <b:section> if you have gadgets set up in your side bar. This is all you need to copy and paste.)

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

When you find this copy and past another one underneath the </div>. Make the changes you see in red.

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

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

Now if you were to preview you will see your blog back to space between your posts and sidebar.If you want your sidebar on the left move just the left-sidebar section of code you just made....(leave the right where it is)

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

Above this code...

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Now if you save your template and go to Layout you will see you have a left sidebar and you can add gadgets.