Thursday, September 27, 2007

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

29 comments:

Prince Gomolvilas said...

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! :)

Eric Devlin 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

Chuck 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.

Chuck 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!!

Chuck 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 !!

Chuck 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 )

Chuck 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.

elims Chuang 光宏 said...

You're very very helpful person!

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

Chuck 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?

Chuck 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.

CITY BEAUTY GUIDE said...

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?

Chuck 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!

Marina said...

thanx a lot!! it's really2 helpfull...

tracylrivera said...

OMGOSH! Thanks a ton for your help. :) It was so simple and easy. Your so helpful and the best!

The Good Report 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?

Chuck 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

Chuck 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.

NYCSh0paholic 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.