How to change to 3 Column Minima

I promised to help you to change your blog to 3 column, I try to explain it now very simple, and sorry my bad English. This works best with Minima Template, like all my background designs. And the width is same, than I have used to design all my 3 column backgrounds.

And a very good news is, that if you do these little changes to your HTML-code, you don't have to reset your template, so you won't loose any content of your blog.

Please note: before you make any alterations to your Blogger template ALWAYS save a backup copy to your hard drive. You can do this by selecting the “Layout” option in Blogger, then the “Edit HTML” option, then “Download Full Template.”

Select first Blogger "Layout" option and then "Edit HTML."

1. Scroll down until you find #header-wrapper, change the width show with red (660 to 880):


<#header-wrapper { width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}>

2. Scroll down until you find /* Outer-Wrapper, and you will find this following code, where you should make the changes shown with red, (change the width, add margin, change float right, add the whole code for left-sidebar-wrapper) :

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

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

#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. Scroll down down down until you find the following code (under /* Footer)(don't do anything to that code, just find it)


<div id='main-wrapper'>

4. Now copy the following code below shown red and paste it straight above the code you just found (yes, just above <div id='main-wrapper'>):

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

5. Now save your template and go into the Layout Editor.(Notice, the posts will be shown on left, until you add some gadgets to your new left sidebar).

6. Enjoy!






PS. Ohjeet suomekielella loytyy Keisarin Uusista Vaatteista.