367 Create a three column Blogger template

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:

  1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
  2. Now, find this section in the HTML code:
    #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.
  3. Now, you need to find this section further down the page:
    <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:
    • <div id='left-sidebar-wrapper'> This section tells the browser that the left-sidebar element exists here, and to look in the css for the appropriate styling for this element.
    • <b:section class='sidebar' id='left-sidebar' preferred='yes'> This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.
  4. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:
    /* 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.
  5. You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:
    #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
  6. At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.
  7. Your layouts section should now look something like this: You can now add a page element (or two) to your new left sidebar.
  8. But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this: 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:
  9. Finally, save your template and enjoy your new sidebar!

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

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

367 comments:

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

    ReplyDelete
  2. 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.

    ReplyDelete
  3. @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!

    ReplyDelete
  4. Thanks so much for the help. The changes to my template work and look great.

    ReplyDelete
  5. 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?

    ReplyDelete
  6. 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?

    ReplyDelete
  7. @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.

    ReplyDelete
  8. 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.

    ReplyDelete
  9. 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.

    ReplyDelete
  10. Thanks Amanda! That fixed it. Just posted singing your genius.

    ReplyDelete
  11. Brainstrained4 August 2007 14:05

    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!

    ReplyDelete
  12. 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/

    ReplyDelete
  13. @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

    ReplyDelete
  14. @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

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

    ReplyDelete
  17. 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?

    ReplyDelete
  18. @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!!

    ReplyDelete
  19. Hi Amanda, really appreciate the quick reply, and it helped, thanks a lot!

    ReplyDelete
  20. 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

    ReplyDelete
  21. 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

    ReplyDelete
  22. 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

    ReplyDelete
  23. 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 :)

    ReplyDelete
  24. 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!

    ReplyDelete
  25. Thanks Amanda.You rock!

    ReplyDelete
  26. these were the clearest directions i've ever read about these things! thanks so much. it worked out great for me.

    ReplyDelete
  27. THANK YOU
    THANK YOU
    THANK YOU!!!

    This has been an Incredibly helpful tool!!!

    ReplyDelete
  28. @The Family Beckwith: you're most welcome :)

    I'm glad this worked for you!

    ReplyDelete
  29. 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!

    ReplyDelete
  30. Your blog looks great, CrazyKinux :)

    Thank you so much for your comments! I'm really glad this helped you customize your template so easily!

    ReplyDelete
  31. 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!

    ReplyDelete
  32. 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!

    ReplyDelete
  33. thanks so much!!!
    check this out!
    http://www.gamingphoenix.com/

    ReplyDelete
  34. 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.

    ReplyDelete
  35. Thanks for the easy-to-follow instructions!!

    ReplyDelete
  36. 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!

    ReplyDelete
  37. 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.

    ReplyDelete
  38. Thank you! This worked. You are very smart!

    ReplyDelete
  39. 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.

    ReplyDelete
  40. Thanks so much for the walk through! I'm trying to create a club webpage that is also a blog and this helped immensely!

    ReplyDelete
  41. 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!

    ReplyDelete
  42. 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

    ReplyDelete
  43. 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.

    ReplyDelete
  44. Thank you, thank you, thank you! Your instructions were great and finally I have a three-column template!

    ReplyDelete
  45. 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

    ReplyDelete
  46. 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?

    ReplyDelete
  47. 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

    ReplyDelete
  48. 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

    ReplyDelete
  49. 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

    ReplyDelete
  50. 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

    ReplyDelete
  51. 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?

    ReplyDelete
  52. Done!!

    Thanks Amanda - I copied someone else's code you had already fixed and played around with it...
    Awesome - thx again

    funnelweb

    ReplyDelete
  53. 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

    ReplyDelete
  54. 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

    ReplyDelete
  55. I meant to say *instead of the LEFT side, not right;)
    Thanks!

    ReplyDelete
  56. 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

    ReplyDelete
  57. 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

    ReplyDelete
  58. hi Amanda! I edited it again and it is now working fine! thanks! your tutorial really helped!

    ReplyDelete
  59. 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.

    ReplyDelete
  60. 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

    ReplyDelete
  61. 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

    ReplyDelete
  62. Thanks very much for all the help! I was wondering for a while, could I get a three colummed blogger template?

    Thanks again

    ReplyDelete
  63. 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 !

    ReplyDelete
  64. 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

    ReplyDelete
  65. 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 :)

    ReplyDelete
  66. 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?

    ReplyDelete
  67. 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/

    ReplyDelete
  68. Nevermind. I spot my mistake.
    Thanks for this tutorial, Amanda. It's great :)

    ReplyDelete
  69. Hi Amanda! ,hanks very much for all the help

    ReplyDelete
  70. Your tutorial is AWESOME!!!!Thanx a bunch!!!!

    ReplyDelete
  71. This is the best Space Optimizer for blogger! thanks a lot!!
    wii4everybody.com thanks you!!

    ReplyDelete
  72. 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.

    ReplyDelete
  73. 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.

    ReplyDelete
  74. 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

    ReplyDelete
  75. love it thanks now they don't have to go all the way dow keep up the good work

    ReplyDelete
  76. great, thanks for your tips, I will give it a try now. T

    ReplyDelete
  77. It took me a little while but I finally figured it out. Thanks so much!

    ReplyDelete
  78. 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 :)

    ReplyDelete
  79. your download link dosent work

    ReplyDelete
  80. hello again amanda,
    worked it out! thank you so much for such clear and easy to understand (for people like me who dont know html) instructions - i actually feel like i learned a little bit!!

    thank you, thank you, thank you :)

    ReplyDelete
  81. Hey Amanda,
    I'm having the same problem as stripeymonkey--the page elements are both to the right side of the main blog post section. Please help!

    ReplyDelete
  82. Hi Amanda. I am brand new to blogging and have found your site very very useful - thanks so much for your help. I do have 1 quick question - I created a header using FotoFusion and when i upload it to my blog there is a little white space just to the left of it. It is not there in the image file, and I tried looking at the code to see if there was something obvious - but it was like trying to read hyrogliphics! Is there an easy quick fix? Any help would be appreciated!

    http://stephbrackett.blogspot.com/

    ReplyDelete
  83. Brilliant!
    I've been dreading doing this for ages but thanks to your instructions it took me less than 3 minutes.
    Many thanks

    Alex
    http://www.lunchatmykeyboard.com

    ReplyDelete
  84. Oh, I think I got it figured out. Thanks for the great directions!

    ReplyDelete
  85. Wow

    Thanks for this, it has worked a treat!

    Kiran

    ReplyDelete
  86. thx for the instruction, it's work!

    ReplyDelete
  87. Hi,
    Your example has inspired me. Thanks
    Niko

    ReplyDelete
  88. Thanks! Your instructions/directions worked out perfectly. I thought it was going to be difficult, but it wasn't bad at all. Now I have a three column blog instead of two, thanks to you! Thanks again!

    ReplyDelete
  89. THANKS a lot. I was really happy that I finally have a 3-column lay-out for my blog and was able to finalize my blog design. Your blog is really useful so I linked you up so that when I need help [every now and then] it will come handy. THanks again.

    By the way, I acknowledge this blog in my latest post. You can check it at http://www.ruthinian.com/2008/07/something-aint-fishy-here.html

    My best regards.

    ReplyDelete
  90. I can't thank you enough. I have been wanting to add a third column to my blog for ages but didn't want to lose my widgets. Thank you so much, it has worked perfectly. I am going to post about your blog and link back to you.

    ReplyDelete
  91. Hi everyone,

    Check this out to get your 3 column blog in jz few steps

    http://www.blogcrowds.com/resources/blogger_template.php

    Hope this will be useful for you!

    Cheers

    ReplyDelete
  92. Amanda, this is the most helpful post I've ever read on making a 3 column minima template. I've downloaded several but the two outter columns were so close to the middle column that the blog looked conglomerated. Based in the clear steps you provide here, I was able to do it myself within minutes and adjust the columns just as I want them. I appreciate this so very much!

    I'd just like to add, I'm kinda shy about asking for help and taking people's time, but a while back I contacted you by email about a frustrating problem and you were very helpful, then invited me to contact you again if I had further difficulty. Thank you again(!), Amanda, you are the best!

    ReplyDelete
  93. I LOVE YOU!!! I have been wanting SO BAD to find a way to make our blog 3-column without having to change our background- and, scared as I was, I followed your tips and DID IT! I can't thank you enough- I'm so happy! YAY!

    ReplyDelete
  94. This is very good!

    But for some reason when I do this,
    my banner doesn't show up! Could you please help me?

    ReplyDelete
  95. This was great! It helped so much! I really love the way my blog looks now and your instructions were very easy to follow.

    It was so helpful I wrote about it:
    http://workingtitlekaty.blogspot.com/2008/08/how-to-make-3-column-blog.html

    Thank you soooo much!

    ReplyDelete
  96. Thaaaaank you so much for posting this info! It is a great help. Congrats for your site and the E-book Amanda!

    ReplyDelete
  97. hi
    thanks a lot for ur help.u given it so simle... really its a great work

    ReplyDelete
  98. Hii Amanda...I need you're help...i tried to follow as you said but of no use....All the terms used in my template are different...
    Template I used:http://www.blogcrowds.com/resources/view_template.php/spiderman_71

    Please help me...i want to have 3 columns such that posts come in middle of two sidecolumns.....Im tried in many websites but of no use...I hope atleast u will reply to me pleaseeeeeeee...:)

    ReplyDelete
  99. Thank you thank you thank you! :)

    ReplyDelete
  100. thanks a lot..it solve my 2 day problem in 10 minutes...thx again

    ReplyDelete
  101. Hi! I edited my blog's html exactly as directed in the steps above. Is there any flaws to the blog's functioning? I'm wondering because after I edited to 3 columns, my blog's feed cannot be detected. And somehow, it is also undetected by Google Blog Search - specific posts don't appear in searches, even when I specified the search keywords and dates.

    I've been searching for an answer to this. I'll appreciate it very much if you could help me with this. :)

    ReplyDelete
  102. When I clicked on the IE 'view feeds' button for both RSS and Atom, it says 'Feeds with DTDs are not supported'. Is there any way I can solve this?

    ReplyDelete
  103. Hiii All

    Thank you for the Three column....i have created three column with the help of you people...but left-sidebar is not active....i mean i can't add Gadget from left hand side ..it is active in right hand side..but i can't add gadget it from left hand (i can't see the href)...pls guide me.....:(

    ReplyDelete
  104. Hi. Thanks so much for your blog. I need some fine tuning help. I followed your instructions for altering my blog html to add the third column. I did this with my pyzam layout. Everything is where it should be, but I would like to know how to maintain the background color and border of the elements that I move from the right column to the left. The text is just carried over directly onto the background. Thanks for your time.
    PS. Tried to email you but could not get it to work. Please point me in the right direction if this has already been addressed

    ReplyDelete
  105. Thanks! This was incredibly easy to do with your simple step by step instructions. I really appreciate the explanation of what each change was actually telling the blog to do. Made an extreme rookie html person like me understand and absorb the code much better.

    THANKS SO MUCH!

    ReplyDelete
  106. I really want to try this but a terrified I will mess it up. I wanted to know if you have a custom header will it stretch to fit the new 3 column or will I have to do it myself?

    ReplyDelete
  107. I have the 3 columns, but both are to the left of my posting column. I must have overlooked something. Thanks for your assistance.

    ReplyDelete
  108. I did it and didn't mess up anything.Thank you for your step by step instructions.

    ReplyDelete
  109. Nevermind, I figured it out! Thanks for a great tutorial.

    ReplyDelete
  110. susah banget masukin template 3 colom ke blog

    apalagi banyak gambarnya, gimana ya caranya??

    anita/samarinda
    http://komic.tk

    ReplyDelete
  111. Worked perfectly, the first time! Thank you for such clear instructions!!

    ReplyDelete
  112. Thanks SO much! I was stuck at why my left sidebar was jamming into the main until I found your post!!!

    ReplyDelete
  113. You are awesome. This worked perfectly the first time and I was FINALLY able to use a picture in my header with this tutorial. Now on to placing ads in my side bar! Thank you, thank you, thank you!

    ReplyDelete
  114. I need some MAJOR help! I don't know what I did to my poor blog! :( I used the sand dollar coding but - I think you need to see for yourself!

    http://thepreppypinkwhale.blogspot.com/

    Please help! :(

    ReplyDelete
  115. hey i like it
    i'm linking it
    hope you'll also link to my blog

    jasmine yuyutsu
    adsense-blogtips.blogspot.com

    ReplyDelete
  116. Thanks a ton Amanda. Works like a charm.

    ReplyDelete
  117. hi amanda, i need ur help ,i want 3 colum papel morado and parchment templates. plz help me out.If u get it plz post the code to preethi.chalavadhi@gmail.com .
    Waiting for ur reply,
    bye,
    preethi.

    ReplyDelete
  118. Thanks a lot Amanda. I finally have the 3 columns I've been hoping for! I had to make a few edits (switch out any mention of left to "right") but other than that, it worked just fine.

    You can check out the end result if you want:
    www.bearswithfangs.com

    Thanks again!

    ReplyDelete
  119. Thanks for the easy and simple to follow instructions.

    It works!

    ReplyDelete
  120. Dude
    You Rock!!
    You not only give us copy paste code, but also explained the CSS working..
    Lots of love and blessing for you
    cheers
    Abhi

    ReplyDelete
  121. Nice instructions and i want everyone also to know that there are some simple instruction in google help on how to use b: widget, b:section, b: includable, etc.


    charles from Money Making and Blogging Tips

    ReplyDelete
  122. I really appreciate the simple instructions. You are awsome!!! Instead of finding a template I could live with I made one I love thanks to you.

    ReplyDelete
  123. Dear Amanda -

    I can't thank you enough for these wonderfully clear instructions. I needed to make a 3rd column to accommodate some 3rd party ad content and it worked beautifully! You are 'da bomb, baby!

    ReplyDelete
  124. Hi Amanda - I followed all of your clear instructions and must have made some error - I can still only make room for two, not three columns. My html is exactly as you described. Have you any idea as to how I can fix this? My site is www.tinglingtastebuds.blogspot.com. Cheers!

    ReplyDelete
  125. I have to say that this post is certainly good but what impressed me even more is your current template! You've made it look like that this blog is powered by wordpress....super duper work!

    ReplyDelete
  126. That's nice tips you gave there. :)

    ReplyDelete
  127. hi i dont understand why my main column is on the left hand side?

    Please check this as I have tried so many variations of the codes people have given me and I really dont know how to fix it!

    ReplyDelete
  128. This comment has been removed by the author.

    ReplyDelete
  129. Is there a way to make it three column, but with both right columns holding the gadgets?

    I tried the code and it didnt quite work out for me. There was a large gap between the second and third column and the left side gadgets still touch the main column. Perhaps blogger changed something since? Thank you for the post.

    ReplyDelete
  130. My template now looks great.
    Thanks a lot!

    ReplyDelete
  131. great thanks! very useful tutorials!

    ReplyDelete
  132. how to change to a 3 column template...Terrific instructions!!! And this is coming from a new "almost-senior citizen" blogger.

    ReplyDelete
  133. thanks lotz, amanda.. my minima black rockz.

    ReplyDelete
  134. Happy days are here again. I've been trying to do this for HOURS with other sites, but your walk-through ultimately succeeded. And I'm code impaired. Thanks!!

    ReplyDelete
  135. Hi Amanda,
    Writing to say, I love, love, love what you and the gang at bloggingtips.com do. I've been able to customize my blog more than I ever imagined possible.

    I've been able to apply every instruction that I wanted without any problems.

    I do have a question though. I applied the above instructions just find until I realized that I had the Minima Lefty template, so this doesn't really work. And, when I change my template to the correct one, I lose all of the work I had done. So, can your instructions above be adapted to have both side bars on the left? I know practically anything is possible within reason.

    If you can respond, great, if not, I understand, you get a lot of traffic - I'll keep looking. :)

    Thank you!!

    ReplyDelete
  136. THANK YOU LOADS!!!!
    HERE IS MY SITE,CHECK IT OUT NOW,IT HAS THE 3 COMLUMN AND IT HAS THE BEST CHEATS!
    http://cheatsike.blogspot.com

    ReplyDelete
  137. Thank you so much. I just got started blogging. Every time I added an article I thought to myself that the left side of my blog was such a waste of space. I thought that modifying the html code would be too complicated. Thank you for simplifying it. Not only have you helped my blog become TWICE as productive but you have helped me through working through my html block.

    Thanks again!
    Caleb
    www.mefinanciallyfree.blogspot.com

    ReplyDelete
  138. Thanks a bunch!!!! I really mean that! I have been working on my blog for about 2 months now and could get no where. I just so happened to stumble across your blog. I couldn't have done it without your help.

    ReplyDelete
  139. I just start blogging yesterday, and i have been searching info about adjusting columns for the whole day. Thanks for your help.

    ReplyDelete
  140. Thanks a lot! Already implemented 3 col template and bookmarked your site.

    ReplyDelete
  141. Thanks for your simple instructions. they were very easy to follow.

    ReplyDelete
  142. Amazing! Thanks so much for the help. Absolutely straight-forward advice that worked to perfection and improved my knowledge of how code works.

    Check out the great results I got on my blogger blog: www.studentcharade.blogspot.com

    Adoration x

    ReplyDelete
  143. Thank you so much Amanda for the help!! I've tried to add a third column fo days now, using different tutorials but finally - thanks to you - I did it!!
    I'll definately come back to read your posts! :)

    ReplyDelete
  144. This comment has been removed by the author.

    ReplyDelete
  145. Thanks. I used these steps and "almost" successfully updated my blog. However, when I view my page elements, the new "add a gadget" element is up on top to the left of my header, rather to the left of the "blog posts" element. And when I go to try and "add a gadget" to see where it will actually end up on the page, I can't actually add anything, it acts like a dead link...any advice? Here is my blog

    poetadocumenta.blogspot.com

    ReplyDelete
  146. wow! that was easy enough and worked great!!! thanks so much!!!!!!!! :-)

    ReplyDelete
  147. thank you so much! it took me a while, but you made three columns truly possible! thank you!

    ReplyDelete
  148. I've tried following your steps and I haven't had too much luck. My gadgets are still underneath and isn't spaced well.

    Any chance you could help me?

    ReplyDelete
  149. Hey Amanda,

    I think this is a great post, but something still doesn't work. Maybe you could take a look and help me out. My goal (outside of having the left sidebar) is to keep my post in the center of the page and to be centered in blog. I haven't moved anything to the left side yet because the hyperlink doesn't seem to work and parts of my post seem to fill in underneath it.

    I was directed to your post by http://megan-deliciousdishings.blogspot.com/

    She had great success with your instructions and well I guess I'm not.

    I've been been blogging for a few days and was hoping not to have to start over. Any help would be great!!!!

    Rob
    http://robensling.blogspot.com/

    ReplyDelete
  150. I did exactly as told but when i went to page elements, there were only two columns but the width was 880pixels meaning that there was a mistake somewhere.

    ReplyDelete
  151. another question... now we have 2 sidebars. would it be possible if we could add a rectangular box over two sidebars? i've searched this thru the net for the css code but could find none. need ur help. :)

    ReplyDelete
  152. Hi Amanda,

    Nice tutorial. But it seems doesn't work with me.

    I have follow every step. but when I see my page element it only have 2 column not 3 column. but the header is wider.

    The download link is not working can you fixed it up? or pls check at my blog and tell me what I went wrong.

    Thanks in advance,
    Liani
    http://aromatherapy-at-home.blogspot.com.

    ReplyDelete
  153. Hi Amanda,

    Never mind about my post earlier. I have figure it out and it works!!

    Thanks a lot.
    Liani

    ReplyDelete
  154. Thank you so much for this post! It is so unbelievably clearly written..wow... and I thought I knem nothing about programmin! :)
    Thank you much!
    Please check out my new and updated blog! :)

    http://alen4ik-didyouknow.blogspot.com/

    ReplyDelete
  155. I love your post ! Thank you so much, I have been wondering how to add this third columb for such a long time!It is so simply and beautifuly written! :) And come think about it, I thought I didn't know anything about HTML.. :)
    Please check out my new and updated blog!

    http://alen4ik-didyouknow.blogspot.com/

    ReplyDelete
  156. hi...Amanda

    i think i make some misteke at html thr
    so can u help me 2 c wat mistake?
    my blog is http://qqqmomo.blogspot.com/.

    thx....

    ReplyDelete
  157. i tried to do this tutorial and nothing work for me, my blog is not in public because is just a test blog to learne first.

    when i write something, my entrance go to the left to, everything is there.

    ReplyDelete
  158. lucid instructions! thanks a lot. I still did not manage to do it. haha
    But i did manage to atleast increase the width of main-wrapper.
    after saving the MInima template, which i had incidentally already chosen, it gave me an error saying something was not defined properly and the word "left". This, I think was because I changed "$endSide" to "left" - to match the code in your post.
    Now, I will compare notes with your XML.
    This is for another blog - jobs4tw.blogspot.com

    Am also trying to get the 3 column, expanded width version for the current blog...but it has the rounded edge template...which involves little more of a struggle, me thinks.

    Thanks, Amanda.

    ReplyDelete
  159. Hi Amanda,
    I have followed your instructions to the letter but I can't get the right side moved back up. I have changed all the setting and everything. Please could you have a look and see if you might can tell me what I am doing wrong. www.rubyscollectibles.blogspot.com

    ReplyDelete
  160. I'm so glad I found this article! This has been by far the easiest and most detailed explanation for how to do the 3 column blog format. Thank you for writing this!!!

    ReplyDelete
  161. Amanda I followed your directions and still can't seem to get three columns on my blog template.
    Help please!

    ReplyDelete
  162. really thanks for the posting. it's helpful

    ReplyDelete
  163. Thank you very much. It worked. Quick 'n eazy. One more time thank you.

    ReplyDelete
  164. Thank you very much. Very eazy 'n quick. One more time thank you.

    ReplyDelete
  165. hey amanda,
    i followed your instructions,but i have a problem the third column i have added,its add a gadget link is dead,what should i do to make it active and be able to add some gadgets?

    Thanks

    ReplyDelete
  166. Hi Amanda, I am a new blogger and I have just followed your instructions and unfortunately my template is all mixed up. My original side bar is now at the bottom of the page, my header is on the right hand side and my space for my posts are very small. Please can tell me how to configure it correctly.
    http://life-post.blogspot.com

    ReplyDelete
  167. hey amanda. i would to thanks you firstly for a great tutorial. it's absolutely wonderful.

    one problem though. i tried adding a header image but it doesn't show. did i do something wrong? tried it a couple of times, but still not showing. please help.

    thisisraidprojekt.blogspot.com

    ReplyDelete
  168. HI !PLEACE can somebody help me to get 3 columns in my blog?? I have tried in every wya but i don´t get it wright. I GO crazy soon. www.rosesandangels.blogspot.com PLEEACE SOMEBODY

    ReplyDelete
  169. Hello Amanda
    i have tryied to add a 3 column but now - the left column is above the Main/Content and right sidebar. how to to it right?

    http://jetztunterwegs.blogspot.com/

    thanks for your feedback
    vincent

    ReplyDelete
  170. Hi , this was very useful,thanx a lot.Written very clear and simple.I set up the 3rd column follwoing your desciption, i changed it a little bit, the 3rd column is floating now to right from the side-bar.If someone got curious, you can take a look here :

    http://webbanshee.blogspot.com

    ReplyDelete
  171. How to make 3 column footer ?

    ReplyDelete
  172. Hi Amanda!

    I was trying to make a 3 column blog and was using the Minima Dark template, when you say on step one to copy and paste the sidebar wrapper part directly below, where directly below? I tried to do that and it widened what I already had but did not give me 3 columns and then somehow it would not let me save anything and I tried to get back what I had and got something else and had to pick the Minima again and when I went back to edit it I couldnt even find the same sidebar wrapper info to cut and paste!! I wish you were here :D

    ReplyDelete
  173. Thank you for this how-to post...it helped me so much, and made it very easy for me to add another column to my blog! I wanted to let you know I added you to my list of blogs to follow, because you helped out a bunch.

    ReplyDelete
  174. aaa, your post hepled me save my blog - i tried to customise a 2 column minima into 3 using another tutorial and i totally blew it ...and i cant understand why my first template (saved before teh 'adventure') uploaded back my blog....so i used your advice to mend back the damaged code....well, it's working know, and i have 3 columns!!! thanks

    ReplyDelete
  175. I seem to get 3 columns, but they are in the wrong order. Can you tell me how to get the blog story into the middle?

    ReplyDelete
  176. simple. to the point. nice!

    ReplyDelete
  177. Please help me!!! I wan`t blog with 3 columns but I`am not master for that! http://sandraskanderlic.blogspot.com

    ReplyDelete
  178. Easy to follow! Thanks. ;)

    ReplyDelete
  179. Niiiice! To all those who don't get it, pay close attention to what you are doing. It makes sense. If you can't get it, then you probably need to forget it, and get someone to help you in rl.

    ReplyDelete
  180. You ROCK!!! Thank you!!! It worked out so good...I learned something new tonight and am loving it.

    ReplyDelete
  181. Excellent!
    I changed my blog to 3 columns months ago but somehow didn't have the coding to put space between the new column & the main column. it looks so much better now!

    ReplyDelete
  182. orsom, thankyou

    ReplyDelete
  183. Awesome!!!

    It perfectly worked for me

    Thanks a lot

    ReplyDelete
  184. Wow - fabulous. I have absolutely zero experience, but found this super-easy. Proud result here: http://www.annaclare.com.au

    Thanks!

    ReplyDelete
  185. i've created a 3-column blog using your instruction (rounders template).thnx. but the problem is...i don't know how to put the background color to my left-side bar.the border is not defined.the texts cannot be seen clearly. pls advise. thnx again

    ReplyDelete
  186. Thanks a lot for the tutorial, It works well, easy to do, great blog you have for bloggers, super !

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy