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.
0 comments