Adding A Third Column To Your Blogger Blog

Another feature that can give a garden blogger WordPress envy is those fancy third columns. I admit that when I discovered WordPress and their fancy third columns I almost ran into the arms of WordPress. Then I learned how easy it is to add one to your Blogger blog. Of course you could always do a Google search and find many three column templates you can use but if you like making your own and having full control over the design of your blog building your own "from scratch" is the way to go.

I'll try to avoid any unnecessary wordage and just show you how to do it. In this example I'll be modifying the "Minima" Blogger template it will have one column, then the post area and then another column just like on the Chicago Gardeners blog.

I don't really recommend doing this on your live blog but I've done it so you can work on your live blog but at your own risk. I recommend creating a test blog and trying it out there first and when you become comfortable you can do it on your live blog. Create another test blog and do it again until you're 100% confident. OK? Lets begin.

Near the top of the code of your template find the header code that looks like this:

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

Make the following changes:

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

Scroll down to the outer-wrapper that looks like this:

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

Make the following changes :

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

Scroll down to the main-wrapper that looks like this:

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

Make the following changes:

#main-wrapper {
width: 445px;
margin-left: 3px;
margin-right: 12px;
float: $startSide;
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 */
}

Now scroll down to the sidebar-wrapper that looks like this:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 it and paste it right below making the following changes:

#sidebar2-wrapper {
width: 220px;
float: $startSide;
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 */
}

Notice that I added the number 2 to the name of the new sidebar I created. I didn't this because it has to have a unique name from the sidebar already on your template. You'll see the number 2 come up again below.

Scroll down to the footer-wrapper that looks like this:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

And make the following changes:

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Now scroll down a ways to what are called the "divs" it looks like this:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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

Copy and paste "div" labeled sidebar above the "div" labeled main and make the following changes to the new "div" we created for the new sidebar:

<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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

Make note of the fact that I added the number 2 again this time to the "div" for the new sidebar I created. If you're working on your live blog (which you shouldn't unless you feel comfortable) the "div" for the original sidebar will have widgets. If so remove the widgets like I did in the example above. Now just hit preview and if you did everything correctly you'll get a successful preview but won't notice the new sidebar until you go under Layout>and add gadgets to your new sidebar. If you followed along you're done. The following will be explanation of things for those who are interested. If you don't need to know how the sausage gets made you can stop reading now.

What is the outer-wrapper and why did I make it 900pixels?

The outer-wrapper is what holds your main area and your sidebar in place. Think of it like your belt- it has only enough room (notches) for a certain waist size. If you gain weight you need to add more notches to your belt to accommodate your girth. So that is what we did, we when we added pixels to it-we gave it more "notches" to have room for the new sidebar. Unless I totally messed up the pixels used in the main area and sidebars should add up to 900. main-wrapper pixel including pixels used in the margins = 460. The two sidebars combined add up to 440. 440+460=900.

Does the outer-wrapper have to be 900pixels wide?

No, it can be smaller or it can be larger. It just has to have enough room to contain the main area and the two sidebars. Say we made our sidebars both 200pixels wide and our main area 500 pixels wide it would still add up to 900pixels total and fit in our wrapper. You get the idea. If you got up to 1000pixels for your outer-wrapper you have 100 extra pixels to give to divide up between your main blog area and your sidebars.

Why add margins to the main blog area?

The numbers I used there aren't set in stone either. If you don't add margins to the main area then the sidebar we added would be very close to the main blog. The margins we added push the sidebars a little to the either side of the main area giving some negative space which makes reading easier. Feel free to play around with the numbers keeping in mind that everything has to add up the same number of pixels as the outer-wrapper.

Why add the new sidebar div above the main blog area?

The reason the div I created for the new sidebar was added above the div for the main blog area was because I wanted the template design to be sidebar-main-sidebar. If I had placed the div below the main blog area the template created would have been main-sidebar-sidebar.

Why make the header & footer wrappers larger?

Mostly for design purposes. Nothing will happen if you don't make the header and footer the same size as the outer-wrapper except that your template will look a little uneven.

Feel free to ask questions if any of this needs clarification. Again, I say try this on a test blog until you feel comfortable enough working around a live blog. Make sure to backup and save your template in case you make any mistakes.