Its time to beef up the screen real estate of this blog, one way of doing this would be to add another column to the left of the Blog and maximize it for larger screens.

As a help for other bloggers that want to do this, I will document the process as I go. So far this Blog site just uses the basic Rounders template along with a customized header - which I unfortunately did not document when I modified. (there are however plenty of tutorials on the net for changing the header on Blogspot templates, just do a simple search)

I'm going to use Kumikos tutorial Hacking Blogger Beta: Building a Three Column Template, Removing the Navbar and Adding a Picture to the Header as a basis for this change. Why? Because shes cool and her blogs still in one piece after adding a column to it!

Grab yourself a cold drink, block out any interruptions for the next 30 mins 60 mins and lets do it!

Step 1 - Backup your template.
The first thing to do is backup your template, at least then if you stuff it up with a bit of luck it will be possible to resurrect your site before you started messing with it!

To do this go into the settings of your blog, click on Edit HTML then Download Full Template

Step 2 - Find the current sidebar and create your new bar from it.
Following on Kumikos tutorial we now need to find text similar to this. Mine is slightly different to the text on her site, and depending on your template it may be different as well, but it should say something like...

#sidebar-wrap

{
width:240px; float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

We now need to copy this code, change it a little to reflect the new name and float position of our left hand sidebar. If you just want to copy and paste here is the new code.

#leftsidebar-wrap
{
width:240px;
float:left;
margin:15px 0 0;
Font-size:97%;
line-height:1.5em;
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 */
}

Step 3 - Widen the width of the site
Now currently the site is set to a width of 740px, we know that the other sidebar is 240 px, and the main wrap is set to 485px. What we do here is subtract 485 from 740 and we are left with 255px, this is what we want to widen the site by - below is the new code if you want to copy it and paste over the existing.

#outer-wrapper
{
width:955px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

Step 4 - Now add the Div settings into the code
You can simply paste this above the existing main-wrap code.... you will need to edit the widget id or remove it all together to add your own.

<div id="'leftsidebar-wrap'"><br /><div id="sidebartop-wrap"><div id="'sidebartop-wrap2'"><br /><!--xml:namespace prefix = b /--><b:section class="sidebar" id="leftsidebartop"><b:widget id="HTML8" title="Bloggers Toolkit" type="HTML" locked="false"></b:widget></b:section><br /></div></div><br /></div>

This was a bit more difficult than I expected and for a while there I had big gaps and a sidebar that was about 4 foot off the bottom of my screen! But this kind of stuff always happens when you mess with templates, so you just need to be patient and keep working away at it, and if all else fails restore from backup.

The End Result
Here is our 3 column rounders template! If you try this yourself and have any grief, I cannot promise to help you but will give it a shot so feel free to ask any questions.

Subscribe by Email to the Million Dollar Experiment Down Under

1. Mike's Money Making Mission
2. Kumiko's Cash Quest
3. How to earn money online?
4. Stratz's Blog
5. Hot Blog Girls

Job Search Australia
Job Search New Zealand