This is derived from this article by bloggerbuster. See Note* Practice this on a new blog, before trying it on a blog you've been slaving over..
Create a three column template in Blogger layouts, using the Minima template as a starting point.
The Minima template is the simplest two column template, & therefore, is the easiest Blogger template to customise. It has few parameters regarding margins, padding and the like. Once you develop the third column, it's easier to alter font-size, colours etc., so leave this until later on. Concentrate on the actual layout first.
1.Set your Template to Minima
- Click Layout>Choose new Template>Then Choose Minima
- Click "Save Template">Edit HTML (leave the "Expand widget templates" box unchecked. )
2.Build Your Third Column
1.Click Ctrl "F" & paste the following into the search box.
#sidebar-wrapper
2. Hit "Next " Now, it will be highlighted in the HTML code Copy and paste that entire section:
#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 */}
directly below it in the HTML for the Layout, so you have 2 identical sections one above the other.
3. Next, change the red elements shown in the lower section to the following:
#left-sidebar-wrapper (this makes the css for this section unique) float: left (this will float the new sidebar to the left of the main column)
This will provide the styling for the new sidebar element which we will create next.
4. Click Ctrl "F" & paste the following into the search box.
<div id='main-wrapper'>
Hit "Next " Now, this section will be highlighted in the HTML code.
5. Immediately before this section, paste the following code:
<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
Here's an explanation of what we just did::
- <div id='left-sidebar-wrapper'> This section tells the browser the left-sidebar element exists, and to look in the css for the appropriate styling for this element.
- <b:section class='sidebar' id='left-sidebar' preferred='yes'> This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwise this would cause viewing problems. Preferred is set to "yes", so it will appear in the layout, even if no widgets are placed in it.
3. Change the Width of the Outer Wrapper
The outer-wrapper is still only wide enough to accommodate one sidebar. So we need to expand the outer wrapper to accommodate this new sidebar.
1. Click Ctrl "F" & paste the following into the search box, to find this section in the HTML code:
#outer-wrapper
2. Hit "Next " Now, it will be highlighted in the HTML code In the part that immediately follows it,
{width: 660px; margin:0 auto;
padding:10px;text-align:$startSide;font: $bodyfont;}
we need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. & add a margin of 20px to tidy it up. So, change the value in red to 900px.
4. Change the width of the Header-Wrapper
Change the width of the header-wrapper to 900px so that it spans the new width of your blog:
1. Click Ctrl "F" & paste the following into the search box.
#header-wrapper
2. Hit "Next " Now, it will be highlighted in the HTML code In the part that immediately follows it,change the value in red to 900px to match the new width of your blog.
{ width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
3. Save your template. After saving your template, go to Layout>Page elements in your Blogger dashboard. Your new sidebar will not be seen in your blog , until you put widgets in it it, but you can see it when you click Layout>Page Elements.
Your layouts section should now look something like this: 
5. Add a Margin to the Main Posts Section
- But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this:
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 hand side of the main posts section. Find the following code in your template's HTML and add the code shown in red:
#main-wrapper { width: 410px; float: $startSide; 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. Another option would be to reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this: 
Save your template and enjoy your new sidebar!
You can fiddle around with the sizing of the different columns to your heart's content. Have fun!
Click Here to go to bloggerbuster's article with more suggestions & 3 Column Minima Template Download.
*Note: Thanks to bloggerbuster's straight forward writing style & past tutorials from the blogdoctor, I tweaked a few things to simplify the instructions (cutting out the need for backtracking & making things easier to find) I hope this will help people who are having problems with the tutorial.
