12 March 2009

How to make your footer 3 column?

Thursday, March 12, 2009  DrRaman  67 comments

You may have noticed a 3 column footer in many blogs, it's been quite popular these days.

It's quite easy to add a 3 column footer to your blog just follow these steps -

STEP I - First and foremost backup your template.This is a very essential step, in case anything goes wrong, you will be able to restore your previous template.

STEP II - Now find this code (you can use Ctrl+F in Mozilla Firefox)-
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>
Note: Some templates may have only "footer" instead of "footer-wrapper".

STEP III - Replace the red code with following code -
<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>
Now save the template.

STEP IV - Now find this tag -
]]></b:skin>

Place this code before the above tag -
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;


}
Save the template.

STEP V - Now go to your "Page Elements" page, you will find three columns in your footer.

You are done now, add any Gadgets you wanna add to your footer columns and enjoy :-)

You will get following type 3 columns



If having any difficulty in implementing these steps, just leave a comment here.

UPDATE: How to create 3 columned footer with different style?

Posted in:

Related Posts

67 comments:

Very nice tutorial thanx.

I am not able to find the footer code. I am using revolution theme.

just press 'Ctrl+F' in your browser and type 'footer' and click next until you get tag like 'div id= footer'....... it may be footer/footer wrapper in different themes

I wana make a 2 column footer instead of 3.. how to go about doing that? Please email me at treasurehauz@gmail.com. Appreciate it :)

Use following code instead of code given in Step III


code

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Raman,

This has been the most helpful blogger tips website. There have been thousand blogs on the same article, most I personally feel most of them are hosted only for money. Thanks for providing great instructions, and I also see that you reply to your comments.

Thanks again, my blog address is http://testtotester.blogspot.com

Sharath Byregowda. You are always welcome.

hello.. your tutorial was a big help. i wanna know how do i get some button like on the buttom of your post like digg, technorati. etc.?thank you inadvance.

thanks for your tutorial. but i wanna know how do i get some button like digg etc in every post i make? thank you in advance.

read the tutorial here -

http://free-blogger-help.blogspot.com/2008/07/how-to-add-social-bookmarks.html

It's work brother. But there's a line show up on my footer. How to remove that line?

ok.... can u plz give me your url, so that I can check and may help you.

Here my URL brother! http://www.another-new-blogger.blogspot.com
And how about if I want to change the color of my footer and how if I want to make 4 columns.
Thanks brother!
Already become your follower since my first visit here. You have a great blog. Thanks

to remove line,,,,remove this code <hr align="center" color="#5d5d54" width="90%"> , to change color =>> add

#footer2{
background:#ff0000
}

after

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;

}

change "ff0000" to any color you want, and add similar code for footer3, 4.

Hi

Great tutorial.
I want to change font and want to add background picture like sidebars background, How can i.

thanks for the sharing.

I am using revolution theme.
Please help as soon as possible.

King Regrds,
Izhar Faree
http://circuit-lab.blogspot.com

@Izhar Fareed

You want to change font and background picture of Sidebar right?

Thanks a lot, it worked fine for me.

Hello there !

Thanks for quick response.
Actually i want to add three or four column footer section to my blog

htt://circuit-lab.blogspot.com

Having separate background images.
you can see an example here

http://newbloggingtipz.blogspot.com

And please visit my disclaimer page

http://circuit-lab.blogspot.com/2009/09/disclaimer.html

A problem has acquired to sidebars.

Please help me !!!!!!

Once again thank you very much for cooperation.

@ Izhar Fareed

Well I need to study the template you are using. Give the link from where you have downloaded it.

I have downloaded Revolution Template from http://bloganol.com/2009/02/free-revolution-church-blogger.html

And i want to add footer columns after the large banner space in footer section

Thank you very much
Izhar Fareed
http://extremecircuits.blogspot.com
http://circuit-lab.blogspot.com

To add footer columns follow steps given in post

OK !

I have done these steps and got three columns.
Now what to do ?

Izhar Fareed
http://circuit-lab.blogspot.com
http://extremecircuits.blogspot.com

So did you get like at your footer(check layout>> page element)

http://photogalaree.blogspot.com/2009/09/how-to-make-your-footer-3-column.html

i am not getting footer with id="footer.." in my site.
plz help me
http://blogger-designz.blogspot.com/

@ guru

Send the location from where you downloaded your template.

!! I have got it !!

But I need to add columns background image and (title's background)

See an example here

http://i33.tinypic.com/2e0i8tt.jpg

Thanks

Hello It's Me Izhar Faree

I have made footer with columns and background
You have no need to worry about that.

Thank you very much for cooperation

Izhar Fareed
http://extremecircuits.blogspot.com

Hello! Thank you very much for this tutorial it worked perfectly well for me. Could you tell if its possible to add a background image to the hole footer section?

Marky Nimrod

You can change the background color of your footer. Just find

background: #000000;

below

#footer-wrapper {

and change the html color code.

drraman

Yes, thank you but I want to add an image, is that possible too?

Change
background: #000000;
to
background-image: url(URL address of your image);

Dear Drraman,

I have absolutely no footer tags in my code :((((( how can that be? I'm using a Momochi template and would like to have my footer split in 3 columns. I did a lot of changes on the original layout, is it possible that somewhere along the way my footer section got lost? Help me please! Tnx and greetings from Croatia!

www.hobbychic.blogspot.com

hey...in that case you have to add the footer code your self...first define it in styling section, then add it in your body,,,,but it requires some knowledge of HTML....or else you can change your template to one with footer.

hm, i cant get, i must be doing it something wrong

having some difficulties with this one, but i know its easy

@ izdelava spletnih strani, just follow the procedure step by step and double check the code and procedure before saving template.

@spletne strani, good luck with this.

Thanks to help i love this post and its work for me thanks again now i am follow your website thanks again

Hi, I am using WP blogs and this doesn't apply. Do you know where I can find some advice for adding 3 columns to a WP blog footer? Thanks a lot.
Teo

Did you get

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>

@drraman i do not have the code you have. all i found was the footer wrapper. i tried doing it with that but it came out with errors and it would not let me save

I will need your template. (upload to rapdshare)

I cnt put the 3 column...
it said ...
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: XML document structures must start and end within the same entity."

HOW ?

You are missing something. Add all codes very carefully. Start fresh.

ou damn my footer on my blog http://ewwing.com looks so mess

Thanks for the tips!

Thanks for a good post. Seo footer links are good upto some extent and it may harm you if 100links rule in not followed in the page.

But according to Web 2.0 style footer is also a good way of optimizing the pages.
http://www.quickheed.com/seo/seo-footer-optimization.html

thank so much, your guideline for me is work in rounder 3. thank, you are super net master ;)

Thank you for the great tutorial and for replying to our questions.

I found everything you told us to find, but when I saved the code the first (and second) time, I got this error: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "body" must be terminated by the matching end-tag "".

My website is http://www.mangiodasola.com

I also need help moving the header to the top of my page, but that is another issue.

@ Memória

Send your template to
gabbar1113@gmail.com
And I personally try it.

When I finish step three it keeps telling me that 'The element type "div" must be terminated by the matching end-tag "'...I've tried closing it with /div but it's not working...

Thanks for the easy tutorial!

@drraman i got this kind of thing div id='footer'

what to do know..

The template you are using already has 3 column footer. Go to Page elements.

@drraman when i post a new post then it comes on the top but i dont want that, i want it to be on the last, is there any procedure to do it.

Thanks

To do this you will need simple blogger dashboard and not the Blogger in Draft.

Edit all posts you want to keep on top. Just change the Date. Set it to 20 years later.

Click on Post options and Set date and time like
7/28/50

Hi,Great post. I used it. u can view it
http://softechguru.blogspot.com/
u r continuing a great job. a lot thing are there to learn from u. Thank you.......

How to have same length for each column in the footer
Check http://livecricketasia.blogspot.com

just adjust these values in step 1

width: 30%

I wish to separate the footer from rest of the blog with a different color such that the entire lower section shows a different color to the top section. Is there a way to do this?

In Step III code

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

Just add background:#C6E2FF;

as follows

<div id='footer2' style='width: 30%; background:#C6E2FF; float: left; margin:0; text-align: left;'>

Do the same with other 2 blocks of footer.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More