In this tutorial, I'll explain how to create a three column template in Blogger layouts, using the Minima template as a starting point.
The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first. First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:
#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 */
}
Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:
#left-sidebar-wrapper (this makes the css for this section unique)
float: left (this will make the new sidebar float to the left of the main column)
This will provide the styling for the new sidebar element which we will create next.<div id='main-wrapper'>
.
Immedietly before this section, you should paste the following piece of code:
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
Let me explain the elements of this code to help you understand what we've just done:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
You can now add a page element (or two) to your new left sidebar.
This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML.
To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:
#main-wrapper {
width: 410px;
float: left;
margin-left: 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 */
}
This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:
The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.
Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.
Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):
Download 3 column Minima template
For more Blogger templates to download, please have a look through the Templates section here at Blogger Buster.
Technorati Tags: blogger | 3+column | template | templates | download
Post a Comment 94 Comments:
Nice post Amanda. I am wondering how do you create a three column blog with my current template? I am using "The Late Show" by Liz L. I want to use the left side since it feels so empty!
This is my blog www.filfilah.com
I would imagine it's possible with some adjustments to the width of the main column/right sidebar, and padding at the top of the (new) left sidebar to accomodate the image above. I'll take a look at this soon and let you know how it can be achieved.
Ok, thanks!
@Miss Nice: After taking a look at the CSS, I've noticed the div elements can be adjusted if the body is defined as a three column template. However, this has posed some problems in creating the third column so far, as the css isn't specific about which elements can be attributed to a left-sidebar.
I'm going to be away for a week now, but when I come back I'll take another look at the template to see what I can accomplish with it. Apologies for the delay!
Thanks so much for the help. The changes to my template work and look great.
hi I just redesigned my blog to 3 column thanks for your tips. the r so easy to understand.
now i've got a problem that header widget and sidebar widget are too close can you tell me how to increase top margin in side bar?
Hi, stupid question. I've edited the template and all looks good except my sub title is slightly off center now. Any idea how to get it back on center?
@jayadrathsingh: I'm going to post a tutorial about margins and padding shortly, which should help answer your questions. If you need more specific help (or urgent assistance) feel free to email me.
@carter-ann: I've just taken a look at your blog, and I'm not quite sure what you mean. Are you referring to the description (beneath the blog title)? If so, I really can't see a problem when looking at the source code. Perhaps this may be because the H is beneath the title's T? If so, you could try breaking the description over two lines instead of one, or altering the size of the fonts to see if this makes a difference to the overall appearance.
Feel free to email me if I can offer more specific help.
I have the same problem as Carter-Ann. When I look at the Page Element screen - the widgets in the old right hand column run off the edge of the pasteboard, the header widget also runs off the edge of the pasteboard and you cannot click on their edit buttons.
When you preview the blog - the header's subtitle is off-centre.
This is in the latest version of Firefox.
When I view in latest IE - I have the same problem with the widgets - but they are fully rendered, so I can hit the edit link, while the header subtitle does not appear off-centre.
Looks like a Firefox thing. I can send you some screenies if that helps.
Thank you,
worked a treat
You're right, it is a FireFox thing, but is easily solvable! I just viewed the template in FireFox (usually I use IE-family's favorite!) and quickly spotted the problem!
For some reason when viewing the Layouts in Firefox, the whole of the template width does not display in the layout wireframe. However, if you scroll right to the bottom of the page, you can use the "crossfader" to scroll to the right of the screen and view all of the widgets in the right hand column.
This happens with all of the 3 column templates I've created. Unfortunately I haven't worked out a way to avoid this, but I'll give it a try!
As regards the description being offset, this is simple to fix: in the template there is a line beneath the #header .description line, there is a line which says: "max-width:700". Simply delete this line and the description should be centered again.
This happened because Firefox uses exact specifications in html templates, and had automatically aligned the description wrapper to the left (more a flaw of IE than of Firefox!).
Hope this sorts out the problems for you! I'll modify the template download to ensure the same doesn't happen for other users. Feel free to email me if you still have problems.
Thanks Amanda! That fixed it. Just posted singing your genius.
Thanks for the hack. I've been trying to do this for more than a month with no luck, though I can see now where the previous errors or omissions were. Thank you, thank you, thank you!
Amanda,
This is exactly what I want to do but I get stuck in the beginning already as I cannot find the html code as indicated under your point 2. Can you help?
http://mindfulmimi.blogspot.com/
@MindFul MiMi:
I've been looking at the "sand dollar" template you are using, and I have to say it's rather confusing! The blog elements are not defined in the same way as other blog templates, and widths are defined as percentages rather than in pixels. While I've tried to create a second sidebar for this in my test-blog, I've had severe problems and think the whole template would need to be rewritten to accomplish this. That is, all blog elements would need to be properly defined within the css, and the media display settings adjusted accordingly.
It would probably be easier to make Minima look like Sand Dollar, than to make the third column!
I do apologise that I can't help more with this modification! Instead, I'll see if I can alter Minima to look like Sand Dollar instead, and let you know the method.
Best wishes,
Amanda
@MindFul MiMi:
I've found a three column version of the Sand Dollar template for download, which you can get here:
http://www.blogcrowds.com/resources/blogger_template.php/3_column
Hope this helps you!
Best wishes,
Amanda
Simply awesome. It worked finally and at the first try! I had try to other tutorials in two other blogs better ranked in Google and nothing worked.
You made it very simple for people like me with zero knowledge in blogging and changing html or what so ever.
Thank you so much :D
Hi Amanda! Your instructions were very easy to follow but somehow the third column in my test template never showed up - there's just a big gap between the main wrapper and the right sidebar, and I notice something called tracking. What's that?
The only deviation I made from your instructions was changing one widget name to HTML 4 from HTML 1 as Blogger objected to two HTML 1s (with the same name, that is) - there was an error message to that effect.
What has gone wrong? Please let me know - you can find my blog at testysra1.blogspot.com
Hello,
The 3 columns worked out a bit, but now my right column seems to be closer to all of my posts, causing too much clutter for readers. How can I adjust the original right column to move over more to the right and not be up against my Posts in the middle?
@sra:
I've had a look at the source code of your template, and can see you've made just a small mistake in your style section:
#left sidebar-wrapper {
width: 220px;
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 */
}
You forgot to put a hyphen between left and sidebar. It should look like this instead:
#left-sidebar-wrapper {
.....
}
It's such a small oversight, which I'm sure could be fixed if you just add the hyphen here. The code in the template itself (div id='left-sidebar-wrapper) is perfectly fine.
Try adding that hyphen and let me know if you're still having problems.
@Nicole:
To make more space, you'd need to add a margin to the left of your right sidebar-wrapper, and may also need to alter the dimensions of your outer wrapper slightly to accomodate this extra space.
The easiest way to do this would be to add the following code within the definitions of the sidebar-wrapper:
margin-left: 20px;
In this instance, you would need to increase the width of the "outer-wrapper" by 20px too in order to accomodate the extra margin space.
For a more detailed explanation of margins, take a look at this post.
Hope this helps!!
Hi Amanda, really appreciate the quick reply, and it helped, thanks a lot!
hi amanda,
huge bunch of thanx for the tips, i've been lookin for a tutorial on how to change my stupid 2 coloum into 3.
I followed the instruction, at some level i made the new coloum.
the problem is the new coloum wasn't placed at the left side.. BUT BELOW the Blog Title bar.
did i do somethin wrong (obviously YES)
HELP
HELP
HELP
Hello Tom,
You seem to be using the Rounders template which is a little more awkward to change into a three column template because of the rounded sidebars!
In general, there are three things you should check: copy all of the sidebar wrappers in the style section (there are either two or three for your template) and add the "left-" prefix to them all.
Make sure the "float" section in the settings is aligned to the left, like this:
float:left;
Ensure that the "outer-wrapper" is increased in width to accomodate the width of your new sidebar. So if it currently is defined as "750px" and your sidebar width is 240px, change the width to "990" px instead. It may need to be a little wider to accomodate any margins you have in place too!
I know this is complicated, so feel free to email me if you need more help. I also have a basic three column template for the Rounders4 template which I could send to you if you like? This isn't the same color scheme as yours, but it is a similar design and could probably be customized in the "fonts and colors" section of your dashboard to look the same!
Hope this helps
Amanda
Thanx Amanda for the direct reply,
since i am a total dumber about CSS or HTML code,
please just send me the coloums, or is it possible for me to send you my HTML code and make the changes for me? he he he
here is my email address
toma_gultom21@yahoo.com
thanx a lot and G' Bless u
regards
Hello again t0m@!
Later today I'll upload a three column Rounders template for download here. At the moment it needs a few tweaks to make it more "user friendly" as this is currently in use as a template I use on another blog. When it's done you'll be able to modify all colors, fonts etc to make this look like any of the four rounders templates available by default in your dashboard.
Check back for updates later, and I'll email you when it's ready for download :)
Had a lot of problems creating the 3 column template so I decided to try the simple template download as I use minima. It directed me to Page Not Found. Could you find it for me? Otherwise I will try to persevere with the instructions!
Thanks Amanda.You rock!
these were the clearest directions i've ever read about these things! thanks so much. it worked out great for me.
THANK YOU
THANK YOU
THANK YOU!!!
This has been an Incredibly helpful tool!!!
@The Family Beckwith: you're most welcome :)
I'm glad this worked for you!
Ok, I have to admit that you've got the best blogger Howto known to mankind! Your posts are clear, easy to follow, and answers every question one will have as there going through the steps.
This 3-column modification is the perfect example. I can't remember doing something so drastic to my blog, and being so comfortable doing it because I felt I though you were right there with me all the way through.
The end results is here.
Thank you so much Amanda!
Your blog looks great, CrazyKinux :)
Thank you so much for your comments! I'm really glad this helped you customize your template so easily!
Thanks very much for this easy to follow guide...I've changed my layout to three-column..The experience also makes me understand how the html works..
Thanks again..cheers!
Hi Amanda! Thanks for this awesome tutorial, clear and easy to understand. I found your tutorial through Zimbio. Your step-by-step instruction really works! I just posted a link to your site from mine here :-) Thanks so much again!
It rocks!
nabin's WEBlog
See!
thanks much!
thanks so much!!!
check this out!
http://www.gamingphoenix.com/
Now,I have one original Dot template and I would like to change it to 3-column-dot-template and i follow your instruction and reach copy and paste a new sidebar section.In original Dot template,there are 2#...One is #sidebar-wrapper and another one is #sidebar.Which one do i have to copy and paste? Dot template is not like other template .There are 2#sidebar-wrapper but the other have only one#sidebar-wrapper.
Could you give me some advice please?so sorry for weak english.
Thanks for the easy-to-follow instructions!!
Thanks so much for this tutorial. Very helpful.
My one problem: Now when I'm in the "template" screen, the right-hand bar of template items is partially obscured, so I can't access the "edit" buttons on any of my template items on the right. Do you know how to fix this or why it's happening?
Thanks!
Hello Robyn,
This is a wireframe issue in the layouts screen which usually affects those using Mozilla browsers (eg: FireFox).
Thankfully we can solve this using a few added lines in our template code. I write full instructions to solve these layout problems here. Hope this will help, but feel free to get in touch of you still need some help with this.
Thank you! This worked. You are very smart!
Oh, dear. I don't want to be a pain, but I have one more thing, if you have time. Sorry. My header is now a bit off the edge. Not a huge deal, but is there an easy fix?
http://www.roadyjane.blogspot.com
Thank you so much.
Thanks so much for the walk through! I'm trying to create a club webpage that is also a blog and this helped immensely!
Just wanted to say thanks. I have been trying to edit to the 3 column template for weeks. My html code experience isn't much, but I was finally able to successfully convert from the directions on your site. I have also been trying desperately to put the show/hide post summaries on my blog. No matter what I do, I can't seem to get it right. I am going to browse your blog now for other goodies. Thanks again!
Amanda,
I must say this is the easiest tutorial I've come across. Thank you.
I have some problems though. Can you help?
My blog is http://azmacks.blogspot.com/
I'm having issues with
1) the spacing between the middle and right columns and it changes as you widen the browser window.
2) My paragraphs are not left justified but center justified. How can I chang all three to be left justified?
I just started this blog and want it "perfect" before I let people know about it.
Thanks again!!
Adam
Thank you so so much!
hi amanda,
do you have any suggestion on how to create my right bottom column into widget?
so, i will have three widget column at the bottom of my blog.
thank you.
Thank you, thank you, thank you! Your instructions were great and finally I have a three-column template!
Yikes! I'm totally new at this. I tried getting this to work, I did get a space for an extra column, but my center column for main post is on the left side. Can you tell me what I did wrong? Thanks, Karen
For Fresh Fruits & Vegies for Clatskanie:
I've just taken a look at your blog and it seems you have a sidebar to each side of the posts. Is everything okay for you now or do you still need help with this?
I used this tutorial and got my 3 columns! But I have this space on the left- and can't seem to figure out how to get rid of it. I tried tweaking the outer-wrapper- thinking that I had that set much higher than the inner wrappers (header, sidebar and left sidebar) but that didn't work.
Does anyone know how I can get rid of that space on the left?
My blog is: http://camofishus.blogspot.com
Thanks!
Jo
Fremont, CA
Hello Atheris,
I have taken a look at your blog but can't see what you mean by this space. Have you managed to solve this already? Your blog looks just great to me, but feel free to let me know if you still need any help.
Best wishes,
Amanda
Hi Amanda - ur a legend!! Only you could help me fix this!! I tried to follow ur instructions - and i thought i did very carefully - and went over it again and again. I just want the minima template with 3 columns
Here's my blog http://funnelwebmarketing.blogspot.com/
The right sidebar is still beneath the main section?? ...i'm lost now
Thanks again amanda
funnelweb
hi! i use rounders template and while trying to follow your steps, i havent found exactly the same codes, so i have "improvised" a bit and finally, new bar appeared, but not a left one but an upper one :) it's nice, i use it, however, i would like to have left one too :) do you have idea where is the mistake? i made this>
#sidebar-wrap {
width:240px;
float:$endSide;
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 */
}
#left-sidebar-wrap {
width:240px;
float:left;
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 */
}
because i havent found any sidebar with float:right
Hello Amanda...you really hit the spot with this post.
I found what i was looking for...but for some reason maybe im too retarded im stucked because instead by going to the left its on the top, bellow my header why?
And i already tryed to do soemthing about it but i dont know how to solve it.
I understand HTML but im weak at xtml so i don't know what to do...the only good thing is that the width is 880 lol...
my blog is http://achtungedge.blogspot.com/
i can only put the widgets at the top or at the end of the the blog bost is weird... but not to the left... cna you guide me please?
Done!!
Thanks Amanda - I copied someone else's code you had already fixed and played around with it...
Awesome - thx again
funnelweb
thanks :)
Hi, Amanda
I just tried changing my template to the 3 columns and I'm not understanding something, I guess. I only succeeded in shifting my posts to the left and other column to the right with a space in between.
Here is what I have right now..
#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 */ }
}
#left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)
What the heck am I doing wrong. I'd sure appreciate some help with this.
My blog is: http://dzfantasy.blogspot.com
THANKS MUCH
dz
Hi Amanda! I followed your instructions but my new column is still under my main section instead on the right side. I put a picture in to see where it is (I am in the middle of transerring my blog to blogger~so there are no posts yet)
My blog is www.ourdulcedomum.blogspot.com
Thank you for your time!!!!
Renee
I meant to say *instead of the LEFT side, not right;)
Thanks!
steitzfitness:
Hey i had a simillar problem on my blog check my bog now is correct i could fix the problem...so follow the instructions by amanda but copy my code and it will work ok?
I did that with some one elses blog around here...because i was going nuts...
take care,
anything else im around
Hi Amanda! I followed your instructions to the letter and I have three columns! thanks a lot!
But I do have one problem, however. I can't place an image to my header. The image uploads and is saved instead of the Page Title and Description bur it doesn't seem to appear on my blog. Did I do something wrong? thanks!
my blog is http://betterthanezrah.blogspot.com
hi Amanda! I edited it again and it is now working fine! thanks! your tutorial really helped!
I love your site. Has the best info out there, glade I found it.
One question, I have a three column template downloaded from Info Creek. The two side bar columns are on the right, and nice and small, great for adds and badges. I would like to add a wider section on top of these two side bars kinda like your blue steel magazine template. Is there a way to do this, I have basically no HTML knowledge, but can cut and paste just fine.
PS. I use your magazine layout on another of my blogs, and love it, great job.
This is exactly what I'm looking for. However, I followed the instructions and when I preview it, it looks like the new sidebar is also on the right. I can't figure out what's wrong. Any help appreciated
http://raisethejollyroger21.blogspot.com
Oh my gawddd... You're my saving grace! Bless you.. Thnks for such a wonderful tutorial... makes life easier for not-so-smart people like me.. lolx.. kudos to ya!
*bows*
;-p
Thanks very much for all the help! I was wondering for a while, could I get a three colummed blogger template?
Thanks again
tnx ! see my blog ge3k-itgel.blogspot.com . i need to move my sidebar. which is placing the chat widget. i need to move to the left side of the mainsidebar how can i do that ? help me !
Hello! Thank you for this post. I'm hoping you can help. I think I've followed the instructions and added the elements. On my Page Elements, I have 3 columns, but I am unable to edit my new column. Any suggestions? I don't know where else to go for help!
http://www.boulieblog.com
Thank you again
For Itgel:
I think the easiest solution would be to change the "float" of the #rightsidebar section from "right" to "left".
This float is contained in the following section of code:
#rightsidebar
{
margin-top: 0px;
margin-left: 0px;
width: 125px;
margin-right: 4px;
margin-bottom: auto;
padding: 0px;
float: right;
}
Make the line in bold say "float: left;" instead, and this should change the column appear on the left instead of the right.
You may also need to change the float of the #leftsidebar section from "float: left" to "float: right" too (I just looked at the source code and realized this).
Hope this will be useful for you!
For ChichiBoulie:
Are you able to see the right hand sidebar on your Page Ekements page? If the "edit" links are hidden behind the right side of the page, you may need to scroll down a bit, then look for the slider which should allow you to scroll right too.
If this doesn't solve the problem for you, let me know and we'll work on the problem for you :)
HELP! i did exactly as you said and it hasn't worked. managed to work backwards and undo it all... how can I get the third column in? what do i do now?
Hi Amanda. Your tutorial is really great :)
But actually I have problem. I've done every step in your tutorial, but the left side bar never appear.
Just check the blog : http://qzmlp.blogspot.com/
Nevermind. I spot my mistake.
Thanks for this tutorial, Amanda. It's great :)
Hi Amanda! ,hanks very much for all the help
Your tutorial is AWESOME!!!!Thanx a bunch!!!!
This is the best Space Optimizer for blogger! thanks a lot!!
wii4everybody.com thanks you!!
How come I can't download minima template. FYI, i m very new to blogger. downloaded ur new day template but i thk i prefer 3 column layout.. So, meaning tat i need to download the minima template and remove the new day template right?? but i hv problem in downloading minima. thks for helping.
Wow, I'm a complete idiot at this stuff, and I was amazed when it worked! You're great! I love you. Thanks so much.
Thank you SO MUCH!!!! This is the best 3-column tutorial on the Web. You really helped trulybeautifulonline.com become the best it can be! =)
-Aly
love it thanks now they don't have to go all the way dow keep up the good work
great, thanks for your tips, I will give it a try now. T
It took me a little while but I finally figured it out. Thanks so much!
hello amanda,
i have tried to follow your instructions twice but still don't seem to be able to get it! your instructions seem really clear but i keep getting my two sidebars together to the right of my post not one each side
please help if you can :)