Looking for a three column Blogger Beta template? Looking to remove the Blogger Navbar? Looking to add a picture to your header? Then look no further!

Recently, I’ve received a lot of e-mails complimenting me on the clean, simple design of my site and asking me how I achieved it. Even though my site is hosted freely by Blogger, it differs substantially from the usual Blogger template. I have three columns in my site while most Blogger templates have just two. My Navbar is removed and I’ve added a picture to the header. Since so many people are interested in how to do this, I thought I’d explain it simple step by simple step.

Note: Before you even attempt any of these steps, backup your blog template – just in case. Simply click the ‘Download Full Template’ link in the Blogger admin area to download it to your computer.

Step 1: Creating A Three Column Template

Note: These instructions apply to the existing Minima Templates in Blogger Beta yet the same principles apply to all templates.

The first thing you want to do is enter the ’Edit HTML’ section for your blog through the Blogger admin area.

Next, find this portion of the HTML (a simple, ‘find text’ search will suffice):

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

}

This bit of code defines the format of the sidebar for your blog which in the Minima Template is on the right. What we want to do is make a new sidebar with a new name (eg ’new-sidebar’) and put it on the left hand side of the blog. Copy the code below and place it directly below the above code in your blog:

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

}

The next part is a bit tricky. We’ve added a new column, but we haven’t changed the width of your blog. Look just above the code we just inserted in your blog to the #outer-wrapper section. Notice that the width is 660px. Yet what we have at this point is (left sidebar + main + right sidebar). Or (220px +410px +220px = 850px). Therefore, we need to change the width of the outer-wrapper so that it can fit our blog. You can vary the widths depending on the design of your blog, but in this example we’ll change the width to 850px so that the outer-wrapper section looks like this:

#outer-wrapper {

width: 850px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

Now we’ve defined the columns in our blog but we still need to put them into the blog. Next, we want to find the div id=’sidebar-wrapper’ portion of the text. Once again, a simple ’find text’ will suffice. It should look like this:

This section adds the existing sidebar to the blog. We want to change it a little so that we are adding the newsidebar on the left. Also, Blogger won’t let us have the same two elements in both sidebars, so we want to remove the ’BlogArchive1’ and ’Profile1’ part of the code. Add the following newsidebar code directly above the div id=’main-wrapper’ part of the HTML:

Save it and that’s it!! Go to the ’Page Elements’ tab and you should see three columns in your blog ready to be edited!

Step 2: Removing the Navbar

This step is incredibly easy. Simply copy and paste the following piece of code directly above the #header-wrapper line in the ‘Edit HTML’ view of your blog:

#navbar-iframe {

height: 0px;

visibility: hidden;

display: none;

}

Save the template and you’re done!

Note: Removing the Navbar is possibly against the Blogger Terms of Service. On their site, they state that the Navbar may be removed for those publishing via FTP to their own server. They do not explicitly state that other users can not do it too. Furthermore, the fact that they allow you to edit the HTML of your blog gives the impression that you can display your blog as you wish. But there is no definitive answer. You’ve been warned!

Step 3: Add A Picture To Your Header

Again, an incredibly simple step. Find the part of your HTML that looks like this (a simple ‘find text’ search will suffice):

What we want to do is change it so that the maximum number of widgets(elements) is more than one. Furthermore, we want to be able to show ads and be able to delete the header elements that we don’t want. So, we want to change the maxwidgets to how many elements we want (let’s say ‘5’), change the showaddelement to ‘yes’ and put the locked to ‘false’. We want to replace the above code with this one:

Save it and you’re done! You should now be able to add a picture to the header. Be careful with the size of your picture. I’ve found that if the picture is too big, it won’t display. If your picture doesn’t display, try reducing the size.

And that’s how easy it is!