Making a 3 Column Blog

Blogger is great, we all know that - you can have a blog set up and running within about 2 minutes, and it'll look great just using the templates that they provide you with. If you're happy with the way things look then everyone will live in peace and harmony for ever and ever and ever. However, if there's something you want to change about the template, blogger can be a complete nightmare. Yes, everything is styled in CSS, which makes things a little bit easier, but if you don't know what's going on, you don't have a hope in hell of getting things to look the way that you want.

A couple of people this week have asked me how to make their default 2-column blogger template into a wider 3-column template - sounds pretty easy, but we are gonna have to get our hands dirty with the actual coding of the page to make it happen. Before we begin, a quick note: The blogger templates are set up so that they will be viewable on the smallest possible screen size (640x480) and people will not have to scroll horizontally. By increasing your width with 3 columns, the people using this resolution will have to do a lot of scrolling to see your content. However, looking at my stats for the last month for my blog, not one person was using this screen resolution (out of over 5,000 visitors), so this is a pretty moot point.

First of all, a bit of explanation on how the default blogger templates are set up. In order to get everything laid out on the page where they want it, they use Divs, and style them using CSS. Divs are a way in HTML of positioning a block of content exactly where you want it on the page. They're a little like tables, but instead of having to make sure that one table cell takes up x amount of space in order for another to appear in your desired position, with Divs, you can tell it an exact coordinate. Here's a diagram showing the Divs (and their names) on a default blogger template:

These are pretty self explanatory - the only one that may cause a bit of confusion is the outer-wrapper - this is basically a hold-all for all the other information contained within the page, and gives the divs contained within a reference for positioning. The divs will have different dimensions, depending on what default template you've chosen. This is how we want the template to look:

Here is where things start to get messy. The first thing we need to do is increase the width of the content-wrapper so that it can accommodate another sidebar on the left. The default sidebar is generally around 220 pixels wide, so we'll need to increase by this amount. Go into the Edit Template HTML page for your blog (dashboard>layout, then choose the Edit Template HTML tab at the top of the page). Now you need to find the part in the code that controls this outer-wrapper width - in the minima template this is about 1/3 of the way down the page - you're looking for:

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

This controls all the dimensions, margins and positioning for all your content in your blog. Some of the settings may be a little different, depending on your template, so don't be alarmed if this is the case. Change the width value to 780px. This is the maximum size width that people looking at your blog will be able to see without scrolling horizontally at 800x600 resolution (you need to allow 20px for the scrollbar on the right). While you're here, below the code you just edited, you'll see a section named #main-wrapper - change the float option in this section to center instead of left, so that it looks like this:

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

This won't change much when people actually look at your page, but it will help you see things the way they're supposed to be in the layout editor. Now we need to change all the other divs so that they will fit with this new width. We'll deal with the header first, and work down. The header code is actually above the outer-wrapper code. This is what you're looking for:

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

Again, change the width to 780px (we want the header to take up the entire width of the page). Same with the footer (further down the 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;
}

Change the width to 780px again. Here's where things start to get interesting. The existing sidebar and the div that will contain the main content, we want to keep around the same size, and just budge them over enough to fit in another sidebar div. We need to copy and paste the existing sidebar-wrapper code to make the new sidebar to the left. Find this near the top of your code:

#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 */
}

Change the width of this sidebar to 200px, then paste your new sidebar code directly underneath this one (it doesn't really matter where you put it, but it helps to keep all the wrappers together so you can find them easily if you need to. Change the values to something like this:

#sidebar-wrapper2 {
width: 170px;
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 */
}

The float value just tells the div which side of the outer-wrapper to go to, you'll see on the other sidebar that this was set to go to the right. Now that we've set the style for our div, we need to actually create the div itself, so we have to move out of the CSS code block, and down to the HTML block, further down the page. Look for a block starting with this code:

<div id='sidebar-wrapper'>

Above this, paste the code for the new left sidebar:

<div id="sidebar-wrapper2">
<b:section class="sidebarLeft" id="sidebarLeft" preferred="yes">
<b:widget id="Profile1" locked="false" title="About Me" type="Profile">
</b:widget>
</b:section></div>

I've just added the "about me" widget to the left sidebar to give you something to fill the space in the layout editor, for when you come to add other widgets to this area, otherwise you'll have nowhere to drag your widgets to to add them to your new sidebar. You can remove this "about me" widget as soon as you've added another widget to the sidebar. Because you now have 2 "about me" sections, you'll need to delete the one for the right-hand sidebar, otherwise blogger will throw a tiz. Just delete this code

<b:widget id="Profile1" locked="false" title="About Me" type="Profile">
</b:widget>

from the right-hand sidebar div, which should now be just under the code you've just inserted.

All that remains is to copy the styles used for the right-hand side bar to the left one, so that they have a uniform style. Go back to the block of CSS code, and somewhere near the bottom you'll see a section specifically for the sidebar, starting with

/* Sidebar Content
----------------------------------------------- */

Here, you should see 4 or more styles relating to the right-hand sidebar, you need to copy these styles to the new left-hand sidebar by just adding the name of the sidebar to the list these styles apply to. So where you see

.sidebar {

replace it with

.sidebar, .sidebarLeft {

and where a certain element of the sidebar is changed, add the same element to the list for the left sidebar, so you might see

.sidebar ul {

change this to

.sidebar ul, .sidebarLeft ul{

likewise

.sidebar .widget, .main .widget {

becomes

.sidebar .widget, .main .widget, .sidebarLeft .widget {

and so on. Once you've copied all the styles for the right-hand side bar to the left-hand one, you should be pretty much done. You might want to fiddle around with the widths of the elements to make them fit better with your design, but apart from that most things should be fine. I would strongly suggest looking for a tutorial on CSS on the internet so that you understand fully what the code in your template is doing, and so you can edit it to look exactly the way you want it to without fear of breaking the template.

I hope you find this tutorial useful, and leave a comment if you have any problems with this or have a tip regarding this code, we're all here to help each other learn!