How to get a 3 column template (for the minima template) (Updated Aug. 2012)

So you want to have a 3 column template using blogger’s ’06 minima template? Well you’ve found found just the place.  If you need a tutorial on how to get your minima template back click HERE.

Remember, now that blogger has it’s new template designer, you can get a 3 column template MUCH easier by using the ‘Picture Window’ template and and using the designer to make the template 3 column the click of a button! Our backgrounds will work just fine with the ‘picture window template’.

If you still want to play around with the html of the minima template, read below, :)

NOTE: Before you edit or change template, make sure you backup your current template PLUS Page Elements.

We have tested this out ourselves and found that it has worked! And the fun part about it is that you’ve now got 3 columns to organize all of your fun blog info into. Also, with this new way, you’ll not lose any of your links or widgets or other blog gadgets that are built into your blog.

Go to Template, Edit HTML.
Now, find this section in the HTML code:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  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 itself.  Add left after the # symbol so it looks like this:

#left-sidebar-wrapper

Scroll up a little bit until you see this code:
#main-wrapper {
width: 410px;
margin-left: 25px;
float: $startSide;
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 will see I added  margin-left: 25px; to the code.  You will need to add that to your code.
Now, we are going to adjust some of the numbers. Change the numbers on your blog to reflect the numbers below.
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 425px;
margin-left: 25px;
float: $startSide;
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-wrapper {
width: 200px;
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 {
width: 200px;
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 */
}
Next, hit ‘ctrl F’ and paste this code: <div id=’main-wrapper’> in the find box. Now paste the following code directly above that.

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

You may want to adjust the header size so it is as wide as your background. Scroll up till you see the following code. Change it to follow in bold. *By making the border 0px you will not have the border lines around your banner!*

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

Click save template. Now click on your ‘Layout’ tab. You will need to drag some of your elements on the right sidebar to the left side bar. Click save and preview template. You should now have a 3 column layout!

*When changing out your background you do NOT need to reset your template. This will erase all the coding you just did. Just erase the old background code and replace it with the new one!

18 Comments

  2. Hey there, You’ve performed a great job. I’ll definitely digg it and personally suggest to my friends. I am sure they’ll be benefited from this web site.

      • I was able to follow the directions until this point:

        Scroll up a little bit until you see this code:

        #sidebar-wrapper {
        width: 220px;
        float: $endSide;
        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 will see I added margin-left: 25px; to the code. You will need to add that to your code.

        I didn’t see where you added margin-left: 25px;

        And then that same coding is repeated 4 more times, asking me to adjust the numbers… but it’s all the same coding.
        Am I not reading this correctly?

  4. Melissa! Sorry about that! The coding was not linking correctly from the back end of the site to how you see it….thanks for letting me know! It should be fixed now:) Let me know if you have any questions! –Becky

  5. Hi, I’ve used your 3 column bumblerry template in my blog and suddenly I had a just a black background (the only thing I changed was I added a youtube video on one of my pages.) Now I’m trying to get a background again, but the picture window template keeps showing up over yours. Any suggestions? I’ve looked through all the tutorials and tried the minima template, but I can’t adjust widths or colors without going into the html. Thanks!

  6. I love the TCBOTB *-* Anyway, lol!
    I tried to follow this tutorial and when I try to save or visualize the result, this advice appears: Open quote is expected for attribute “{1}” associated with an element type “id”.

    Error 500

    What should I do?!

  7. I’ve had a three column background on my blog for over a year (I used minima and altered it to make a wide middle column- i actually don’t have three columns, I just wanted to be able to fit big pictures).

    Anyway, I’ve used lots of different three column backgrounds from y’all, but this week I tried one and it didn’t work (it wasn’t wide enough). I went back and tried some of the old ones I’ve used before and sure enough, the same problem. Ay ideas what’s going on? Thanks!

Leave a Reply