September 1, 2006

3-column templates for new Blogger

[UPDATE: I have released some 3-column templates with many of my other hacks built-in. Try them too.]

[Translations by other bloggers: Spanish, Malaysian]

I got a specific request from a blogger asking whether 3-column templates are possible with Blogger Beta. If you have a lot of items in your sidebar, you would naturally want 3 columns like him so that you can balance your items across 2 sidebars. I found that it is in fact easier to convert Beta templates to 3 columns than older templates. This is because the condensed form of template shown by Beta is easier to work with. In addition, once you add another sidebar, you can move page elements between the two sidebars easily using the Layout editor.

If you need a 3-column template for a new blog or just want to try 3-columns with a test blog, you can right-click, save one of these templates and upload it to Blogger. If you want to use these with your active blog, please note that it doesn't have all your widgets. So, you will have to add them again.

3-column Minima
3-column Denim
3-column Dotsdark

If you already have a functional Beta blog with some other template, here are the steps that you could use to convert your template to 3-columns.

Disclaimer 1: I am assuming that you have already played with CSS a bit.
Disclaimer 2: You may need to do additional adjustments in CSS like adjusting width, margin etc if one of the sidebars is pushed downwards. This instruction is just to highlight the general method of converting to 3-columns. As I don't have much free time nowadays, I may not be able to help you there.

1. Beta template has 3 CSS wrapper definitions as follows:
#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar.

Now, to insert a new column, we need to define a new wrapper, say #newsidebar-wrapper. Find the definition of #sidebar-wrapper, copy/paste and rename it to create this new wrapper.

2. These wrappers might have different widths depending on your template. We need to fix the widths of these 4 wrappers so that they appear as expected. I suggest setting the width of outer-wrapper as 750px, main-wrapper as 400px and each sidebar-wrapper as 150px (750 > 400+150+150).

3. We should also set the float property of these wrappers appropriately. i.e. if sidebar-wrapper was set as float:right, we should set the newsidebar-wrapper as float:left and vice versa (unless you want both of them on one side). Also, setting the left or right margin of main-wrapper ensures there's space between the new sidebar and the main column.

Summarizing, here is an example of settings:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}

In the definitions above, ... refers to all other properties within the wrapper.

4. Now that our CSS is ready, let's get to the changes needed in the body of the template. Find the div sections with main-wrapper and sidebar-wrapper and add the code in red either above or below the main-wrapper (i.e. if sidebar-wrapper is below, newsidebar-wrapper goes above and vice versa).


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

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' 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:section>

If you now goto Template->Page Elements, you will see two sidebars. You could move elements between them and add new elements too. Have fun :)

[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog - bvibes.com.
2. AJAX-driven fast template - Neo]

152 comments:

Vivek Sanghi said...

This is gr8 man! You developed the hack within hours or my requesting it. You blog looks gr8 with 3 columns. Nice work!

Ramani said...

Thanks Vivek.

Vivek Sanghi said...

hey man. the right side side bar does not have a back ground matching the left side bar and also padding issues. We can have this piece of code unde the padding code for left side bar:

#newsidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:30px 5px 10px;
width:180px;
width/* */:/**/180px;
width: /**/180px;
}

width etc modified by me. So code will be like this:

#newsidebar-wrapper {
width:180px;
float:right;
font-size:85%;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:30px 10px 5px;
width:180px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:30px 5px 10px;
width:180px;
width/* */:/**/180px;
width: /**/180px;
}

Your suggestions. Any way thanks once again for such a wonderful hack

Anonymous said...

This is great.

Is it possible to create a 3 column setup but with both sidebars on the right hand side?

Here is an example of what I would like to replicate.

3 Column Blog

Is this possible with the new beta?

Ririan said...

it looks great, going to try it.. keep up the good work! and thanks for sharing :)

Ramani said...

Darkufo, Yes it is possible to keep both sidebars on the same side. Just keep both the sidebar codes either above or below main-wrapper to get them displayed on the left or right respectively. You also need to set both the float properties to right or left. I actually liked it better to keep both sidebars on the right.

Ririan, try it and give your feedback.

Ririan said...

ramani can you please try 3-column on rounders template, i'm having a hard time.. thanks

Anonymous said...

Hi Ramani,

Thanks for this great hack. I did as you instructed:
If you just want to try 3-columns with a test blog, you can right-click and save one of these templates and upload it to Blogger.

But when I was uploading it from the save file in my computer, I got this warning:

Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost.
HTML5
HTML4
HTML1
HTML2
HTML3
Label1

I confirmed, and my beta blog is now 3 column, as I don't have much customization yet. However, is it safe to confirm, and what will be the effect?

Darnell Clayton said...

Dude! YOU ROCK!!!!!!!!!

I was looking for something like this in the new Blogger Beta!

Thanks a bunch!

And keep us informed with any new updates.

A very happy blogger,

~Darnell

Shelly said...

You are a genius! I've upgraded most of my blogs so far, but I've been reluctant to do so with my book blog because it has a 3-column template I got from a free template site and I wanted to keep 3 columns on it.

And now I can. Lots of customizing ahead, but I can do it. Thanks so much.

Just sign me one happy blogger.

Ramani said...

Ririan, will try it soon.

Anonymous, Blogger asks you to confirm if the template that you are uploading doesn't have some of the widgets that you already added using layout editor. if it is just a test blog, its ok. DON'T use my predefined templates with your active blog, because it doesn't have any of your widgets.

Ramani said...

Darnell, Shelly, I am glad you like it. and thank you for your praises.

milo317 said...

hi ramani, it should be possible to implement a little sideblog in a second sidebar / space...?

Steve Sherlock said...

Nicely done... I plan to do some playing with these. I have been using Thur's 3-column template with success on the old blogger and was curious to see what Blogger would do, if anything with 3-columns in the upgrade.

Ramani said...

milo, what do you mean by sideblog?

steve, go ahead and try it.

|3run0 said...

hehe, just a week or two ago I didn't know what CSS was, and yet I spent two sleepless nights figuring out how to turn my blog into a 3-column-er. All of which I could have done in minutes had I knew of your blog ;-).

Well, at least I did learn what CSS was...

|3run0 said...

I actually forgot I had something of substance to say in addition to my semi-amusing anecdote above ;-)

After I changed to 3 columns, the Template WYSIWYG editor (surprisngly) was still somewhat functional. The new sidebar elements did appear, but it was almost entirely covered by a grey band. It was not always possible to click on it.

I managed to get around this problem by a simple template fix. i don't know how unique to the template I use ('Harbor') it is, and recall I did this mostly by guessing and trial and error, knowing little of HTML or CSS. But in the hope someone might find this useful, here is a short description of what I did:

In the template there is a section called:

/** Page structure tweaks for layout editor wireframe */

Which apparently tells blogger how to build the WYSIWYG thing. It consists of list of the main elements of the template, with this format:

body#layout[element name]

The ones meant to be 'clickable' are followed by a short list of properties, e.g.

body#layout #sidebar-wrapper {
width: 80px;
margin-left: 0;
}

What I did then was to simply add the two new elements (the new sidebar and the new sidebar wraper to the list). So I added:

body#layout #newsidebar,

and

body#layout #newsidebar-wrapper {
width: 80px;
margin-right: 0;
}

And now the Edit Template is fully functional.

I hope this helps.

Thysz said...

I love it!!! I used it and now my blog is unique in a subtle way... thanks a lot!!!

milo said...

hi ramani, a little widget like it's used at wp blogs, also called asides,
http://katesgasis.com/2005/10/24/sideblog/
simply display a post in sidebar by category, tried it but it won't show up here
http://milo317-the-second-arrival.blogspot.com/index.html

phoenix said...

i am using http://www.anniyalogam.com/templates/dotsdark3col.xml
on http://big-bite.blogspot.com/index.html

It works well on FireFox but left column does not align when using Internet Explorer.

SQT said...

Arggg, I'm doing something wrong. I have the minima lefty template and I cannot get the three column code to work. Anyone have any ideas on what I am doing wrong? I've tried it a dozen different ways and no luck.

daily beard said...

Thank you very much, vivek. I used your template and with some minor modifications...made a pretty fun set of blogs. :)


Best!

SQT said...

I finally got the 3 column template to work. Thank You! I'm so much happier with my blog.

Ramani said...

SQT, i'm glad you got it working. It's hard to help with 3-column changes without actually having the template with me, because it involves CSS which is different for different templates.

SQT said...

Ramani

I ended up switching to the "script" template just to make it easier, and actually it's nicer looking than what I had before. So I'm very happy with it. Thanks again for the help.

SQT said...

Oh, btw I put a link to your site on mine. I know a lot of people would like to be able to do the 3 column template. I don't have much traffic yet. But who knows, maybe I'll eventually be able to send some your way.

Ramani said...

Thanks SQT.

Peter said...

Hi Ramani,

Thanks for the 3 column template. I have implemented it and it is very nice. Just one thing. How do I expand the border around the Header?

Morfo said...

Whoaaa!!!

it's great!.

i apply this hack in
http://retrocesodemocratico.blogspot.com
but whith this changes:

#main-wrapper {
width: 60%;
...
}

#sidebar-wrapper {
width: 20%;
...
}
#newsidebar-wrapper {
width: 20%;
...
}


tnks for sharing

He-soose Seamonkey said...

THANK YOU for talking to me like i'm a moron -- because i actually am a moron at this stuff!

and i've had such a hard time finding these kind of tutorials geared toward someone still trying to get a foundational understanding of template coding.

thanks for being very clear and thorough.

Ramani said...

He-soose Seamonkey,

I'm glad my instructions are clear. I invest quite some time to do so.

Travelling Mom said...

Hi! Could you please tell me how to make more space between the newsidebar (the left one) and the main wrapper?

My blog; http://fast-city.blogspot.com/

Thank you!

Ramani said...

Travelling mom,

you could try adjusting this line by increasing to as much pixels (px) you want.

margin-left: 20px;

Travelling Mom said...

It worked! You rock! ;-)

Caroline Natasha said...

Just implemented this and it's great! Worked first time, no problems at all.

My blog's stuffed full of things so splitting the sidebars was the way to go.

Great instructions. Love it.

Manang said...

You are a genius and I love your blog for your tips. I am a new beta user, and reluctant to change from old blogger due to lack of resources for manipulating the templates (dummy in HTML/Javascript/CSS here). Thanks a lot!

Ramani said...

Manang, thanks. If you are new to my blog, wait for my new templates with built-in hacks.

LOUI$$ said...

hi bro,this all is fantastic!!here i have a question,how to do the sidebar like you??you have below your sidebar you seperate to two.how did you do??May you share with us??

Ramani said...

Loui, you mean you want 3 sidebars like me with one wider than the others? you have to create this sidebar with double the width.

Girard Philip E. Bonotan said...

thanks man. great tips on converting to 3-columns and the one on latest posts. i've subscribed to your blog already for future updates.

keep it up! :)

PatNAli said...

Thank you, thank you, thank you. I used Thur's 3 column minima black on the old version and I've been searching for three column on beta. I've tweaked it a bit to expand the columns, etc (doesn't look that great when choosing "edit layout" - have to scroll right), but the WYSIWYG looks great from Firefox. Keep up the great work!

LOUI$$ said...

yes bro,how did you do it??

♥angelinnocent♥ said...

Ahh...*sooo pleased* Just spent the better part of a half hour tinkering around my template to get the 3-column just the way I wanted it and have achieved satisfaction! Thank you Ramani! Hehe blog-hacking is fast becoming one of my favourite ways to while away the time it seems...

Looking forward to more masterpieces from you and the crew!;D

Ramani said...

angelinnocent,

the crew is happy to help you. yes, blog hacking is fun too.

j. noronha said...

I didn't read your 3 column hack before on purpose, since I wanted to try my own way before. I took the minima strech and added a 2nd side bar, keeping everything in percentages. It can be seen in any resolution and works both in IE and Firefox. I would like your feed back if you please: http://blogging-beta-testblog1.blogspot.com/

thanks in advance

LOUI$$ said...

Loui, you mean you want 3 sidebars like me with one wider than the others? you have to create this sidebar with double the width.

hi,louiss here,i wonder how did you do that,i m interesting on this hack,may you share with me?

Giridhar B said...

Hi
Your blog is very informative and i am trying modify my blog to a 3 column but i am failing.
I have also changed the template to scribe but still no go
Plz help

Ramani said...

Giridhar, can you tell me where exactly you are failiing? without much details, its difficult to understand.

Giridhar B said...

Hi

I have changed it to 3 column after trying several times but the back groud color is not matching with the rest of two columns.
I need to do some changes there
can you help.
You can also have a look at my blogspot http://trainyourmind.blogspot.com

Giridhar B said...

Hi,

I am able to get the 3 column but the color of the new column is not matching the rest of the columns. I have tried changing the back ground but no go.
I am not sure where to change the back ground.
You can check the exact problem by checking my site http://trainyourmind.blogspot.com

Ben and Emily said...

hi, ive tried loading it up but it doesn't like working. ive done what you've said on your webpage for the 3 columns but it either goes above or below the blog and not on the left hand side when i add it in! please help, my url is eabtravels.blogspot.com thanks

Ramani said...

giridhar,
ben and emily,

pls read my disclaimer at the bottom of this post. since this hack involves changing CSS, you may have to do additional changes for your template. unfortunately, I don't have time to look at your cases now.

Giridhar B said...

Hi

I have done it dude.I played with the codes and got it working.
Feel happy about it.
Would like to thank you for that

Ergin said...

Hi Ramani,

Good job. I had some beta-blogs with rounders template and it was problematic. After reading your blog, I got the idea. I kinda did it, except the layout editor is kind of messy. Right sidebars are not visible in the editor. I had a screenshot of the editor in my experiment blog (http://double-blog.blogspot.com/). When I am done with the modifications, I'll let you know. Thanks again.

danny said...

When somebody is successful with the rounders template please tell me.

Thanks

Ramani said...

Danny, which rounders template are you interested in?

Ashok Kumar Burra said...

thanks for your helping information

danny said...

The green one. The same with Ergin above me. It's a little difficult specially if you have many content already.

Thanks for the fast reply :)

"The Chilling Effect" said...

You are so damn good!
I am a newbie at html and blogging. But I have an important subject and issue to address.
I need help. I have looked everywhere.
And then I found you!
-- I am trying to close up the line spacing in my text.
-- I wish to make the description text smaller on the right sidebar.
-- And I am trying to add a 'link' column for the 2 starter links at the bottom of my blog. (I wish to add you too)
-- I wish to widen the right sidebar so the word 'seconds' appears.
-- I will be adding damning video's shortly.

Any help you or anyone, may provide...would be blessedly appreciated.

Herman

vï†æ said...

i aM sO iMpreSsed!!! i gOt sO frusTrated ediTing mY bLoggEr to a tHree-coLumn laY-ouT wiTh tHose oTher iNstRuctiOns... bUt yOurs is aMazing!!! i aLmost feLt liKe a prO, DamN! i so lovE yOu now hahah!

Ramani said...

Thank you Colorblind. There are some more nice hacks here. Try them too. Btw, your english is nEw to me :)

Kameelah said...

i need help! i tried for a while but cannot create space between the two new columns so it looks merged and aesthetically displeasing. how can i create that margin. i adjusted all the margins but with no success.

Nym said...

hi !
thanks for this hack (and the others as well).
I read your comment about keeping both sidebars on the right. It's what i'm trying to do on my test blog. I put the css code for both wrappers below the css code for main wrapper. and both "float" attributes are "right". But both sidebars are one above an other on the right side and not side by side.
Do you know what thing i forgot ?

Ramani said...

Kameelah, Nym, I am sorry I don't have any other hints to help you other than what I have in my post. You just have try adjusting the margin-left, margin-right (for Kameelah) or width of the wrappers (for Nym)

Alice said...

Hi. I have three column beta Blogger layouts on my site, ready to go, with multiple customization options built in (colors and fonts). Fixed or expanded width. Guaranteed to work. No built in hacks, but you can always add some.

http://cmbs.cnc.net/blogtemplates/

(Ramani- sorry if you don't want my link on your blog, just delete this comment)

Ramani said...

Alice, for the benefit of my readers, I have published your comment. If you are ok, just link to my blog in your website.

True Life said...

can you help me change my layout which is based on the Thisaway Green template to a 3-column layout?
that layout is really hard, because of its graphic heaviness

Witty CASLA said...

Gracias... thank you...

The Teacher said...

Awesome!!!
I have been finding this hack, trying it myself, but somewhere I was always stuck. Now it finally worked and I tweaked it for Minima Lefty Strech.

Thanks a lot Ramani!!!

Skanky Jane said...

Hackosphere.... I love you!

I tried to put my own third column in (following your directions) but I wasn't clever enough. I tried to add one of Thur's Blogger clone three column templates but couldn't because it was saved as a text doc (thanks for saving yours as HXML!)

Anyway it works and finally I have three columns for my brand new Beta Blogger Blog!

I am so happy! Thank you!

SJ xxxxxxxxxxxxxxxxxxxxxxx

carie_elena said...

Excellent hack. Thanks so much! I was struggling for a long time. No matter what changes I made in widths and margins, the column was stacking at the bottom. I eventually ended up putting the new sidebar code under the other sidebar code, diff. from your suggestion, and it finally worked. I don't know if this is coincidence, or if this is what worked for my template. I'm using Minima stretch.Also, size is given in %, not px, so anyway having width issues, stacking issues, remember to add up your percentages to stay within outer-wrapper size. Haven't had any problems with background color, etc. Thanks again! This is all new to me...don't know what I would done without your tutorial! :)

racing81 said...

thanks a lot for your templates!!

I've used one of them on my blog and it's looks great!

ipod-guy said...

Thanks hackosphere! :)

this is a great hack for blogger beta..

ipod-guy
regards

Chiapas, Mexico

May Leng said...

Excellent work with the hack. Love your 3 column. Applied it on my own blog. Thanks alot !

Just Me,
May Leng
http://doink-justme.blogspot.com

Athol Kay said...

<3 you.

thanks so much

Ben C. said...

Ramani,

Thanks for the 3 column format of Minima and the hacks you've developed for Blogger Beta!

I've noticed I can't intuitively get to do some of the things I've done with the links section of my blog:

1. Is there a way to have blog lists within a major group i.e. see 'New York City' under 'Birding Blogs'.

2. Is there a way to have a bulleted list of links under a link i.e. see the items under 'NYC Bird Report'.

3. Is there a way to have 2 links on 1 line i.e. see 'Televue' with 'TV-76 Refractor' on the same line.

4. How do you add things like the 'Birding Top 500 Ranking' image with link?. I can't see how to add an image with a link associated with it i.e. click image and go to this URL.

As you can see I can do all of these in HTML but I didn't see a place in the *template* to make changes like these. I like the idea of Blogger Beta especially 3 column format, labels etc.

Thanks again for the solutions you've provided for the blogging community.

Ramani said...

Ben,

As you seem to know how to do these with HTML, you could goto Template->Page elements, click on Add a page element and choose HTML/Javascript page element. You could add any HTML code there.

indian information service said...

hi
i have a 3 column blog now thanks to your hack. i have a long list in which sorting is allowed by blogger beta, but if i want to reverse the order, ie the new names in the list should go to bottom and the oldest entry should remain on top. can i do that?

manoj

Peter said...

To Ramani or anyone else who successfully changed his template to Ramani's 3 column template.

I downloaded the template by right-clicking on the link and saved to my computer saving as XML file. I then go to EDIT HTML, deleted the previous template, browse and selected the XML file, click upload, and got the error message:
"We're sorry, but we were unable to complete your request."

I have succeeded before, but now I don't know why I can't change to Ramani's template. Anyone can offer any help or suggestion?

Shawn C. said...

This hack is so sweet! Awesome work and Thanks!

abhishek said...

With inspiration from you - check it out at http://atmaav.blogspot.com

Ramani said...

Abhishek, your blog looks unique with posts in sidebar also!

Benedict White said...

Many thanks for your most excelent template which has allowed me to do this:

http://aconservatives.blogspot.com/

Thanks again.

delang said...

hi ramani, i've little problem here on delang-d.blogspot.com blog. when i preview with 800x600 resulution, my blog doesnt look like it suppose to be(at 1024x768 resolution). one of my friend complain to me.

ioisa said...

hi there,

I could not believe when I found the 3 columns black dot blogger hack. so I cliccked on your link to the code, and... nothing :-(
no page to be seen... is the the code still available? (please say yes)

Love

io isa
www.ioisabellablog.blogspot.com

Ramani said...

Ioisa, I think you did a left-click. As I mentioned in the post, right-click and save the file before you upload.

Manjula said...

Thanks a lot! I just made my blog into 3 columns and was quick!

lndsymaria said...

Thank you for the 3-column template, I was able to make it work except for the 'BULLETS' on the left side. How do I get rid of these?
Thank you in advance.

kelana61 said...

hi.....
thanks for the hacks......
i'm currrently using it in my blog (http://just4kelana.blogspot.com)

if everything going well i want to use it in my other blogs too (http://jurnalkelana.blogspot.com and http://kelana61.blogspot.com)


:)

John Figth said...

Hi Ramani,

This proposition of 3 columns for the Rounder template hereunder could help you out - I've just adapted what you've previously done (nothing invented) - it seemed some of your readership wanted a few more info re this specific template (and as I needed it for myself...).
On the point (5) I just added *//* on purpose between < & div , cose this comment script does not accept enhanced HTML.

Best,
John


This Rounder template is a bit different from the other templates.
So I tried out to find a solution. Took me a few hours (am not a coder), and finally I believe I managed a solution (not THE solution though, cose presenting some trade-offs).
You can view it at http://nordsudestouest.blogspot.com/
which is more a "test blog"

so how did I do ?
1. Rounder is made up of fixed images

/* The images which help create rounded corners depend on the
following widths and measurements. If you want to change
these measurements, the images will also need to change.
*/


It implies you should not change the size of the main wrap. Re the other ones, the only thing you might lose is the rounded corner (a trade-off).

2.You look for the following and change the bolded information (numbers up to you) in /* Page Structure

#outer-wrapper {
width:890px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

(...)

#sidebar-wrap {
width: 200px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

you add (still in the /* Page Structure chapter)

#newsidebar-wrap {
width:185px;
float:left;
margin:12px 0 15px;
font-size:97%;
line-height:1.5em;
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 */
}

3. didge fixed images that could harm the vision of your presentation

Go to /* Blog Header and take off all the"url("http://www.blogblog.com/rounders2/corners_cap_bot.gif")" (watch out the space - no space after : )

Go to /* Footer
same process, take off the 1st 2 URL

4. there could be a /* newsidebar box chapter I believe, but did not tried this possibility out (even if why not) - from a graphic design point of view, could be nice...

5. now back to html, you look for (take off *//* from the code)

<*//*div id='main-wrap1'><*//*div id='main-wrap2'>
<*//*b:section class='main' id='main' showaddelement='no'>
<*//*b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
<*//*/b:section>
<*//*/div><*//*/div>

Before this block of code, you put this

<*//*div id='newsidebar-wrap'>
<*//*b:section class='sidebar' id='newsidebar' preferred='yes'>
<*//*b:widget id='LinkList3' locked='false' title='Liens' type='LinkList'/>
<*//*b:widget id='Text3' locked='false' title='' type='Text'/>
<*//*/b:section>
<*//*/div>

And normally, it should turn like the example address. This is still a test - am not a professional coder, so am waiting a bit b4 putting it on my main blog... any constructive reaction welcome.

YannyRamz .- said...

I'll have to add up too...I just recently switched to beta, and this is how i had my blog before i did the switch. Thanks or the hack, it was actually easier than i thought. The first time i saw beta, i went crazy ( as i had some xml in school), i didn't know all of this could be done with it.
Thanks again

Sabrina said...

Sorry to bother you but I need help. I'm using one of your 3 column templates in Blogger beta and it's great. The only problem is every time I post to my blog these "edit me" type icons pop up under each of my page elements in my sidebars. I got rid of them once, but they won't go away now. I don't know what to do, I'm somewhat HTML illiterate. I'd appreciate any input. Thanks so much!

Ramani said...

Sabrina, these edit icons are a feature of Beta and show up when you are logged into Beta. It's actually a useful feature. Don't you think so?

Sabrina said...

OK, I get it now. I thought everyone was seeing them on my blog. That is handy. Thanks for the help, and the template.

gresco said...

I navigated to the page you linked with 3-Column Minima Black but it did not load. None of the 3s did.

Gregg

Ramani said...

Gregg, Did you right-click and save the template first? Left-clicking will not show the code. Btw, I only have 3-col Minima not Minima Black.

lndsymaria said...

This question got lost in the shuffle:

Thank you for the 3-column template, I was able to make it work except for the 'BULLETS' on the left side. How do I get rid of these?

Thank you in advance.

Craftybernie said...

Thanks for sharing the 3 col beta templates. I'm one very happy little lady!!!

Thank you thank you thank you!!!

Jay Lagat said...

thanks for the cool template. for one hour, I learned a little bit of HTML editing! Gracious thanks!!!

Matt Elmore said...

Ramani, this is a great template!

I'm new to this CSS business and have had a lot of frustration trying to get 3 columns, but you've made it easy. Thanks.

I have a question about changing the colors and background. Basically: How do I do it?

I have a test blog in classic html which gives a general idea of what I want:

http://lessthancivil.blogspot.com

And here is the Neo template which I want to modify by changing its background and colors to match the above:

http://intimations3.blogspot.com

Any suggestions would be greatly appreciated.

Ramani said...

Matt,

You can change colors by going to Template/Fonts and colors.

~yolanda said...

Worked perfectly. Thanks!

jillmarie7276 said...

Thank you for this 3-column fix...I had tried other with frustration - this one was easy!!

ptman said...

THANK YOU SO MUCH!! I have a question: How do you expand the widgets in the new side bar. I only have two widgets. the "about me" and one more "page element". I would like to add others. What exactly to I copy and paste?

Ramani said...

Just click on "Add a page element" and choose from the different types of elements available. You can add as many page elements you want.

Indie-Waves said...

First things first, thank you for all your work,

and now, here's my problem: I cant get the sidebar's to go right and left, they both stick on one side and dont split, i really dont know how to explain this better.

Here is a test blog
http://7-maravilhas.blogspot.com/
And the final blog, were I want this.
http://indie-waves.blogspot.com/

If you could pull this off, your the man.


#main {
float: left;
padding: 0 10px 20px 30px;
margin: 20px 0 0;
width: 450px;
//border-right: 1px inset #fff;
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 {
padding: 20px 30px 20px 0px;
float:right;
width: 210px;
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 */
font: normal normal 100% 'Trebuchet MS','Lucida Grande';
}

#newsidebar {
padding: 20px 30px 20px 0px;
float:left;
width: 160px;
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 */
font: normal normal 100% 'Trebuchet MS','Lucida Grande';
}

Ramani said...

Indiewaves,

I had asked to change the settings for sidebar-wrapper and newsidebar-wrapper (not sidebar and newsidebar). Can you try that?

Rhysickle said...

Happiness is a 3-column blogger template. Thank you.

Nandita said...

Thanks Ramani, Very simple instructions with logical explanation, even a non-tech person like me could do it in 15 minutes. Want to know how I can draw borders between the sidebars and main column, dotted borders to separate content.
Http://saffrontrail.blogspot.com

Shall I check this comment section for your advice? Thanks a ton for simlifying lives of non techie bloggers...

Vinay said...

hi ramani,

i was trying to implement your 3-column denim template but blogger gives me error.


We're sorry, but we were unable to complete your request.

When reporting this error to Blogger Support or on the Blogger Help Group, please:

* Describe what you were doing when you got this error.
* Provide the following error code and additional information.

bX-6yhizm
Additional information
blogID: 6747395440486624860
uri: /html
host: www2.blogger.com

This information will help us to track down your specific problem and fix it! We apologize for the inconvenience.

Whats wrong?

Ramani said...

Nandita,

I haven't tried that myself. you may have to add a div tag and add CSS property for dotted-line border.

Vinay,

This error means that you did something with template that Blogger doesn't like. Do your changes step by step and see which line causes this problem.

Godmode said...

Ramani,

this is vinay (sorry i was logged in with this ID). It happened when i was trying to update your template. It basically asked for "Confirmation to delete/add Widgets" and when i click yes. Its gives that error. I have seen it happening to me multiple times earlier.

I guess it happens when you are trying to install too many widgets. It's a bug?

Please help. I want this template desperately.

Ramani said...

Vinay,

yeah, it shows that error if you try to remove a lot of widgets at one. I didn't know that it does this for adding too. But what widgets are you trying to add? aren't you trying to make it 3-columns only?

Marketingeyes said...

I applied your Denim templates to my blogger. I really like it. thanks a lot. It was so easy because of your easy explanation, even thought I don't know much about HTML or CSS. thanks again.

Carrying Contraption: It's Not A Purse! said...

Thanks whoever wrote this! I can add google adsense to the left sidebar now! weee!

Genevieve said...

These directions actually look like something I could muck my way through. Thanks for posting them!

The Man of Silver said...

Thanks a heap! I'm no programmer, and you made it easy for me to customize my blog at http://themanofsilver.blogspot.com.

Cheers!!

de_kerinchi said...

TQ for your guide my blog now looking great....

Ajay M said...

Hi Ramani...I noticed a strange thing in your permalink for this post...it is showing 3006 in stead of 2006.....here is the permalink:

http://hackosphere.blogspot.com/3006/09/3-column-templates-for-blogger-beta_01.html

can u check this out.

Ramani said...

Ajay,

I was experimenting with the date change feature of Blogger at that time. As permalinks don't change in the new Blogger, it has stuck as 3006.

Istilo Pinoy said...

Nice work. My site is now on 3-Column Dotsdark template. http://istilopinoy.blogspot.com. Thank you for all your hardwork. All the best!

Eve Nielsen said...

Thanks for all the great hack and keep up the great work!

Smriti Yamini said...

Thanks for writing instructions to this wonderful feature! I'm new to blogging and used to keep wondering that when all templates are 2-columns how come everybody has 3 columns: there should be an easy way out!

Carolyn said...

OMG!! This was SO incredibly easy, thank you SOOO much for this little tutorial.

Laurie Joyce said...

thanks for the hints. I much prefer the 3 column style.
Cheers
Laurie

Handoko said...

Ramani,

Thanks for your tips.
Right now, I use 3 column Sun Flower Template.

1. How to add a nice horizontal Tab Label on the top, right after the Header?

2. How to change the picture on the header?

Can u help me?

Thanks
Handoko

Elite@Villian said...

Just wanted to say thx for the good work u shared with us....3 columns is what i need for my blog, thx!

beniamin η δωδέκατη said...

amazing!!!thanks!!
but u didn't say anything about spacing between columns,so I find it at urs code ;)

"margin-left: 10px;"

Truly Golden said...

I got the 3 columns but the page elements are at the bottom on the right and will not allow me to move them to the top of the page.

tvandsatmonkey said...

Hi - Can you republish 3runo's Harbour template hack for the 3 column template? I can't get the comment link to work... :)

Andy said...

Hey what's up?

I was just wondering, how can I get the 3 columns to have the same width?

Because after adding the 3 columns they overlapped and the 2 sidebar ones are too small. Also, the last sidebar sometimes goes to the bottom of the page, any suggestions?

Savvyology said...

Thanks for the tips. I tweaked and played with the widths and margins a bit and it now works like a charm.

annai said...

thank u will be useful to my blog www.tamilqueens.blogspot.com

june said...

Thank a lot!!
It makes my blog looks much better ^^

Silkenhut said...

Hi there, thanks for the tutorial but I still have one problem, my margins are wrong... I dont know where exactly to put the code so that my margins can be adjusted... Can you tell me the code for the margins of the columns? thanks.

btw the resolution is 1200 X 800 so it will look different in other browsers I'm sure.

Arab Democracy said...

Dear Ramani
i am having a problem with IE to show the 3 column template, it shows just half of the blog and one sidebar only, any ideas?

Thanks

Peter Chen said...

Hi Ramani,

I can't download your 3 column Minima template. When I click on "Download" I get the message "Permission denied" or something like that. How can I get the template?

Thanks.

Ramani said...

Peter,

This was a side effect of the hosting problem. I fixed the links just now.

Coiledice said...

thanks for your 2 column template.

Zapallo said...

Beatiful
I finally switched to blogger beta.
Thanks a lot

El hombre del jardin said...

This is great I will implement this template as soon I can.

Check how look like at
cocotica.blogspot.com

iEn said...

hai ramani i try it.. and it's working.. already translate for my reference.. thanks :D

Peter Chen said...

Hi Ramani,

Are you a Malaysian? If so, Malaysia has lost a great talent.

Thanks for the templates. I have used them and also made post about them with link to this post. However, I tried clicking on the 3 links to download the templates. All led to 404 (Page not found). I remembered you saying something about problems with your webhost. If you have not done anything about it, I will have to modify my post and ask my readers to get the templates directly from me.

Peter (Blog*Star)
Blogger Tips and Tricks

Ramani said...

Peter,

You are right. The links were broken. I fixed them.

And I am not Malaysian. I am originally from India :)

Jamie Boyle said...

Thanks for sharing this info, I was getting so frustrated not knowing how to do 3 columns. Thanks for your help.

shiidenu said...

Hi Ramani,
I manage to transform my 2 column blog to 3 column now. Thanks for the info.

s o t y a said...

Hi, translated your 3-columns blogger layout hack in Indonesian at www.onebizymama.com. It does work nicely on my blog: http://the-beauty-files.blogspot.com

Brix said...

Your tutorial are very effective. my template are already 3 column.... It makes my blog look much better

Lee Chien said...

this is really informative and clear enough.. i already added another side bar to my blog.. thanks alot for your tutorials!!

INDIANA JOSH said...

I tried implementing the 3-column layout, and now my entire layout it screwed up and unaligned! It was fine with the 2 columns. Can anybody check it out and tell me why? the blog is blog.indianajosh.com (not advertising, just trying to get help!). thanks!

Mr. MoneyCracy said...

Simply Thank you!! that the most easy explaination i got from the whole web,, and believe me i tried hard!!
Thanks a lot man!!

DEBORAH KATY said...

Hi there,
i wanted to know why there is a space between the main wrapper and the side bar while there is no space between the new side bar and main wrapper. I wanted to put space on both or have both with no space to the main wrapper.
regards.