12 March 2009

How to make your footer 3 column?

Advertisements

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?

Related Posts

67 comments

April 22, 2009 at 9:59 AM

Very nice tutorial thanx.

April 22, 2009 at 10:04 AM

you are welcome max :-)

May 13, 2009 at 1:38 PM

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

May 13, 2009 at 7:55 PM

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

May 28, 2009 at 12:56 AM

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 :)

May 29, 2009 at 12:00 AM

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>

June 5, 2009 at 4:18 AM

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

June 5, 2009 at 7:17 AM

Sharath Byregowda. You are always welcome.

July 5, 2009 at 6:17 AM

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.

July 5, 2009 at 6:20 AM

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.

July 5, 2009 at 11:58 AM

read the tutorial here -

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

July 9, 2009 at 2:01 AM

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

July 10, 2009 at 10:51 PM

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

July 18, 2009 at 6:45 AM

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

July 18, 2009 at 8:44 PM

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.

August 5, 2009 at 5:20 PM

Thank you! :-)

September 8, 2009 at 3:06 AM

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

September 8, 2009 at 7:07 AM

@Izhar Fareed

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

September 11, 2009 at 8:09 AM

Thanks a lot, it worked fine for me.

September 17, 2009 at 4:13 AM

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.

September 17, 2009 at 6:19 AM

@ Izhar Fareed

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

September 17, 2009 at 11:43 PM

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

September 18, 2009 at 6:33 AM

To add footer columns follow steps given in post

September 18, 2009 at 9:50 PM

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

September 19, 2009 at 5:30 AM

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

September 19, 2009 at 11:04 PM

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

September 19, 2009 at 11:46 PM

@ guru

Send the location from where you downloaded your template.

September 20, 2009 at 12:48 AM

!! 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

Anonymous
September 20, 2009 at 5:22 AM

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

October 24, 2009 at 3:50 PM

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?

October 25, 2009 at 5:46 AM

Marky Nimrod

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

background: #000000;

below

#footer-wrapper {

and change the html color code.

October 25, 2009 at 8:40 AM

drraman

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

October 26, 2009 at 3:15 AM

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

November 12, 2009 at 11:15 AM

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

November 12, 2009 at 7:05 PM

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.

November 13, 2009 at 4:46 AM

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

November 13, 2009 at 4:47 AM

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

November 13, 2009 at 9:09 PM

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

November 13, 2009 at 9:09 PM

@spletne strani, good luck with this.

December 8, 2009 at 12:29 AM

blindly perfect. well done!

December 28, 2009 at 3:54 AM

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

January 6, 2010 at 12:22 PM

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

January 6, 2010 at 10:23 PM

Did you get

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

January 7, 2010 at 5:34 PM

@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

January 7, 2010 at 10:30 PM

I will need your template. (upload to rapdshare)

January 24, 2010 at 6:28 AM

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 ?

January 25, 2010 at 12:54 AM

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

February 21, 2010 at 4:01 AM

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

March 7, 2010 at 8:40 AM

Thanks for the tips!

March 19, 2010 at 11:11 PM

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

March 22, 2010 at 3:11 AM

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

April 9, 2010 at 12:31 PM

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

April 9, 2010 at 12:31 PM

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.

April 9, 2010 at 11:12 PM

@ Memória

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

April 17, 2010 at 3:06 PM

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

April 18, 2010 at 2:14 AM

end with this tag

</div>

May 19, 2010 at 5:47 PM

Thanks for the easy tutorial!

July 28, 2010 at 12:20 PM

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

what to do know..

July 29, 2010 at 1:17 AM

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

July 29, 2010 at 6:25 AM

@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

July 29, 2010 at 7:27 AM

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

April 22, 2011 at 4:39 AM

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

July 20, 2011 at 7:29 AM

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

July 21, 2011 at 12:19 AM

just adjust these values in step 1

width: 30%

October 22, 2011 at 8:46 AM

Great love it thanks :)

October 24, 2011 at 3:41 AM

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?

October 24, 2011 at 6:35 AM

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