A reader wanted to modify the Sand Dollar Template to show three columns. This is a Fluid width template which resizes the blog according to the monitor resolution of the viewer's machine. It has two columns. The sidebar is at the left and occupies 31% of the screen width. The Main or Posts column is to the right and is sized at 66%.
View After Modification. Click on Picture to enlarge it.
Since a Fluid or Stretch Template occupies the full width of a computer screen we need not increase the width parameters in the template..........
Instead decrease the size percentages of the post column to accomodate the new sidebar. This is the opposite of the method we used in Three Column Template in Three Steps. There we had to increase the width of the outer-wrapper to add a third column.1. FIRST STEP
First Backup the Template. Then login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Template Code box scroll down to this code :
@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
Change the width line from 66% to 35%. This is because we will make the second sidebar of the same width as first sidebar (31%). Save Template. Next this Posts column is at the right ($endside). We want this to be in middle so we change the float line to ($startside). After modification the code will look like this :
@media all {
div#main {
float:$startSide;
width:35%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
} 2. DEFINE NEW SIDEBAR
To define a new sidebar copy the following code and paste it immediately after the code for the Main Column shown above in the first step :
div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 31%;
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 have floated this new sidebar to the right (float: $endSide;). It has same width as the first sidebar (31%). Also it mirrors the first sidebar in other parameters.3. MODIFYING THE BODY CODE
Scroll down to see the code after the <body> tag. Use Edit--->Cut (Ctrl+X) to cut out the code for the Posts Column (Main) : <div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
and paste it after the first sidebar code block : <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Save Template.4. THE NEW SIDEBAR CODE
Lastly to show the new sidebar column on the blog copy and paste this code after the new position of the (Main) Post Columns code :<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
</div>
Save Template. Note the 'sidebar2' in the above code. Perform this step only AFTER completing the THIRD STEP.
Enjoy!
Three Column Sand Dollar Template for Bloggers. |
Equal Height Columns Template for Blogger. |
Blogger has many templates which you can pick by going to Pick New Template under the Layout tab. At present all templates are two column templates. These have a main posts column and a sidebar at the right or left for your Profile and Archives and other widgets you wish to add.
They can be easily modified to add a third column in three steps. These column are however of unequal height. The height of the column depends on it's content. If you add more content to the sidebar it increases in length and then you have to add more posts so that the Main Column has a matching height. Other templates are available with faux columns to give an impression of equal height.
Here is a template with equal height columns : See picture below : 
The columns do not end at their content...........
You can download template here. To download the template right click on the above link and choose 'Save Target As' in Internet Explorer and 'Save Link As' in Firefox browsers. Save the XML template file to your PC.
To load the template :
1. Login at Blogger.com.
2. Click Layout link on Dashboard.
3. Page Elements tab will open.
4. Click Edit Html subtab of Layout tab.
5. Edit HTml tab will open.
6. First Backup your Template. Then backup you widgets. Then click Browse button.
7. Explorer window will open. Navigate to where you hae saved the XML template file and select it and click Open.
8. Click Upload button.
9. You may get warning that "Widgets are about to be deleted!". No need to worry since you have already backed them up in Step 6 above.
10. After new template has loaded sucessfully you can readd your widgets. You can also try the alternative method of loading a template without deleting widgets.
Three Column Template in Three Steps. |
Three column templates are popular because they make more use of the screen real estate. Adding another column to your blog enables you to add more widgets or advertisements to your blog.
In this post I will show you how to transform your blog into a three column blog in three simple steps. Have a look at the before and after screenshots below :
![]() | ---> | ![]() |
| BEFORE | AFTER |
To demonstrate this I have taken the Minima Dark Template of Blogger. I have shown the columns using colors to demonstrate them better...........
FIRST : INCREASE BLOG WIDTH
The first step is to increase the width of the blog. To do this follow these steps :
1. Login at Blogger.com.
2. The Blogger Dashboard page opens on successful login.
3. Click the Layout link under your blog title.
4. The Page Elements subtab of Layout tab will open.
5. Click the Edit Html subtab of Layout tab.
6. The Template Code box page will open. Scroll down in the box to this code :
#outer-wrapper {
width: 660px;
margin:0 auto;
background:#ff0000;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Increase '660px' in the width line in the above code to '880px' and save template. We have increased the width of the outer-wrapper so that it will accommodate a third column. Since we want the second sidebar to have the same dimensions we have increased the width by the same width - 220px - as that of the original sidebar. This is how it looks now :

The outer-wrapper is the red column containing the main posts column (blue) and the yellow original sidebar. Space has now been created to add a third column.
SECOND : ADD THE CSS CODE.
Now that we have created space for the third column we need to define it in the template. This is done by adding code to the CSS part of the template. We want the new column to be exactly like the original sidebar on the right. We want it to be on the left og the posts column. So we add this code between <b:skin><![CDATA[ and ]]></b:skin> tags in the template :
#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 is the same code as the original sidebar. To differentiate it we have added a 'L' after 'sidebar-wrapper'. It has the same width. Since we want it to be on the left of the posts column we have changed the float property to be '$startside'.
Since Blogger has enabled support for bidirectional languages the float:left and float:right have been replaced by $startSide and $endSide respectively.
Save template.
THIRD : ADD CODE IN THE PAGE BODY.
Lastly we need to add the code for the new sidebar in the <body> part of the template. Since it has to be the left of the posts column this code will come before it. Scroll down and paste this code :
<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
immediately above this line in the template :
<div id='main-wrapper'>
I have added two Html widgets to the code as examples. Preview and save template. You can change the background color of the columns if you want to. This is the final result :

Enjoy!!
You can also make a Three column Classic Template.
Make Three Column Classic Template. |
Bloggers who are on ftp are forced to use the Classic Template as Blogger does not provide Layout Templates to blogs outside Google servers. A reader wanted to add a third column to his blog hosted on ftp and hence this post. Readers with Layout Templates can refer to How to Add Third Column To Blog.
In this example I was able to transform the two column Minima Classic Template into a Three Column template in only three steps. See picture below : 
Click on Image to enlarge it.................INCREASE BLOG WIDTH
The first step is to increase the width of the blog so that it can accomodate the space for an extra column. To do this login at Blogger.com and click Template link on the Dashboard. The Edit Html subtab of Template tab will open.
BACKUP TEMPLATE FIRST :First copy all the code in the Template Code box and paste into a Notepad file. Save that file as ClassicTemplateBackup.txt.
You can see the various columns in your blog by giving them temporary borders. In the Classic Minima template this is what they look like :
Click on Picture to enlarge it.
To alter the code in the Template Code box scroll down to this code :
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
.......
CHANGE ABOVE CODE TO :
@media all {
#content {
width:880px;
margin:0 auto;
padding:0;
text-align:left;
}
.......
Notice that the width has been increased to 880px. Now I can introduce a new column sized upto 220px. This is because the 'content' container contains the posts 'main' column and the sidebar column. This is how it looks after increasing the width :
DEFINE THIRD COLUMN IN CSS
The next step is to define the size and name of your third column in the CSS part of your template. In your Template code box add this code :
#sidebarL {
width:220px;
float:left;
}
immediately after the code for the 'content' box altered in the first step above.ADD THIRD COLUMN IN BODY
To add the third column in the body scroll down in the template till you come to this line :
<!-- End #main -->
Immediately after the above line paste the following code :<!-- Begin #sidebarL -->
<div id="sidebarL">
<p>Spacefiller Nonsense Text to Outline New Column</p>
</div>
<!-- End #sidebarL -->
Preview and Save Template. Clear Cache and View Blog. This is how it will look like :
If you want you can increase the width of the header by increasing the width in this code :
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#ff0000;
}
Use Preview to see what it looks like before saving.
The Rounders Three Column Template Mod. |
Many bloggers have been hampered by the absence of three column templates in the Official Blogger stables. They feel that the two column templates fail to exploit the wide screen resolutions on today's monitors. One solution is to increase the width of the blog. However, merely increasing the width does not provide space for additional widgets or advertisements which can be done by using a third column.
Increasing the width of the template also has it's limitations if your blog has an audience using lower resolution monitors. A solution to this is to use a Fluid width template which resizes to match any standard monitor.
The Rounders Template has graphics making up its' rounded corners. Hence adding an additional column means that you have to download, resize these graphics and upload them back. I have been able to do this as you can see below :
You can see the demo here. I have kept the first column as the posts column as it is important in search engine optimization. Here is the method for those of you wishing to customize it more for your own blog........THE MAKING OF THE THREE COLUMN ROUNDERS TEMPLATE
WIDEN THE TEMPLATE
The first step is to increase the width of the template. To do this first go to Template---->Pick New Template----->Check the radio button for the 'Rounders 3' Template and click Save. Remember to backup your first template before this.
Then go to Edit Html subtab of Template tab and scroll down to this code :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 680px;
.......
}
Increase the width to whatever you want keeping in mind the monitor resolution of your viewers which you can get from Google Analytics.
Then scroll down to this code :
#main-wrap1 {
width:450px;
......
}
#sidebar-wrap {
width:200px;
float:right;
.......
}
Change the widths of the above two columns to your specifications. Leave space for your third column. Change the float:right property to float:left for the sidebar-wrapper.DEFINING THIRD COLUMN
To define a third column add this oode just below the above code :
#rightsidebar-wrap {
width:200px;
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 */
}
This column width should be such as to occupy the remaining space.CREATING THIRD COLUMN
Now that the third column has been defined above you have to add code in the <body> of the page to create it. For this scroll down and paste this code :
<div id='rightsidebar-wrap'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>
<b:widget id='HTML1' locked='false' title='Rounders Mod by :' type='HTML'/>
<b:widget id='Text1' locked='false' title='ABOUT THIS TEMPLATE' type='Text'/>
</b:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Poll1' locked='false' title='Template Features Wishlist :' type='Poll'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div></div>
</div>
Save Template.RESIZING THE GRAPHIC ROUNDED CORNERS
You have to download and resize the rounded corner images to match the widths you have specified for the columns.
If you want to maintain the same width as in my demo blog you can download the template file and the graphics here.
After resizing the images upload the images to Photobucket.com or to your account at Googlepages and paste their links in the CSS code to form the background images of the blog column corners.
Enjoy!
Fluid Width Three Column Blog Template. |
Many bloggers have been asking for a three column template. So I brushed up on my XML and XHTML and made a fluid width three column template.
A fluid width template is one which fits all screen resolutions without breaking. The columns expand and contract as the window is resized. You can test it out by going to The Fluid Width Three Column Blog and then type this in address bar of the browser without the quotes :
"javascript:top.resizeTo(800,600)"
and press ENTER on keyboard. The window will resize to 800 x 600 resolution without having a horizontal scrollbar at the bottom..........
You can see the full view of the blog below :
The widgets seen above are not loaded with the template. You have to add your own widgets after uploading this template. Remember to backup your widgets first before changing templates. After resizing it looks like this :
Download Link : Fluid Width Three Column Template. As you can see there is no horizontal scroll.
Right Click the above link and choose 'Save link as' and save it on your PC. Upload to your blog as shown in How to Change Template.
I have also included a Navigation Bar at the top where you can add links to your important posts. To do this login at Blogger.com and click on Layout on Dashboard. Then click Edit Html subtab of Template tab and scroll down to this code in the template :
<div id='Nav'> <a href='BLOG_URL'>Home</a> | <a href='LINK TO SUBSCRIBE POST'>Subscribe</a> | <a href='LINK LABEL 2'>Label 2</a> | <a href='LINK LABEL 3'>Label 3</a> | <a href='LINK LABEL 4'>Label 4</a> | <a href='LINK LABEL 5'>Label 5</a> | <a href='LINK LABEL 6'>Label 6</a> </div>
Change the code in red to the respective links to your posts. You will have to create and publish these posts first and then copy their links and paste them in the above code.
At the bottom of the template are links to 'About Us', 'Contact', Sitemap and Privacy Policy which you can modify in the template by scrolling further down to this code :
<div id='siteInfo'> <a href='LINK TO ABOUT US POST'>About Us</a> | <a href='LINK TO SITEMAP POST'>Site Map</a> | <a href='LINK TO PRIVACY POLICY POST'>Privacy Policy</a> | <a href='LINK TO CONTACT US POST'>Contact Us</a> | <a href='http://betabloggerfordummies.blogspot.com'>Blog Design</a> | 2007 Company Name </div>
<br/></div>
Change the parts in red in the same way as before. I know you will be gracious enough to leave the credit intact.
Another version of this template for those who do not want the stretch version looks like this :
The download link is Fluid Width Central template.Search Engine Optimized Advantages
This template is optimized for the search engines as :
1. The posts column comes first and hence the search spiders first feed on the content.
2. NO JAVASCRIPT in the template making all the links in text and indexed by the search engines.
3. Follow further tips for SEO for blogs to further customize this template.
Download Three Column Beta Template. |
Download Three Column Beta Template with the following features............ Technorati Tags:template, three column, xml xhtml
This template is an original Stretch Denim Beta Blogger Template by Darren Delaye to which I have added a third column. The added features are :
You can see this template in action here.
Click on image to enlarge it.
This shows same site at 800 x 600 resolution. The sidebar remain of the same width and the posts column resizes without adding a side scroll to the window. Click on image to enlarge it.
To see how to load this template to your blog see How to Change Template.
Before Downloading please read this carefully.
1. You are free to use the template for blogging purposes, however please do not remove the "Beta Blogger" link from the bottom.
2. You are free to modify the template according to your needs, please do not further distribute the modified templates and do not sell them as your own work.
3. Although I am not even sure how this template could cause any harm, still I can't be held responsible for any kind of damage that is caused by using this blog template.
Download from here.














