Skip to main content

Making A 3 Column Template

Since New Blogger, and the Pick New Template wizard, was launched, many bloggers have been wishing for a 3 column template. So far, Blogger hasn't provided us with one. There are several web sites that offer templates, and some 3 column templates, but using a third party template isn't always a great solution.

Fortunately, making a 3 column template from a 2 column template isn't all that hard to do, assuming that your blog doesn't use fixed width components as Rounders, Scribe, Son Of Moto, Thisaway, and TicTac templates do. You can still make 3 column displays with those templates, but they won't look as good.

A 2 column template has 2 columns, floating opposite each other.
  • Main, floating left.
  • Sidebar, floating right.

All that you have to do is split the Main column.
  • Main1, floating left.
    • Sidebar2, floating left.
    • Main2, floating right.
  • Sidebar1, floating right.


A 2 column lefty template is just a mirror.
  • Sidebar, floating left.
  • Main, floating right.

Again, split Main.
  • Sidebar1, floating left.
  • Main1, floating right.
    • Main2, floating left.
    • Sidebar2, floating right.


That's the concept. The execution is a bit tedious, but doable. But it really does work. Note that this exercise was conducted some time ago, and before the cross the board deployment of bi-directional templates, in support of blogs in Arabic and Hebrew.

This is probably as easy as importing a pre coded template. Note that this example uses a Minima template, in mint condition. If you've tweaked the Header code, or added main or sidebar objects, you'll deal with some variances. But you'll go through the same challenges if you import a pre designed template, and more.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

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

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


And a second, in the Body, almost at the very bottom ...

<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:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the custom widget code from your current template to your new template!

The first ...

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

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

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

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

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


And the second ...

<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


Save your changes.

Test.

And finally, backup the template, again!

Yes, it's that easy!

Now in this exercise, you took a standard 2 column template, and simply split the main column. What you have right now is probably a little crammed together. When you see that the 3 column layout works, you can try and widen the columns just a bit. And the simplicity of the coding aside, you'll likely find a challenge in getting the right column widths. That task might be easier by putting both sidebars immediately next to each other. Most standard Blogger templates, in mint condition, should be pretty similar, though templates that stretch will need a slightly different (and actually simpler) technique.

>> Top

Comments

After months of trying to add a third column to my blog and after trying everybody else's methods and failing miserably, I was going to give up because I was literally GOING CRAZY because I couldn't figure out how to do it. THEN, I stumbled upon your post, and IT WORKED. I am so grateful. Thank you, thank you, a million times thank you. I was so happy when it worked, I ALMOST CRIED! :)
Reilly Fox said…
Hi,

I am trying to add a third column to this blog:
http:/bbqsauces.blogspot.com

First off, I am NOT a computer person by any stretch of the imagination, so maybe I am missing something very basic. If so, feel free to let me know. Don't worry, I have thick skin.

I didn't see the text that needs to be replaced as you had listed it. Should I approximate?

I cut an pasted the text that needs to be inserted, but couldn't find the exact text that should be replaced.

Any help would be appreciated. Thank you,

Eric
Nitecruzr said…
Eric,

Your blog uses a (rather customised) version of the Sand Dollar template. SD is a stretch template, which is slightly different from Minima, which is what this article is based upon.

Give me a couple days, I will make a 3 column stretch template.
Nitecruzr said…
Eric,

Give this effort a go. It's similar in detail to the article above, but uses stretch widths, as does the Sand Dollar template. I'm not sure how that will fit with your customisations, so be very careful here!

Minimally, if you've added custom objects to the main and / or sidebar containers, you will have to _carefully_ copy them, manually, from their current Main / Sidebar locations, to be within Main2 / Sidebar2. Look at the BlogArchive1 and Profile1 widgets, as examples, in my code.

Please do not omit backing up the template, before and after!
Tolkienreader said…
Hi chuck! I would also like to ask for your help to make my blog a 3 column one. I would really appreciate your help. Thanks!!
Nitecruzr said…
Hey Tolkein,

I'll help you, but it will be easier done through Google Blogger Help - Customising Templates. Blogger Comments are terrible for interactive problem solving. Use GBH, please.
netsitebiz said…
I have changed my blog so now it looks like it has room on the left side for widgets. Now when I go to the customize page there is no "add page elements" for the left side, HELP !!
Nitecruzr said…
Hey Biz,

You may not have to add the new element directly in the new (left) column. See if you can add it where there is a link, then re position it.
Jean Vitrano said…
Wow! I've been playing around for days trying to get 3 columns. Thanks, now am going to look for a way to make the columns a bit bigger??
Thank you.
vertumnus said…
Hi Chuck, thanks a lot for the information. I want to ask something. Is there anyway to add a left-side bar to minima without splitting the main column? When we split the main column, there will be a thinner space for the posts that i don't want. Thanks for your help...(I'm planning to use it in our soccer team fans blog : http://demirgibiyiz.blogspot.com )
Nitecruzr said…
Vertumnus,

Splitting the main column doesn't take away horizontal space from the posts, it just makes the new sidebar float away from the posts.

If you add a new column, something has to become thinner. Either the original sidebar, or the posts, will have less room. Pick one.

Maybe try both sidebars next to each other, or try a 3 column stretch template.
d+s said…
I'm using a Minima template in blogger but when I go into the edit HTML and the "outer wrapper" area, it says my width is in % not px - what do I do? I really want a 3 column blog as well (URL is www.designnstyle.blogspot.com). Thx
Nitecruzr said…
DS,

You have a stretch template. Making a 3 column stretch template is easier.
Alipet813 said…
So, did I read correctly that if I use Scribe I can't create a 3rd column?
Nitecruzr said…
You can create a 3rd column in a Scribe template, if you wish. You may find it difficult to get a satisfactory looking result though. Try it, and see.
Your fix for adding a third column to my Minima template worked like a charm! Thank you for the great and very clear instruction. The post column aligned center where I wanted it and the right sidebar is all good. I am having trouble moving some of my "gadget" items (i.e. blogroll) to the left side but I'm going to keep searching to figure it out. Thanks again - you're my new favorite source of support!
Yanti said…
Yes, I did get the 3 column, but I still have white space on both the sides and the space between the main and the sidebar is too wide.
Could you help me how to fix this?
Nitecruzr said…
Yanti,

These are good questions for BHF: How Do I?. Peer support beats email discussions.
Yanti said…
Thanks very much. Now my blog looks okay.
http://diah-aryanti.blogspot.com/
Linda said…
Thanks a lot!

I have no experience of HTML-coding at all and am completely unknowing of the beautiful world of technology. But this was understandable and easy to do.

It was really simple. And it worked!
thanx a lot!! it's really2 helpfull...
Tracy said…
OMGOSH! Thanks a ton for your help. :) It was so simple and easy. Your so helpful and the best!
Leslie said…
Great help, but I have larger than normal photos posted on my blog and all kinds of crazy happens to the main body (cropping of photos) when I apply the code. Any tips?
Nitecruzr said…
Report,

Make the photos smaller, or make the columns wider. Or don't do a 3 column template.
J.G.Toll said…
Hi Chuck, Excellent post and thanks for your willingness to help! My attempt to make 3 columns ended with sidebars on both sides to the post although, I was able top move Sidebar2 from left to right. In addition I enlarged the outer-wrapper from 660 to 900. Now, my challenge is enlarging the post column (main2, I think)somewhere in the 600 range while having the two sidebars line up properly on the right.

After two hours of trying to make this work, I'm stumped and I found no one else on your posting with the same issue. Could you please suggest where I edit the code. Check out the draft blog, my problem is self-evident. http://logisticdev.blogspot.com/.

Thanks, Jason
Nitecruzr said…
Hi Jason,

Here's where I advise you to post in Blogger Help Forum: Something Is Broken, so we can review the nesting and float settings for each container. You have both the Main and Left Sidebar floating left, and it looks like they are both in one container together. Get peer support, please.
Unknown said…
WOW! This was so helpful for me. Boy was I lucky enough to find your blog on my first search for converting my 2-column to a 3-column. I followed your instructions just as indicated and worked like a charm! Of course, I also had to tweak the widths like you said, and after a couple trial and errors, got everything to fit perfectly! Thank you, thank you, thank you!!!!!!!!!!!!! Please come check out the final product : http://nycsh0paholic.blogspot.com/
It's all thanks to you! =)
MRV said…
thank u! works great.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".