A Blog That Is Just Right

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.