Blogger Beta 3 Three Column Template
I got a specific request from a blogger asking whether 3-column
templates are possible with Blogger Beta. If you have a lot of items in
your sidebar, you would naturally want 3 columns like him so that you
can balance your items across 2 sidebars. I found that it is in fact
easier to convert Beta templates to 3 columns than older templates.
This is because the condensed form of template shown by Beta is easier
to work with. In addition, once you add another sidebar, you can move
page elements between the two sidebars easily using the Layout editor.
If you need a 3-column template for a new blog or just want to try
3-columns with a test blog, you can right-click, save one of these
templates and upload it to Blogger. If you want to use these with your
active blog, please note that it doesn't have all your widgets. So, you
will have to add them again.
http://www.anniyalogam.com/templates/minima3col.xml
http://www.anniyalogam.com/templates/denim3col.xml
http://www.anniyalogam.com/templates/dotsdark3col.xml
If you already have a functional Beta blog, here are the steps that you
could use to convert your template to 3-columns (I am assuming that you
have already played with CSS a bit).
1. Beta template has 3 CSS wrapper definitions as follows:
#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar.
Now, to insert a new column, we need to define a new wrapper, say
#newsidebar-wrapper. Find the definition of #sidebar-wrapper,
copy/paste and rename it to create this new wrapper.
2. These wrappers might have different widths depending on your
template. We need to fix the widths of these 4 wrappers so that they
appear as expected. I suggest setting the width of outer-wrapper as
750px, main-wrapper as 400px and each sidebar-wrapper as 150px (750
> 400+150+150).
3. We should also set the float property of these wrappers
appropriately. i.e. if sidebar-wrapper was set as float:right, we
should set the newsidebar-wrapper as float:left and vice versa (unless
you want both of them on one side). Also, setting the left or right
margin of main-wrapper ensures there's space between the new sidebar
and the main column.
Summarizing, here is an example of settings:
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}
In the definitions above, ... refers to all other properties within the
wrapper.
4. Now that our CSS is ready, let's get to the changes needed in the
body of the template. Find the div sections with main-wrapper and
sidebar-wrapper and add the code in red either above or below the
main-wrapper (i.e. if sidebar-wrapper is below, newsidebar-wrapper goes
above and vice versa).
sidebars. You could move elements between them and add new elements
too. Have fun :)
Update: If you are using Harbor template, 3runo has an interesting
comment regarding how he got layout editor fully functional after he
converted to 3 columns.
From Hackosphere