How to make your blog 3 columns

For this Blogger Tutorial I am going to show you how to make your blog 3 columns.  This tutorail only works with Minima templates.  This takes a little bit of HTML knowledge, but isn't nearly as scary as you might think!  We are going to go into our HTML code. So we'll start out by clicking on Dashboard

 

Then we'll click on Layout

Then we'll click on Edit HTML

Next we will back up our Template incase we make any mistakes

 

Hold CTRL and press F at the same time.  A box will appear at the bottom of your screen.  Type in the following code:

sidebar-wrapper

And hit enter, it will direct you to this part of your code:

Copy this code:

#new-sidebar-wrapper {<br>  width: 220px;<br>  float: $startSide;<br>  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br>  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */<br>}

 And place it beneath the #sidebar-wrapper So that it looks like this:

Hold CTRL and press F at the same time. Enter this code:

'main-wrapper'

It will bring you to this part of your template:

Copy this code:

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

And place it directly above the 'main-wrapper', so that is looks like this:

Now hold CTRL and press F at the same time and enter this code:

#outer-wrapper

It should take you to this part of your code:

 We are going to edit this code a little bit.  So copy this code:

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

And replace the #outer-wrapper so it looks like this:

Now hold CTRL and press F at the same time and enter this code:

#main-wrapper

It should take you to this part of your code:

We are going to edit this code too, so copy this code:

#main-wrapper {<br>  width: 530px;<br>  margin-left:15px;<br>  float: $startSide;<br>  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br>  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */<br>  }

And replace the #main-wrapper so that it looks like this:

Click preview

If everything looks okay, then click Save Template

If you have questions, please leave a comment and I will be happy to help!