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:-
Whereas the Three Columns Dots Dark Template will be this:-
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
40 comments:
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
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.
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
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.
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.
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.
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.
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
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
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!
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!
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?
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?
i just wanna say thank you. You are unbelievable thnakyou thank you thank you
healtheadline.blogspot.com
Bizwhiz,
The one I'm having trouble with is "blonde thoughts!" thanks so much!
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?
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!
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.
widgets would be deleted totally when i use this new template? any way of retaining them?
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.
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/
hey, thanks much. i've been waiting for this! :)
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.
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!
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
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
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>
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!!
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.
Thank u so much! After trying n tryin i finally finally managed! Thanks a LOT! I am at:
virtualcrossroads.blogspot.com
:)
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.
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.
Thanks for providing this info - I used it to create three columns on my dots template and it worked :)
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 :)
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.
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.
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.
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.
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.
Thank you. That solved the problem completely.
I have something to say ...