Q & A: Adding a Third Column in Blogger

Its time for another answer edition of Q & A here on this ol’ blog.

Da Da D’ Daaaaaaa!

Today’s question comes from Kris of Vintage Window. She asks:

In Blogger, how do I get a sidebar on both sides of my blog entries?

Kris, that is something that I’ve done a lot of for clients who are moving to a three column format because their sidebar real estate is getting scarce. With more and more people doing affiliate advertising, there is need for more column space. However, for some reason, Blogger has yet to offer 3-column templates.

Its not hard to do but you have to be willing to roll up your sleeves and get dirty with code. You also need to temporarily become a Type-A, very, very detail oriented person for a few minutes.

So ready to start? Go grab your cup of coffee and throw a 30 minute Barney video in the DVD player (it’ll be more than enough time)…

(Please note: This guide is one of the many that are out there on the internet. But since this is a popular question, I decided to join the ranks of some pretty smart cookies. There are also full templates you can download…which you can find with a simple Google search. This guide tells you how to add a third column to the Minima Theme. Other guides are available for the other themes.)

1. Before you do any change in the code, its always a good idea to backup your template. To do so, go to Layout, then Edit HTML, then Download Full Template. This will download an XML file of your template to your hard drive.

2. Next, you’ll want to go to Pick a New Template and select the Minima Theme. (As I mentioned above, there are other guides around that tell you how to add a third column to other themes.) Save your template.

3. Go back to to Edit HTML and scroll down to the code, under Edit Template.

4. Scroll down about 1/3 of the way until you see this code:

#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 this whole piece of code (above) and paste it right after itself.

Rename the copied code “#leftsidebar-wrapper“, because this new sidebar is going to be your left sidebar.

5. Now you need to adjust the width and float settings on some “wrappers”.  Scroll up a bit to the ‘#outer-wrapper’. A typical layout should look like this:

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

#main-wrapper {
width: 450px;
margin-left: 25px;
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: 200px;
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 */
}

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

6. Scroll down to the almost very bottom of the code and find 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>

Now is where you decide if you want the main column in the middle or on the left. If you want the main column in the middle, paste the following piece of code above the ‘main-wrapper’ code:

<div id=”leftsidebar-wrapper”>
<b:section class=”sidebar” id=”leftsidebar” preferred=”yes”>
<b:widget id=”HTML2″ locked=”false” title=”Adding a 3rd Column in Blogger” type=”HTML”/>
</b:section>
</div>

If you want the main column on the left, paste that code below the ‘main-wrapper’ code.

7. Lastly, you need to reset the header and footer width since we changed the column widths. Near the top, scroll to this code:

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

Now change the width to the same width you used in the ‘#outer-wrapper’, in this case, 900px.

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

Scroll down near the bottom again to this code:

#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 change to:

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

8. Click Preview and Save Template if everything looks good.

(Note: If you get an error message when you try to preview your blog, change the following code from step 6 to read ‘HTML3′ or 4 or 5…you can’t have duplicated widget ids. If you already have HTML widgets in your current layout, you have to use a unique number):

<div id=”leftsidebar-wrapper”>
<b:section class=”sidebar” id=”leftsidebar” preferred=”yes”>
<b:widget id=“HTML3″ locked=”false” title=”Adding a 3rd Column in Blogger” type=”HTML”/>
</b:section>
</div>

Not that wasn’t so bad was it? You are now officially a geek.

Any questions?