Headlines
Saturday, June 7, 2008
The most common problem of the bloggers is the empty space around their template or the less amount of columns to add widgets . Many bloggers do not like the empty white space on either sides and wish to add a third column (maybe so that it looks more appealing).......Many bloggers report that 6% to 9% of their viewers are on 800 x 600 monitors. They would hence like to add a third column to their template.
NOTE : In case you already have a third column in you template but just wanna increase the width to fit the page , the read my earlier hack "Changing width of your blog template".
Now here is how you can add a third column to your blog template :
1. Define new columns
The size and placing of the new columns will have to be declared in the CSS first. The new sidebar is defined by
#righthandsidebar-wrapper
{
width:35%;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar floatin IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#righthandsidebar
{
margin:0;
padding-top: 100px; /* reduced from 170px of leftsidebar */
}
Notice that the right han sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'columns'.
#columns
{
width:64%;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar floatin IE */
overflow: hidden; /* fix for long non-text content breaking IEsidebar float */
}
Since the right sidebar wrapper is 35% we have sized this at 64%. Save Template.
2. Now we just have to implement the columns in the body for their corresponding CSS between the <head> </head> tags of the template
Scroll down till you come to this line :
<div id="'main-wrapper'">
and add the following code just above this line.
<div id="'rightsidebar-wrapper'">
<div id="rightsidebar">
</div></div>
<div id="columns">
Notice that the right hand sidebar wrapper along with its sidebar has been added before the main wrapper and the columns division has been opened but not closed. To close it add this code
</div>
just before the footer wrapper code starts here :
<div id="'footer-wrapper'">
Thus the columns includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it.
3. Save the Template.
4. Now we are almost there.....You have added the third column....Now we only have to add the WIDGETS to the new column or it would remain empty.
To add it widgets or Page Elements to it add these lines :
<b:section class="'sidebar'" id="'righthandsidebar'" preferred="'yes'">
</b:section>
at the position marked by xxxxxxxxxxxxxx below :
<div id="'righthandsidebar'">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
5.Save the template.......ITS DONE !!!!
I except you guys to very well know about adding widgets in the column you created....for any help drop me an e-mail at kinglife50@gmail.com
Labels: BLOGGER HACKS