Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 28, 2007

Digg This Story

Three Columns Dots Template

If your Blog is using a Dots or Dots Dark Template, you can consider adding another sidebar, making it a 3 column Dots Template. Because the dots in the background image are well-spaced, we thought it won't look nice having another column. However, after inserting the third column and making adjustments to several settings, we were pleased to see that a three column Dots or Dots Dark Template actually looks very chic and nice. Since a number of readers had requested for this, here is the how-to tutorial to modify your layout into a three column Dots layout. Note that this guide is for the standard Blogger templates. If you have customized your template or are using one that is already customized, compare what is written here with the template code that you have and make the adjustments accordingly.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Minima Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Dots and Dots Dark Templates

Except for one part, the steps for converting both templates are about the same. The new Three Column Dots Template will look like this:-

Three Columns Dots Template

Whereas the Three Columns Dots Dark Template will be this:-

Three Columns Dots Template

Before any modification, we must always remember to backup the template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Dots Template

This is for the Dots Template users. Those who have Dots Dark Templates can look at the next section. After we have a backup, we can scroll to these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Change or amend the above to the following code (note in particular the parts shown in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 */
}
#newsidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


We have left the sidebar hover styles unchanged. The same style will apply to the new sidebar.

Dots Dark Template

For Dots Dark Template users, you will see these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Change or amend the above to these (note the parts in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 */
}
#newsidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Both Dots and Dots Dark Templates

The following changes and modifications apply to BOTH the Dots and Dots Dark Templates.

Further down the template, we see the layout editor tweaks:-

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}


Change the above to this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}


Next, under the <body> section of the template, look for <div id='main-wrapper'> and change/insert the codes as follows:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

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


Now, Preview the Template. You should see the new sidebar on the right with your Profile. (If you have disabled sharing of your Profile, go to Edit Profile in the Dashboard and enable it temporarily.) If you are pleased with the new three column layout, click “Save Template”. Remove the Profile page element under Template -> Page Elements. Refresh the Blog. You have now a new Three Columns Dots Template or Three Columns Dots Dark Template!

Align Header Title and Description

The Header title and description are in the left sidebar by default. This is the way the template is designed. Since the space is narrow, there is little alignment that you need to do. The text will be aligned to the left.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

62 comments:

madamspud169 said...

I've done it I have 3 columns now. BUT both sidebars are now on the right. Is it possible to move the old sidebar to the left & leave the new one on the right?
OH so close yet so far lol

bizwhiz said...

Hi madamspud169

I had a quick glance and saw that there was a missing semi-colon here -

#main-wrapper {
margin-left:50px;

If it still doesn't give you the three columns as shown in our screenshot, you may want to double check that you have amended the code correctly. You can also block copy the code we wrote and paste it into your template rather than retype it.

madamspud169 said...

Hi,
I've checked it three times & cannot find a single omission. I even re did it & still no joy.
Is there anyway you can have a look and see where I've gone wrong like checking the template for me or something. I know it's a cheek but I'm totally stumped & upset lol

Gone Away said...

Hi. I came here from a blog that has done a review of yours - Blog Reads address: http://blogreads.wordpress.com/ .
Just thought you might like to know.

That last post of yours is a work of art - all those screenshots! Great work.

bizwhiz said...

Hi madamspud169

You will be pleased to know that your stylesheet is fine up to the point where you are to "change" the <div id='sidebar-wrapper'> to above the <div id='main-wrapper'> Do that and your main column will be in the center. To make it very clear, I shall color the words.

Also, there is a tulip picture at the top of the page. Inserting an image will change the alignment of the dots. The Dots template is designed without a Header at the top but at the side. So, I leave it to you whether you want it there.

madamspud169 said...

Scratch that last post I did it.
Thank you so much for that, I can't believe how obvious it was lol
Just wondering now how do I get rid of the header graphic?
I didn't add it one of my temp foster teens did & I have no idea what or where he did it.
Sorry to be a pain.

bizwhiz said...

Hi madamspud169

You can view Template -> Page Elements and see if there is a picture or link to a picture added at the header. If it is there, you can drag it to the footer instead.

madamspud169 said...

I found it luckily it was a page element that I hadn't noticed, that will teach me to look at things more carefully.

Thank you so much you've been more than kind. Trouble is I'm now addicted to this site cos it's understandable so I'm going to have a look at meta tags now lol

mekurukito said...

wow this is really cool!! i've been trying to move my page elements (dots template) from right to left but can't and now thanks to your tutorial, i now have elements on the left and right side, yay! :D

Tonino said...

After this post I officially love you.
I've been dying to set my blog to use 3 columns, but my CSS knowledge and lack of time didn't let me do it.

Thank you so much!

Maïmouna, Nini et les autres... said...

it's a dream-come-true! i wanted a three column template and thanks to you guys i made it! this is a cool site, and thanks to you i pimped my blog!

Keep up the good work!

Lisa G said...

Hi! I'm having the same problems as madamspud. My main posts are not centered. Any chance you can look at what I have wrong?

bizwhiz said...

Hi Lisa G

You have 2 blogs under your Profile and both are not in the Dots template. What is the Blog URL you want us to look at?

Safa said...

i just wanna say thank you. You are unbelievable thnakyou thank you thank you
healtheadline.blogspot.com

Lisa G said...

Bizwhiz,

The one I'm having trouble with is "blonde thoughts!" thanks so much!

bizwhiz said...

Hi Lisa G

The part where I wrote "Next, under the <body> section of the template, look for <div id='main-wrapper'> and change/insert the codes", did you put the segments in that order?

Lisa G said...

Hi! Right now they are not in that order, that is the problem I suspected. When I try to there is an error message about an "end tag". PS thanks so much for helping!

bizwhiz said...

Hi Lisa G

Move everything from <div> to </div> There can be a number of widgets in between. But when you shift, you shift the entire segment. We have colored them green, black and red. Compare that with your template.

James Chia said...

widgets would be deleted totally when i use this new template? any way of retaining them?

bizwhiz said...

Hi James Chia

In fact, this DIY method will preserve all your widgets and none will be deleted. If you follow the guide, you will be able to see the three columns when you preview the template. All the existing widgets will be in one sidebar. After you are satisfied with the layout and click Save Template, you can move the existing widgets to the new sidebar if you want.

Usually, if there is anything that doesn't look right, it is because users accidentally delete a portion of the template. It is therefore advisable that before you proceed with any alteration, back up the existing template.

James Chia said...

Hi, I managed to configure my website but there's a problem with the alignment. I want the gap between left sidebar and the main to be the same as the gap between the right sidebar and main. How should I correct it? Thanks!

My website @ http://singaporesundry.blogspot.com/

kaigachi said...

hey, thanks much. i've been waiting for this! :)

bizwhiz said...

Hi James Chia

I noticed that you did not follow our recommended settings but set your own widths, margins, changed the float:left to float:right, etc.

Adjusting the settings for this Dots template takes a while because the dots have a fixed space. The sidebars, header or main body should not 'cut' into the dots. There should therefore be a spacing of at least one background dot in between the sidebars and the main body.

Since you prefer your settings, you may have to make the adjustments at your end. Change the margin-left and margin-right setting and preview the template.

James Chia said...

ok. I'll try my best. Anyway thanks for the very clear instructions on the code editing. I'll feature your side in my page!

Irais said...

WOW It's terrific, I've ben trying to change the template to three columns for a long time...and your instructions were the only REALLY HELPFUL.

THX

puresunshine said...

I love ur blog. Have added many things from this. I was trying to use this template thing. It was fine till i reached the last bit. the div section. I located the main wrapper bit, now from where to where do i select and delete to add the three codes. im getting an error that says div code is not closed, some xml tag problem. Thanks

bizwhiz said...

Hi puresunshine

The <div id='sidebar-wrapper'> part (colored green) is currently below the <div id='main-wrapper'> Move the whole segment up from <div ... to /div>

puresunshine said...

Thanks. but then do we start removing from div id='main-wrapper' ?? Before this there is an outer wrapper and a content wrapper, so that remains?
And one more thing, the first /div tag appears afer b:section class='crosscol' id='crosscol' showaddelement='no'/--so, till here? Not a software person!!

bizwhiz said...

Yes, puresunshine. As per our guide. We colored the codes and all you need to do is to compare with your template and move them. As long as you preview the template and not save it, there should be no problem having a little trial and error at your end.

puresunshine said...

Thank u so much! After trying n tryin i finally finally managed! Thanks a LOT! I am at:
virtualcrossroads.blogspot.com

:)

PUTRA said...

Hi,
I really love your site, i've aplied the marque scrolling tax on my page, I am even sucessful to add my sitemap just in minutes because of following you instruction using the meta tag method. Thank you so much !. Now.. i really would like to change my page to a 3 column but i have a doubt about 2 points :
(1) The Meta Tag (site map purpose)
(2) The additional elemen between my header & the body post. Are they gonna be deleted ?. is there anyway to prevent this?...

Thanks alot.

bizwhiz said...

Hi Putra

This guide is on conversion of the Dots template to three columns. You are using the TicTac template and should not be using the guide in this article. We may come up with a three column guide for TicTac in due course.

When we convert an existing two column template to three columns, the meta tags and widgets remain intact and are not affected.

Anonymous said...

Thanks for providing this info - I used it to create three columns on my dots template and it worked :)

mekurukito said...

hi, i'm using the dots template. followed your guide and all, thought it looked great. however, i've just realized that it looks ok only on firefox, but not using IE. the blog content seems to be too near to the right column, there's no space between it. but when view using firefox, everything looks great. err..help please? hehe..thanks :)

bizwhiz said...

Hi mekurukito

It looks the same in our IE7. Maybe you want to ask your friends to look at your blog using their IE, and try to see if it is due to the difference in versions.

mekurukito said...

hmm..so u think it might be due to the version of IE? i'm currently using IE6. if it is indeed due to the version, is there anything i could do to the code layout or something? (without upgrading to IE7) just wondering.

bizwhiz said...

Have you asked others to look at it? Whether it is due to version or resolution, we do not have different systems to test it and what we see of your blog is neat. If this is not the case, you may want to switch back to the previous template that you have backed up.

libra said...

I have successfully converted to the three columns set up for both my blogs. But for the one using Dots Dark, when I go to Layout, the right side page elements column has gone way off the screen, which is a nuisance. Can you please suggest a solution?

Apart from that, all works fine, and I thank you.

bizwhiz said...

Hi libra

There appears to be a meta tag just before Page Structure Tweaks in your Dots Dark template. Any reason why you want to put it there? Shift it to the top of the template. Other than that, your Dots Dark layout should be similar to your Dots.

libra said...

Thank you. That solved the problem completely.

Anonymous said...

Hi you have a great site, i have followed the instructions you have given and everytime i get an error message i have corrected it but now it says "More than one section was found with id: sidebar. Section IDs should be unique"
Please help ...before i go mad. ;0)

Sue said...

Hello, I was wondering if you had the html to add a column to the Mr. Moto template? I can't find it anywhere. Thanks, Sue

Sabri said...

Thanks soo much for Your Tips!!!
I'd like to add a second background like your blog...can you help me?
Thanks
Sabrina

shaninaY said...

Hi. Thanks for your blog, I was able to have 3 columns for my page. However, this is the second time that I ruined my site. Hehe. Perhaps it was because there were too many widgets on it. This is the reason why i'd be needing your help. :(

Please help me transfer my posts towards the center and expand it a bit, plus the fonts on my posts are gong crazy.. changing by themselves. :( huhuhu. I really need help with this. Darnit!

Please holler back. Thanks.

SewDelish said...

Yay! I finally did it!

I have tried this countless times, only to discover I missed something in the first step, and now I know about moving the widgets too! Thanks.

Anyway I have actually now added a header but I can't quite work out how to center it. Any ideas?

Carmen said...

I'm so happy that I stumbled across your blog. I have the dots template, and I had been searching for a new template b/c I was kind of bored with it. But I think the 3 columns looks really cool and I'd like to try it! Thanks :)

carmen said...

I have a question for you! I changed the code, but I am getting this error: More than one section was found with id: sidebar. Section IDs should be unique.

I see where the doubling is - (1) where I put your code
div id='sidebar-wrapper'
b:section class='sidebar' id='sidebar' preferred='yes'
/b:section
/div

(2) And then there is this further down the code

div id='sidebar-wrapper'
b:section class='sidebar' id='sidebar' preferred='yes'
b:widget id='Header1' locked='false' title='GET ORGANIZED! (Header)' type='Header'
b:includable id='main'

But I am not sure how to fix this. If you have the time and have any ideas, I would appreciate it very much!

little.trinhs said...

Hi,

I love your site!

I'm new to blogging and are having trouble achieving the 3 col effect. I'm able to get a third col but it sticks to the bottom of the main body...and when I preview blog, it leaves no space between the body and the right col.

clueless...what did i do wrong?

Web 2.0 Usability Blog said...

It works, thanks.

Lucky Star said...

Hi there again. I'm using this 3-columns Dots template now. But I'm having problem with the sidebars. I want it to be wider, so my pictures won't be cut off in halves. Unfortunately, I don't know how and where. Thank you.

IsaacBro said...

Excellent help with making a three column template. I have tried others and they always lost functionality. The comments about both sidebars showing on the right helped me as well. For me, it wasn't clear that I was supposed to move the code for one sidebar above the main sidebar... but the comments helped. THANKS!!!

Vraeden said...

I have an image modified Dots template. Basically, I've replaced only the images and inserted my special links into the template. However, I've noticed that my Dots template seems to be a new version in comparison to the version that you changed. As a result, I can't figure out the changes.

Will you be making an updated post for this?

Anonymous said...

Hola bizwhiz. Paso a darte las gracias por la gran ayuda que me has dado. No pude encontrar nada en español que me ayudara a ponerle tres columnas a mi plantilla Dots Dark, pero en inglés estabas tu, claro y sencillo. Otra vez gracias. :)

Gram Masta Flash said...

I know this post is a year old, but I'm having trouble converting Dark Dotes to a three-column format. I've block pasted everything where it should be, but keep getting the matching "end-tag" error message.

www.flashpointe.blogspot.com

Thanks!

GMF

Alissa said...

I changed my layout to a 3 column, but is there any way to move the header to the center so it lays on top of the blog section?

Stupid Sheep said...

I am really close but instead of appearing on the right next to the main wrapper, the new sidebar appears under. I know it either has to do with the CSS or div layer settings of one of the two, but I can't figure it out. I can't just start over and C&P everything, because my layout was already tweaked (i put a custom banner at the top) and i changed the widths to be fluid. Help!?

Faraz said...

thank you very much for that lesson. It solved my problem perfectly.
http://news-manutd.blogspot.com

Lao said...

Hello!

I found your blog when Googled for a 3 column tweak. I use No. 897 template and I'd like to keep it, but I would also need a 3rd column.

I have too many things in my right hand column that I wish I can distribute to a third column. This way I can keep lots of things upper in the page.

Can you please help me change the No.897 template to a 3 column?

Thanks!

P.S. This is what I'm talking about:

http://laomayer.blogspot.com

Lao said...

Hi again!

Did you receive my comment?

Lao.

What makes you smile? said...

Hi,
Everything was going well for me too until the very last step. Can you look to see what I am doing wrong? Thanks!

Parenthood For Me said...

I have the Son of Moto (Mean Green Blogging Machine variation) template. Can you help me with the three column change?

Anonymous said...

I get this message: "More than one section was found with id: main. Section IDs should be unique."