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