Adding a Third Column : The Blogger Guide

Introduction

The standard Blogger templates are two column templates. One of the most frequently asked questions on the Blogger forums is "How can I add a third column to my blog?" Many bloggers want to have a third column because that gives more room above the fold, to play around with widgets.

This is the second in a series of articles on 3 column templates. In the previous article, I explained the basic skeleton of a Blogger template. If you are not familiar with the many wrappers (outer, content, sidebar etc.) in your blog template, I strongly suggest that you read it first.

This is not a step-by-step guide on how to modify a given Blogger template in to 3 columns, but this will give you the confidence to modify one, on your own. Trust me, once you finish reading this, you will feel pretty much comfortable with the idea of 3 column templates. (I'm afraid it's a very long post though. It could not be made any shorter)

2 Columns

First let's take a look at the normal scenario. A stripped off version of a 2 column template, with the basic page elements highlighted, is shown below.

This is the skeleton of your template. Of course, you don't see it because the sections are not highlighted as you see in this instance. Since a detailed discussion of this skeleton and the div elements that make up it was given in the previous article, I will not focus on the body element of the template here. Instead, we will dig a little deep in to the Cascading Style Sheet (or CSS) behind the skeleton.

The styling and the layout of the page elements such as the main post area and the sidebar are controlled using CSS rules. For example, it is a CSS rule that tells the browser to place the sidebar to the right of the main post area and not to its left. All the style sheet rules of a template are found inside the skin element of your template. Open your template in the Edit HTML mode and search for the string <b:skin> and scroll down. You will see something like the code given below.

#outer-wrapper
{
width: 682px;
}

#header-wrapper
{
width:660px;
}

#content-wrapper
{
width: 660px;
}

#main-wrapper
{
width: 410px;
float: left;
}

#sidebar-wrapper
{
width: 220px;
float: right;
}

#footer-wrapper
{
width: 660px;
}

(I have taken out some properties from the actual CSS of the skeleton page. The full page can be seen here. If you want to see the full CSS, right click on the previous link and save the page to your disk. Then open it using a text editor such as the Notepad)

The header-wrapper, content-wrapper and the footer-wrapper (yellow boxes in the figure), all have a width of 660 pixels. (i.e. 660px). Because I wanted to highlight the outer-wrapper (the gray box), I have given it a padding of 10 pixels. Hence the width of the outer-wrapper, the grand container which surrounds all other wrappers, has a width of 682 pixels (i.e. 660 + 20 pixels for the left and right padding + 2 pixels for the borders of child wrappers). Note, however, that a real template does not have this padding and therefore outer-wrapper will also have a width of 660 pixels.

Each of the sections in the above code snippet are called id selectors in CSS jargon. An id selector starts with a hash (#) character, then has some string id, followed with a set of rules enclosed within an open brace ( { ) and a closing brace ( } ).

Don't worry too much about it, this is what you need to know about it. When a browser find an HTML element that has the id property set to some id, it will search whether it can find a matching id selector from the CSS rules applicable for the HTML page. In our case, the HTML element is one of the div elements in the body section and the CSS rules are the ones defined in the skin of the blog template.

Consider the <div id="content-wrapper"> element. This div element has the id content-wrapper (note the absence of the # character) and when the browser finds this div, it will look for an id selector that looks like #content-wrapper. If an id selector is found, the style rules defined inside that id selector will be applied to the div. All the other div elements are also styled the same way.

Confused by now? Then take a break, read the first article and come back again.

Adding the Third Column

Now let's get down to the real job. We will take our 2 column skeleton and convert it in to a 3 column skeleton that has two sidebars on the right side. (For a 3 column template with left and right sidebars, look at the fourth article in this series.)

Before you convert a template in to 3 columns, you need to decide where to put the 2nd sidebar (i.e. whether you want the both sidebars to the right of the main post area or whether they should be on the left and right of the main post area). Having sidebars to the left of the post area can delay the loading of posts, as the page elements load in a left to right order. However, its up to you to decide where to put it.

Another important thing you must do is to check whether your template uses images in the header, footer and the background. Templates such as TicTac and Rounders do use images and therefore you need to do additional work to customize them. Minima and Denim, on the other hand, don't use images and therefore are easy to modify.

In this article, we will only focus on modifying templates that do not use images. I will later explain how to modify a template that does use images.

The Steps

You have to perform 4 steps to convert a 2 column template in to a 3 column one.

Add a new id selector for the 2nd sidebar wrapper.
Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar
Expand the width of the parent wrappers to accommodate the new sidebar
Modify the CSS rules for the wire frame Layouts editor

First step is to add a new CSS id selector. Just copy and paste the existing id selector named #sidebar-wrapper (some Blogger templates just call this #sidebar) and rename it to something like #sidebar-wrapper-two.

The changes we do to the template skin are shown in red below.

#sidebar-wrapper
{
width: 220px;
float: right;
}

#sidebar-wrapper-two
{
width: 220px;
float: right;
}

The second step is to introduce a new div element to the body of the template. We place this div after the div for the first sidebar, as a child of the content-wrapper. The additions to our template are shown below.

In the actual Blogger template, you have to copy the div and the <b:section> element as well.

After we complete the first two steps, our skeleton page will look like this.

Our skeleton looks a bit crammed, isn't it? Now what's wrong here? We just inserted the 2nd sidebar but we never provided room for it inside the parent wrappers. Therefore the sidebar we just added gets pushed down. (The full code for this crammed 3 column skeleton is available here)

When we complete step 3, this problem will be solved. We have to provide space for this new sidebar inside its parent container. Since we just copied from the existing sidebar, the 2nd sidebar also has a width of 220 pixels, the amount by which we should expand the parent container, content-wrapper.

#content-wrapper
{
width: 880px;
}

We increased its width to 880 (i.e. 660 + 220) and the result is shown below.

Oops! What happened? Increasing only the content-wrapper is not sufficient. Then our blog looks skewed. To balance out, we have to expand the header-wrapper, footer-wrapper and the grand parent, outer-wrapper by the same amount. Add 220 to all of them.

#outer-wrapper
{
width: 902px;
}

#header-wrapper
{
width: 880px;
}

#footer-wrapper
{
width: 880px;
}

Before we look at the result, there's another catch that I have to explain to you.

The existing sidebar is, by default, floated to the right. (Floating is the means by which we decide the positioning of page elements relative to other elements. We don't have to discuss it in detail here.)

In this example, we will float the new sidebar to the right of the existing sidebar. To keep the original sidebar on the left, we have to modify its float property to left. (In the Blogger templates, the two variables $startSide (which is by default left) and $endSide (which is by default right) are used instead of the actual values 'left' and 'right'). So that change is:

#sidebar-wrapper
{
width: 220px;
float: left;
}

When we do all this, we have the following 3 column skeleton template.

There it is! What you have been waiting so far. (Thank you for your patience if you read this long post this far). Starting from a 2 column skeleton, we modified it to a 3 column template with 2 sidebars on the right. The one in dark blue is the new sidebar.

Wait a minute. I didn't tell you about how to modify the wire frame editor, did I? No, I will not discuss it here as that will stretch this article even more. See this article to find out how to do that.

Summary

So in summary, we learned about

the skeleton of a 2 column template
how CSS rules are hooked up to the page elements through id selectors (Note, however, that there are many other types of selectors in CSS)
how to add a 3rd column to your Blogger template
how floating can be used to position the sidebars

If I managed to make you feel confident about changing in to 3 column templates, then I have achieved my objective. I would love to hear your feedback.

(Note: All the skeleton HTML pages used in this article are available here)