Making A 3 Column Template

Since New Blogger, and the Pick New Template wizard, was launched, many bloggers have been wishing for a 3 column template. So far, Blogger hasn't provided us with one. There are several web sites that offer templates, and some 3 column templates, but using a third party template isn't always a great solution.

Fortunately, making a 3 column template from a 2 column template isn't all that hard to do, assuming that your blog doesn't use fixed width components as Rounders, Scribe, Son Of Moto, Thisaway, and TicTac templates do. You can still make 3 column displays with those templates, but they won't look as good.

A 2 column template has 2 columns, floating opposite each other.

• Main, floating left.
• Sidebar, floating right.

All that you have to do is split the Main column.

• Main1, floating left.
  • Sidebar2, floating left.
  • Main2, floating right.
• Sidebar1, floating right.

A 2 column lefty template is just a mirror.

• Sidebar, floating left.
• Main, floating right.

Again, split Main.

• Sidebar1, floating left.
• Main1, floating right.
  • Main2, floating left.
  • Sidebar2, floating right.

That's the concept. The execution is a bit tedious, but doable. But it really does work. Note that this exercise was conducted some time ago, and before the cross the board deployment of bi-directional templates, in support of blogs in Arabic and Hebrew.

This is probably as easy as importing a pre coded template. Note that this example uses a Minima template, in mint condition. If you've tweaked the Header code, or added main or sidebar objects, you'll deal with some variances. But you'll go through the same challenges if you import a pre designed template, and more.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

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

#main-wrapper {
  width: 410px;
  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 */
  }

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

And a second, in the Body, almost at the very bottom ...

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
      </div>

And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the custom widget code from your current template to your new template!

The first ...

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

#main1-wrapper {
  width: 480px;
  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 */
  }

#sidebar2-wrapper {
  width: 160px;
  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 */
}

#main2-wrapper {
  width: 300px;
  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 */
  }

#sidebar1-wrapper {
  width: 160px;
  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 */
}

And the second ...

      <div id='main1-wrapper'>
      <div id='sidebar2-wrapper'>
        <b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
      </div>
      <div id='main2-wrapper'>
        <b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      </div>

      <div id='sidebar1-wrapper'>
        <b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
      </div>

Save your changes.

Test.

And finally, backup the template, again!

Yes, it's that easy!

Now in this exercise, you took a standard 2 column template, and simply split the main column. What you have right now is probably a little crammed together. When you see that the 3 column layout works, you can try and widen the columns just a bit. And the simplicity of the coding aside, you'll likely find a challenge in getting the right column widths. That task might be easier by putting both sidebars immediately next to each other. Most standard Blogger templates, in mint condition, should be pretty similar, though templates that stretch will need a slightly different (and actually simpler) technique.

>> Top