Blogger template tutorial: 3 column template

UPDATE 6 April 2006: This post is for blogs using the old classic Blogger template. For those using New Blogger templates, refer to
New Blogger 3 column templates modified by Ramani
New Blogger 3 column template modified by Charlemagne Stavanger of Blogcrowds
Dots 3 column New Blogger template with Header modified by Charlemagne Stavanger of Blogcrowds
New Blogger 3 column templates by Isnaini
New Blogger 3 column templates by Thur
Ramani's New Blogger 3 column fixed width Neo template

---

Many bloggers using large screen have complained of the wasted white space left on either sides of the blog contents. Many have also indicated their desire for a third column. Thur has made a 3 column clone of the Blogger standard Minima template, and if you are looking for a nice 3 column template for your blog, you can download it from Thur's 3 column Minima clone (close new window/tab to get back to this page). If you want to see an example of a blog using his 3 column template, surf over to Digital Camera - Choosing and caring for your digital camera (close new window/tab to return to this page). There are a few things to take note of:

• The blog will look very nice when viewed with a large screen. However, to see how it will affect those with 800x600 resolution, try typing (or pasting) this into the address bar and press ENTER: javascript:top.resizeTo(800,600). It will resize the window to 800x600. You will notice relatively wide sidebars on either sides and the main content squeezed into a narrow column in the middle.


• There will be a large gap between the title of the first post and the body of the first post. This can be rectified by going to SETTINGS > FORMATING and setting the ENABLE FLOAT ALIGNMENT to NO. This should solve the problem. However, suppressing the markup may result in layout problems when using left or right alignment for images."

The first setback can be overcome by reducing the width of the sidebars. To see an example of this where the sidebar has been reduced from 220px to 160px, look at Television Network. Try typing (or pasting) javascript:top.resizeTo(800,600) into the address bar again to resize the window to 800x600. Notice that this time the center main column is not squeezed into a narrow column.

To modify the template to make the blog look like this, look for this block of codes in the style sheet (solution provided by Thur):


/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 10px;
margin: 0px 240px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 220px;
padding: 0px;

Change the figures in red to the following:

/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 0px;
margin: 0px 180px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 160px;
padding: 0px;
}

PsycHo Free Template Generator

You may also use the PsycHo free template generator to generator your own 3 column template the way you want it. You may view an example of a blog using a 3 column template generated by the PsychHo template generator: The Television Guide.

Firdamatic

Firmatic can also generate either a 2 column or a 3 column template for Blogger. With Firmatic, you have a choice of putting a graphic into the Header together with a title. You will have to choose the header font (serif/sans-serif), font color, etc.

UPDATE: Ramani has done a nice hack for a 3 column template for Blogger Beta. Have a look at Blogger Beta - 3 column template

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Publishing a Blog with Blogger: Visual QuickProject Guide

NEWER POST

OLDER POST