Blogger - Transform 2-column Template to 3-column

People are always curious about how to use maximum space on blogger. The default templates are very simple and disgusting. We need something new after all. So take any template from blogger or another where you can get blogger compatible templates. And then do changes as per the instructions.

First goto your HTML template code and save it in your machine before starting changes.

Find

#header-wrapper {

in your HTML code

Change value for width like width:860px; if its small value.This will make your blog's width wide and gives you more space fro your content and ads.By default width is about 660 pixels.

Find

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

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

#sidebar-wrapper {
width: 210px;
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: 210px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


and colored lines are changes or new additions. here left-sidebar-wrapper is for new sidebar. I have changed the widths as per total width of 860 pixels. For example 2 sidebars, each of 210 pixels(by default it is 220) and main post column is of 410 pixels.

Find <div id="content-wrapper"> and add below code after this line


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

Now save your template and goto Layout tab.

You will get new sidebar in design. Then you can add your new widgets in it. Use your whole blog.manage all your data as you wish. You can make it more wider if you need.