How to change to 3 column layout

The Minima template is the easiest Blogger template to customize, as this is the simplest two column template.

First of all, set your template to Minima (not the stretch template, but any color will do!), then follow these instructions:

1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.

2. Now, find this section in the HTML code:

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

Copy this entire section below, and paste it directly under the above code. You see the changes we made with the CAPITALZATION OF LEFT:
(this will make the new sidebar float to the left of the main column)

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


3. Now, you need to find this section further down the page:

<div id="'main-wrapper'"></div>

Immedietly before this section, you should paste the following code:

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

4. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accommodate one sidebar. So now we need to expand the outer wrapper to accommodate this new sidebar.

Find this section in the HTML code:

/* Outer-Wrapper ----------------------------------- */ #outer-wrapper { width: 880px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

We increased the width of the wrapper from 660px to 880px.

5. Now you need to change the width of the header-wrapper to 880px so that it spans the new width of your blog:

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

6. You should PREVIEW & then SAVE if all is okay. Your new sidebar will not be show as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template >Page Elements in your Blogger dashboard and drag your widgets to the left sidebar.

7. If you add anything to this left sidebar, you will probably notice that it bunches up to the main section. This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left side of the main posts section. Find the following code in your template's HTML and add the code defined in CAPITALZATION:

#main-wrapper { width: 410px; float: left; MARGIN-LEFT: 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 */

This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust the width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accommodate this margin too. Either that, or you could reduce the width of your main column and sidebar by 20px to serve the same purpose. Now, PREVIEW your template.

8. Finally, SAVE your template and enjoy your new sidebar!

This tutorial is from Blogger Busters!

**PLEASE NOTE** I have not tested any of my templates for 3 column layout, and they may not work!! I like my blogs to be fairly clean & simple, so I stick to the 2 column layout. If you really, really like a template & really, really would like it in 3 columns, email me & I'll try my best to accommodate you!