3 Column Blog

Here is one way to convert a blogger template with one side panel so that there is a panel on each side. In this example, I've taken the "Minima Lefty" template by Douglas Bowman and Darren Delaye.

I've widened the template and added another column to the right.

You can adapt this procedure for other blogger templates. My own blog is currently an adaptation of the "Demim" template by Darren Delaye.

First, to answer some basic questions:

1. Is this easy? Well, it's intermediate. If you've edited HTML before, you'll be fine. If not, you'll just need to be bold. I think it's equivalent to re-wiring a plug without the risk of executing yourself.
2. Can I screw up my blog template trying this? Yes, but you'd need to make a lot of mistakes to achieve that! We'll start by making a backup, so you should feel confident that you can always undo any mistakes.
3. Can I loose my posts? No, we won't be touching them.
4. Can I follow the instructions exactly step by step? Not exactly. Every template will be slightly different. But you should recognise the sections ok. I did pretty much the same procedure with this very blog.
5. Are there any guarantees? Only taxes.

Well, I've done my best to put you off. Any intrepid bloggers still reading... here goes.

Step 1:

Go to your blogger Dashboard.
Under the Template tab, select 'Edit HTML'.
Copy the full content of the large Template box.
Paste it into a text editor like notepad or gedit (not Word).
Save it on your computer (perhaps call it MyTemplate.txt).
Make another copy to edit (so that you keep a copy of the original).

Step 2:

Open your template in your text editor.
Scroll down to find a section like this:

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

#main-wrapper {
width: 410px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Copy the #sidebar-wrapper subsection and head the new copy #rightbar-wrapper
Increase the outer-wrapper width to 850.
Decrease the sidebar-wrapper and the new rightbar-wrapper to 180.
On the rightbar-wrapper, change the float from left to right.
Also, rearrange the subsections so they are in order, from left to right.
(I moved sidebar-wrapper subsection above the main-wrapper subsection.)
Add to the main-wrapper section the line "margin-left: 30px;"

The section will look something like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#sidebar-wrapper {
width: 180px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#main-wrapper {
width: 410px;
margin-left: 30px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#rightbar-wrapper {
width: 180px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note: You can adjust to different widths. If your side, middle and right bars (or columns) do not fit comfortably within your outer wrapper, you will find that one column may start below the bottom of another column - stepping too far down the page.

Step 3:

Find the Sidebar Content section.
Copy and paste another copy immediately below it.
In the second copy, change all the occurrences of 'sidebar' to 'rightbar'.

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

/* Rightbar Content
----------------------------------------------- */
.rightbar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.rightbar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.rightbar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.rightbar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Note: you may have noticed the $sidebarcolor. Leave that as it is for now. That way the same colour schemes will apply to both side and right columns.

Step 4:

Toward the bottom of your template, you'll see a "div id='sidebar-wapper' " section similar to the graphic below.
Copy the whole section and paste another copy beneath it.

You guessed it, rename the 'sidebar' bits to 'rightbar'.
Arrange the sections in the order shown below: sidebar-wrapper, main-wrapper, then rightbar-wrapper.

Now, delete some of the widget lines so that each widget line appears only once in either the sidebar, or the rightbar section. A widget cannot appear in both. In this example, I have only two widgets, so I'll put the Profile1 in the sidebar and the BlogArchive1 in the rightbar.

Step 5:

Save your work!
Copy it back into the Blog, Template, Edit HTML text box.
Click the Preview button.
If it looks good, hit the SAVE TEMPLATE button.