Quick Steps to Modify Blogger Minima Template into 3 Columns

I believe most bloggers want to modify their current dull two columns Blogger template into three columns without reading a long list of instructions and disrupting their current existing layout. Therefore I would like to give a quick 10 minutes guide. I followed this guide and it’s working fine on my current blog here.

1. Important!!! Before you begin, save your template into xml format. Go to Layout->Edit HTML->Download Full Template.

2. Search for the below HTML code (the first 16 characters)
*****************************************************************************
#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 the entire section and paste right below the above code and change the code highlighted in RED
*****************************************************************************
#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 */ }
*****************************************************************************

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

#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. Search for <div id="main-wrapper"> and paste the below code before this section
*****************************************************************************
<div id="left-sidebar-wrapper"><b:section class="sidebar" id="left-sidebar" preferred="yes"></div>
*****************************************************************************

For example
*****************************************************************************
<div id="left-sidebar-wrapper"> <b: section="" class="sidebar" id="left-sidebar" preferred="yes"></div>
<div id="main-wrapper">
*****************************************************************************

4. Search for the below HTML code (the first 16 characters) and change the code highlighted in RED
*****************************************************************************
/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
*****************************************************************************

5. Search for the below HTML code and change the code highlighted in RED
*****************************************************************************
#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
*****************************************************************************

6. Search for the below HTML code and change the code highlighted 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 */ }
*****************************************************************************

7. Finally, save the new template and enjoy the new sidebar