Tutorial: How to Change Your Blogger Blog to a 3 Column Layout

You decided that you wanted a three column layout instead of a two column one. And here's how to do it. Disclaimer: I'm by no means an expert on the subject but I try to explain the easiest way possible.

Let's get to work... it's easier if you decide to do this early on your blog career? because that way you have less stuff on your HTML code [well hopefully anyways].

Your template should be Minima for this to work easier. If you need to change it here's how:

Go to your Dashboard and click on the Layout tab.

Now go the Pick New Template tab.

Choose Minima, it's usually the first one.

Save your template.

Now go to the Edit HTML tab.

Here's where the actual work begins, so pay close attention. You might want to use the find feature of your browser, you do this by hitting the keys Ctrl + F on your keyboard and you shall get a little search bar on your page. Something like this:

Mine is always located at the bottom, but it depends on what browser you use. What you need to find is 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 */ }

Copy the entire section and paste it directly below itself. Now we need to change the elements that I highlighted in deep purple.

#left-sidebar-wrapper

float: left 

Scroll up until you see this part of the 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*/

}

Add the words that you see in deep purple.

Now we have to readjust some numbers. On your HTML code, change the numbers to the ones I highlighted in deep purple 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: $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: 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 */ }

Now, find this <div i d ='main-wrapper'> on your find box and paste the following code exactly above it.

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

We're almost done, the only thing that you need to do now is adjust the size of your header so that it is the same width as your page. Find this section of your HTML code and change the numbers to the ones I highlighted in deep purple. Note: If you use 0px you will not have the border lines around your header.

#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;

Save your template.

Now you can go to your layout tab and drag some of your page elements onto your left sidebar.

PS: Here are some links where you can fins cute backgrounds for three column layouts.

Fresh Blogger Templates
The Cutest Blog on the Block

Feel free to comment or e-mail me with any questions.