Saturday, July 4, 2009

How to Create a 3 Column Blog
You might notice while searching for your free backgrounds that some are sorted into two categories: 2 column and 3 column. Right now, your current Minima template on blogger only has 2 columns (you only have one posting section and one sidebar). But when you look at some of the top blogging sites in blogland, you will see most have 3 separate columns (one for posting and two sidebars). Here's how to create a 3 column blog! There are quite a few steps, but the end result is worth it!

1. Sign into blogger and click on Template then Edit Html (before editing you should always save a copy of your template by clicking on Download Full Template).

2. Navigate through the HTML code (you can press Ctrl+ F with keywords) until you find this section:


#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 */ }

3. Highlight this code in your HTML, copy it (Ctrl +C) and paste it (Ctrl + V) directly underneath where you copied it from.

4. From the code you just pasted, change the words that are in blue. Change sidebar-wrapper to left-sidebar-wrapper, and right to left. Your code should end up looking like this:

#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 { 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 */ }

5. Next, scroll down until you see in the Footer section of the code:

<takethisoutdiv id="'main-wrapper'">

6. Paste this code immediately before the one you found above and remove takethisout:


<takethisoutdiv id='left-sidebar-wrapper'>

7. Find this section in your html:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

8. Change the value in blue from 660px to 900px.

9. Find this section in your html and add the code you see in blue to it:

#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 */ }

10. That's it! Click Save. And you should see your template has changed to 3 columns.

16 comments:

Finding Home said...

I just made my blog a three column a few days ago and today made my mom and sisters 3 columns as well. It's so easy!

tututina said...

Your new blog layout is fabulous! I love it! And it really is easy once you take things step by step.

C. Body said...

TuTuTina, You are soooo
"retro-fab-ulous", Darling. So, since Marlo Thomas isn't here, You must be "That Girl". SMILE!!

Books & Knowledge said...

that was a nice write up. need to try it out as i need a 3 column one for my blog.

tututina said...

thanks guys!

vivapinay said...

i love all your tutorials. I just cant get right to transform my 2 column to 3. Cant seem to find takethisout...

tututina said...

Hi vivapinay,
You wont find "takethisout" in your html code...I had to write it in there or else it would perform the action in my blog post and it would disappear. So when you see "take this out", simply look for the code following those words and actually take out the "takethisout" part. Hope this helps!

Isiah Mercury said...
This comment has been removed by the author.
Isiah Mercury said...
This comment has been removed by the author.
tututina said...

Hey everyone! I've gotten this question about the sidebar-wrapper...that sometimes yours may not say right, it may say "$endSide" - that's quite alright. Yours will work even if it looks like this:

#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 */
}
#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 */ }

redamethyst said...

I really wanted to have three columns but I can't get it done. My posts goes to the left, and the middle is empty.

tututina said...

Hi red! The easiest way to make your blog a 3 column one is to choose the "Minima" template (the top left template under the Choose New Template Tab). If you follow the directions on my blog with the Minima Template, everything should work out!! Let me know if that works!

redamethyst said...

hi tututina. yup I tried changing my template. and tried to follow your steps. I don't know what i did wrong. I got the 3 columns, but the blogs were on the left side of the screen. on the layout page, I can't put any on the center
thanks for your help

Marai said...

Hi tututina. I just followed your instructions. But i cannot add a widget on the 3rd sidebar. This what happens: http://i205.photobucket.com/albums/bb249/emochikai/Untitled-3.jpg

i will be waiting for your reply. :))

Romancing Italy said...

After a somewhat laborious day (finally!!) I changed to a 3 column. I had to fiddle a bit because I didn't know what I was doing and because I was using Minima Lefty and it wouldn't obey...at first. Now it's 3 column. The time consuming part was not the making of the column, it was the loss of one itsy bitsy bracket that meant all the variables for the side bars were not being read. One *blinkety blink* little bracket. But all is well now and I feel fine. Thanks for the info on your blog. It is EXTREMELY informative, fun, and makes me want to have another blog just to have your designs on it.
Merry Christmas to you!!!!

Anonymous said...

I wanted to have three columns but I am not getting it. My posts goes to the left, and the middle is empty.

pls revert back asap