3 Coloum Blog Tutorial

!!!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)
4. Now copy the following code below shown red and paste it straight above the code you just found (yes, just above

):

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!

If you have any problems with our 2 to 3 column blog tutorial, let us know!!!