Make Three Column Classic Template. ~ The Blog Doctor.
Loading...

Make Three Column Classic Template.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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.


15 comments:

old tech stuff said...

nice tutorial.. thanks..

Sully the Diehard Pats Fan said...

I did everything and everything came out good, the extra column show up with the useless text, but when I go to add page elements, I can't drag and drop into it at all, it won't highlight...suggestions? I didn't have a 'End Main' because I am using a PYZAM template, not sure if that hurt...

Vin said...

Sully,

This post is for Classic Templates which do not have Page Elements. See :

Differences between Classic and Layout Templates.

Eleté said...

Hi, I have a problem: i changed the url of my blog like after 2 days, and I have been getting some more traffic lately so Im appearing in google and stuff...
So, as I checked for my blogs title "Todo Sobre Camisetas" I get as a first link the old url of the blog, instead of the actual one, that doesnt appear at all.
Why is this and how can i make the old blog dissapear from the google search and make the new one there instead?

Vin said...

Elete,

You will have to wait till the old blog disappears from the Google cache.

When you change the blog address you have to start from the begginning all over again and submit blog to the search engines.

Sonic Avenger said...

Hi Vin,
Thanks so much for this, you're a life-saver!
One thing more if possible: How do I get the sidebars to display on the left and right of the screen, with the main (post) column in the middle?
Cheers,
Sonic-A.

Vin said...

Sonic avenger,

Put this code in the CSS :

#LeftBigCol {
float:left;
width:660px;
}

Then in the <body> of the template add this code :

<div id="LeftBigCol">

before this line :

<!-- Begin #main -->

and after this line :

<!-- End #sidebar left -->

add a </div>

This will wrap the posts column and the left sidebar in one big left column.

Then in the CSS change the orientation of the Main posts column to float right within the big left column.

Sonic Avenger said...

You're The Best Vin.
Many thanks.
Sonic-A.

seo said...

Thanks for tip seo

WindBlowerTM said...

Dear Blog Author

Thank you making this Blog, it is indeed very helpful! I deeply thank you.

I was wondering if you could help me with some problems that I am having trying to add a Three Column to my Classic layout.

I have tried everything I could, but it is not working like I would like it to work.
I would like the Main post in the middle and one sidebar on the left side and the other sidebar on the right side.
But when ever I try to add this code, below, and add the other codes from the last comment post
***********
#LeftBigCol {
float:left;
width:660px;
}
***********
It only makes the whole blog bigger and place it all to one side, but I am not able to change the orientation of the Main posts through the Big left column.

Can you possible help me

Sincerely,
WindBlower KL.

Vin said...

Windblowertm,

What is the blog address?

Jen said...

Hi Vin-

I'm having a bit of trouble adding the 3rd column. I've increased the width to 880x but I cannot for the life of me find "End #main" tag anywhere in the html. I use the minima template.

Is there any other place to put the coding, or am I not looking hard enough for the coding above? Thank you.

Vin said...

Jen,

Can you send me the template? The email address is in middle column.

Pu Niao said...

Hi, I need to make another column for my layout so that I can have extra space for my visitors banners and stuffs like that. But I can't find the line that says:

@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

Please help. Thank you.

Cheap Insulation said...

Now, I understand the importance of having the correct width for your blog. That, extra width gives you the space for more content, or to spread out the content you already have, giving the design room to breathe.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.