Customize your blog: three-column layouts

Blogger’s default templates seem to be stuck in the late-90’s when the largest screens were 800 pixels wide.  For small windows, a two-column format works great.  But in this day of 30-inch flat-panels and multi-monitor displays, two-columns seems like it wastes all that great screen real estate.

Adding a third column to your Blogger template requires a bit of work so be sure to do this on a test blog first.  These instructions will give you a three column layout with two sidebars to the right of your main content area.  If you’d rather have a sidebar – content – sidebar layout as on this blog, check out the additional steps below.

1. Do the right thing: Backup your current template to your harddrive.
2. Go to Dashboard –> Layout –> Edit HTML.
3. Find the </b:skin> tag in your template – probably towards the end of the file.  Add the following lines just before the </b:skin> line.

   #outer-wrapper,
   #header-wrapper,
   #footer
   { 
     width: 910px; 
   } 
   #sidebar-wrapper {
     width: 465px;
   }
   #sidebar {
     float: right; 
     overflow: hidden; 
     width: 220px; 
   }
   #sidebar2 {
     float: left; 
     overflow: hidden; 
     width: 220px; 
   }

4. Scroll down near the bottom of the template file and find the line <div id='sidebar-wrapper'>.  Add the following code just after that line:

   <b:section class='sidebar' id='sidebar2' preferred='yes'/>

   The end result should look like this (click for the full-size version):

5. Click Save.  (Preview won't show the sidebar correctly because it has no content in it).

6. Go to Dashboard –> Layout –> Page Elements and move some gadgets into the new sidebar.  Note the Page Elements page often shows the new column on top of the old one, but the elements appear correctly when displayed.

For best SEO results, you want to place your main content as close to the top of the page as possible.  However, Google looks at source code while readers look at the final display.  With a little CSS work we can keep both Google and our sense of aesthetics happy – the above layout keeps your blog entries at the top of your source listing.  With a little more work, we can build a sidebar – content – sidebar layout:

• In step 3, above, add the following code instead.

  #outer-wrapper { 
    width: 910px; 
  } 
  #header-wrapper { 
    width: 910px; 
  }
  #content-wrapper {
    position: relative;
  }
  #sidebar-left-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 220px;
    overflow: hidden; 
  }
  #sidebar-wrapper {
    position: absolute; 
    top: 0; right: 0;
    width: 220px; 
    overflow: hidden; 
  }
  #main-wrapper {
    margin-left: 245px;
    margin-right: 245px;
    width: auto;
  }

• Instead of step 4, above, do this: Locate the line that reads <div id='sidebar-wrapper'> and add the following code just before it:

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

  When you're done it should look something like this:

Unfortunately, the Page Elements page does an even worse job of rendering our left-hand sidebar than in the first example.  In many templates, it will appear just above the main content area and looks as if it should span the full width of your blog!  Not only that, but the drag/drop target for the new sidebar is all over the place.  In short it may take a little trial-and-error (and Previewing, not Saving) before getting it right.

Finally, these layouts are just examples.  Want a double-wide right sidebar?  How about a wider main content area?  No problem once you’re comfortable editing your blog’s template.  Feel free to ask about these and other template updates during the next Tech Q&A.