How to create a 3 column blogger template

From: bloggerbuster

First of all, set your template to Minima (not the stretch template, but any colour 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, and paste it directly below. We're going to change the elements I've highlighted in red to the following:

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

   This will provide the styling for the new sidebar element which we will create next.
   
   
3. Now, you need to find this section further down the page:
   

   <div id='main-wrapper'>

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

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

4. Find this section in the HTML code:
   

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

   We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.
   
5. You may also want 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. Find the following code in your template's HTML and add the code in red:

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

Now, your previewed template should look like this:

   7.  Finally, save your template and enjoy your new sidebar!

The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):

Download 3 column Minima template