Friday, July 31, 2009

Tutorial: How to Make a Three Column Template

As you may have noticed, there are a lot of blogs out there that have 3 columns, but that Blogger doesn't offer that as an option when you are starting out your blog. And probably many of you are like me, we want one but we don't know what it is called to google it! LOL. I found out totally by chance, I was actually looking for something else.

Anyway, here is how you do it step by step.

Remember! Before making any changes, like always backup your blog settings. You can do this by going to -Layout-, then -Edit HTML- and there is a link near the top that will ask you if you want to "Download Complete Template". Do that.

*These changes are designed for the Minima (white) template. To change yours to this, go to Layout, then click on Pick New Template. Then select Minima and save. MANY people have tried this tutorial ignoring this and then get upset when they can't get it to work.

1. Go to -Layout-, -Edit HTML-
2. Look for this line of code:

3. Now COPY the whole thing I have above, and paste it directly underneth itself. So it will be there twice.

4. Now on the bottom one you just pasted, you need to change some of the wording so it will look like this: #left-sidebar-wrapper and then change this: Float: left;

5. Great! Now you need to scroll up a bit until you see this:Now you will have to add the code in red above, this gives space for the new column.

6. To make more room, we need to adjust a few more numbers:

#outer-wrapper {

width: 880px;

#main-wrapper {

width: 425px;

#sidebar-wrapper {

width: 200px;

#left-sidebar-wrapper { width: 200px;

7. Next you will need to hit "Ctrl F" and type in Or Just look for this piece of code near the bottom.

8. When you find this piece of code, paste the following directly above it!

9. Now you will want to adjust your header so that it fits your new look! Find the following and change the parts highlighted.

#header-wrapper {

width:1000 px;

margin:0 auto 10px;

border:0px solid $bordercolor;


#header {

margin: 5px;

border: 0px solid $bordercolor;

text-align: center;


10. Click and save your template. You now can go to Layout and move your elements around. You now have 3 columns!!

*when changing out your backgrounds, DO NOT reset your template -- you don't have to.

You may notice that your words are touching the sides of the columns, later I will post a tutorial on how to adjust Margins and Padding, so stay tuned.

Update: If your columns are too close or one of them is on the bottom, please see my new Tutorial on adjusting your margins and padding: Click here!


Our Family said...

Okay, this is going to sound really dumb, but what is a three column template? What does it do? Thanks, Cat!

Mama Nut said...

I'm sorry, Ari, I should have posted a picture! I'll add one.

If you look, you will notice that is blog has 3 columns. To have three columns isn't a choice when you start a blog. This tutorial is to teach you how to add that extra column.

Our Family said...

Thanks, Cat! I'm going to try it out.

Our Family said...

I got it to work! Yippee! Thanks, Cat.

P.S. I think there is a typo in the section for the sidebar wrapper. Step 4 says to change the wording to look like this "#left-side-wrapper" but I think it should be "#left-sidebar-wrapper"

(I didn't use periods or commas in the quotes because I know how picky HTML codes can be.)

Mama Nut said...

You are SO right! I'm right on it! Thanks!

Blog Widget by LinkWithin