How To Add a Three Column Blog Footer

Finding it hard to add widgets to your blog without overstuffing the sidebar? Ahh well, maybe it’s time to add a footer to your blog. This tutorial will show you how to do just that -install a three-column footer.three-column footer 2

  1. Login to your Blogger account (if you haven't done so already). 
  2. Go to Template > Edit HTML.
  3. Back up your template.
  4. Look for the existing footer code near the end of your HTML. It might look something like this:
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    if you already have contents in the footer, the code should be longer.
  5. Copy and paste the code below immediately under the footer </div>. This code will create 3 new gadget containers (one for each column) under the existing footer container.
    <!-- three column footer HTML Start by -->
    <div id='new-footer-wrapper'>
    <div id='column1-wrapper'> 
    <b:section class='new-footer' id='new-footer1' preferred='yes'/>
    <div id='column2-wrapper'> 
    <b:section class='new-footer' id='new-footer2' preferred='yes'/>
    <div id='column3-wrapper'> 
    <b:section class='new-footer' id='new-footer3' preferred='yes'/>
    <div style='clear: both;'/>
    <!-- three column footer HTML End -->
  6. Copy the code below and paste it in CSS section, before ]]></b:skin>.
    /* three column footer CSS Start by */
    #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;} 
    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}  
    .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;} 
    .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
    .new-footer .widget-content { padding: 0px 5px 5px 5px; } 
    .new-footer ul { list-style-type:square; margin-left:15px; }
    /* three column footer CSS End by */
  7. Save the template and go to Layout. You should have the 3 empty footer containers added at the bottom of the layout. footer container
  8. You can now drag and drop the gadgets from the existing footer or sidebars into the new footer containers. The end result should look something like this. three column footer
  9. If the columns are not distributed evenly, try adjusting the width in line 3 and right margin in line 5 of CSS code (in step 6).
  10. Once satisfied with the result, if you want you can go back to the old footer code in step 4 and delete it (from <div until </div>).


47 comments to "How To Add a Three Column Blog Footer"

Termite information October 30, 2009 at 1:46 PM    

I had not try it ever its new for me. I wanna have a look at it.

herroyalbleakness October 31, 2009 at 4:02 AM    

this is great! ive always wondered how they do footers that looked like this. this is a big help!

Greenlava October 31, 2009 at 9:47 PM    

I'm most glad Your Royal Bleakness like it :)

mytheory November 1, 2009 at 11:15 PM    

so this can be applied in any template right?
if i have some time, i would like to give it a try
one question
does it slow down the page load time?

Greenlava November 2, 2009 at 9:46 AM    

It should work on any Layout templates, just make sure the code is placed immediately before or after the existing footer division.
No it won't slow down the loading time, but then again, it depends on the gadgets you put into it.

mytheory November 2, 2009 at 7:18 PM    

Great then!
maybe i'll try this one out next saturday or sunday.
Thanks for the tips :)

Miss Kayla November 3, 2009 at 8:53 AM    

got an error message when i tried adding the code :(

Greenlava November 4, 2009 at 12:03 AM    

Miss Kayla,
Care to elaborate?

moonstar November 10, 2009 at 1:22 AM    

i already installed by my problem is , my sidebar picture and background color was gone, what shall i do with it, thanks.

Greenlava November 10, 2009 at 5:19 PM    

I took a look at your blog and couldn't find the problem. Could you be more specific?

Honestly I'd start from scratch with a clean start in the code. Start simple and slowly build it up. Take the time to learn it yourself completely - it's worth it in the long run.

Greenlava November 16, 2009 at 1:15 AM    

Argentum Vulgaris,
Your blog template has a footer section. Find div id='footer' line and place the HTML code in step 5 on top of it. For one column footer just take line 1~5 and 14~16.
For CSS (step 6), in line 2 and 3 set the width to 100%.

Anonymous,  November 16, 2009 at 1:55 AM    

I am getting an error "body" element is not closed, but it is. It is in the same place, I haven't touched it.

I followed your instructions exactly.


Anonymous,  November 16, 2009 at 2:39 AM    

I just tried without modifying the html and get the same msg.


Greenlava November 16, 2009 at 12:21 PM    

Argentum Vulgaris,
That's weird. Just to make sure, I've downloaded Jeans template, applied it to my test blog and inserted the code. Went smoothly, no problem.
If you want, I can email it to you.

Anonymous,  November 16, 2009 at 6:55 PM    

Okay, now it's working, I'll try to convert to one column and keep in touch.


Anonymous,  November 16, 2009 at 7:15 PM    

Great, got it going perfectly, now to change it to the style of the jeans.

Thanks, any tips there would be a help. :-)


Anonymous,  November 16, 2009 at 10:07 PM    

Greenlava, thanks for all your help. Got it pretty much the way I want it. Now to tackle the next blog.


Greenlava November 16, 2009 at 11:32 PM    

Argentum Vulgaris,
Glad it worked out.

Anonymous,  November 30, 2009 at 4:22 PM    

how to make three column of body?

Greenlava November 30, 2009 at 5:43 PM    

Read Adding a column (sidebar) to Blogger template

Brian December 15, 2009 at 10:53 AM    

I was trying to use this on the BizFresh Template, but it didn't look right! But it worked for my other blog. Thanks!

commercial cleaning December 16, 2009 at 1:53 AM    

Is there a widget that can display my latest 5 Blogger posts that can be used on a different website?

Greenlava December 16, 2009 at 5:56 PM    

You're welcome.

commercial cleaning,
Burn your blog feed with FeedBurner, then use Buzzboost.

Unknown December 27, 2009 at 10:28 AM    

How to change font color on this 3 column footer?

Greenlava December 27, 2009 at 6:47 PM    

Just add color: COLORCODE; before the closing brace in line 2. Replace COLORCODE with the colorcode of your choice.

Anonymous,  January 19, 2010 at 11:30 PM    

Hi I thankyou for the help regarding the navidation menu bar .Now i was trying to install three column footer however i get an error msg as xml error msg and it was unable to save the temp.

Greenlava January 20, 2010 at 12:08 AM    

Could you paste the msg here.

Vikachew January 20, 2010 at 2:32 PM    

wow thanks alot Greenlava, it's always been frustrating for me in figuring out how to add sections on blogger...

Jason February 8, 2010 at 5:30 PM    

I tried this code but it appeared as 3 rows not columns. I can't seem to figure out what is the problem.

BioGal July 16, 2010 at 5:55 PM    

Me, too! I have three 'add gadget' rows not columns :(

Greenlava, could you please advise?

Many thanks.

Greenlava July 16, 2010 at 9:27 PM    

Looks good from here.

BioGal July 16, 2010 at 11:24 PM    

Yes, I was being an idiot - it is just fine. Thanks very much!

Unknown September 18, 2010 at 4:02 PM    

Hi there, I do not know what happened but I ended up with three horizontal foot containers, one on top of the other.

When I added the gadgets, the width was correct but they were piled one on top of the other.

So sorry for being clueless. Would advise your help.

I am using stitchpress.

Thanks and have a great weekend!


Greenlava September 18, 2010 at 9:09 PM    

Looks fine from here.

Bogdan Bratu October 26, 2010 at 10:38 PM    

hey,,,i have a 2 column blogger...without a footer...and i would like to add only one column in the footer...i want to do this so i cand add a text widget for you think u can help me out?

Bogdan Bratu October 26, 2010 at 10:39 PM    

the blog is

Greenlava October 27, 2010 at 12:21 AM    

@Boby Bratu
In the code in step 5, remove line 6 until 13.
In step 6 line 3, change the width from 33% to 98%.
Good luck

Bogdan Bratu October 27, 2010 at 12:45 AM    

10x ... it worked...i had to make some more modifications but it worked...10x alot

Admin November 4, 2010 at 12:24 AM    

thanks man it worked on my blog :)

wisdom-seeker November 18, 2010 at 6:11 PM    

Thanks a lot for this lesson , I applied it in my blog and it worked great .

Pop December 10, 2010 at 5:50 PM    

Hello, I did it all and now the footer is detached from the body of my blog. Now I am in a fix, lol!! I have done SO much with all of your other stuff and I am really enjoying the stuff you have here. The site is brilliant!

Samy Souhail June 11, 2011 at 12:23 AM    

#____Thank You So Much It Work 100" Thanks Again

Esther January 5, 2012 at 3:27 AM    

Hi, I am getting the same problem as some people above, where the gadgets are still in rows one on top of the other instead of 3 columns. blog is:

Greenlava January 5, 2012 at 11:56 PM    

Right now you're putting all three widgets in column no.1. You should've put one widget per column i.e one widget per Add-A-Gadget.

sukualam December 9, 2012 at 10:00 PM    

thank you very much!

The Activity Mom August 27, 2013 at 2:00 AM    

Woooohoooo it worked! Thank you so much!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.