Tuesday, September 8, 2009

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

Convert your Blogger footer to a 3 column footer

How to Add a 3 Column Footer to Blogger

  1. Log in to Blogger if not already logged in

  2. Navigate to Layout > Page Elements

  3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes

  4. Navigate to Layout > Edit HTML

  5. Back up your template as a precaution by downloading it to your computer

  6. Find the following section in your Blogger template

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

    If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.

  7. To Add a 3 Column Footer to Blogger
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' 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='footer2' 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='footer3' 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;'/>
    </div>

    To Add a 3 Column Footer to Blogger with a Lower Footer Section
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' 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='footer2' 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='footer3' 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/>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>

    Add 3 column footer to Blogger with a lower section
    To Add a 4 Column Footer to Blogger
    Replace all the code located in Step 6 with the following

    <div id='footer-columns'>
    <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>

    Convert Blogger Footer to a 4 Column Footer

  8. Save changes to your Blogger template.

  9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.

  10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.

  11. Click View Blog to admire your new footer section

Tips and Troubleshooting

  1. To Add Padding Between Footer Columns in Blogger
    To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

    #footer-columns {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }

  2. To Add a Border to the 3 or 4 Column Blogger Footer

    • For Top Border Only of the 3 or 4 Column Footer
      Paste the following code before the </b:skin> tag

      #footer-columns{
      border-top:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example


      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;
      }

    • For a Box Border Around the 3 or 4 Column Footer

      #footer-columns{
      border:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example

      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;
      }


In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck!

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Customize Blogger Tips



Subscribe to Blog Know How by Email

27 comments:

Arbitrage Conspiracy said...

to add 3 column in your footer is kind of complicated but if you know the right mix of html and css, coding the template is fun.

The Wizz said...

Glad you are having fun with your template Arbitrage Conspiracy. Blogger is great isn't it? Thanks for stopping by.

smsformobile said...

hiiiiiiiiiii man good work it worked on my blog


www.smsformobile.blogspot.com

The Wizz said...

I see you have had some fun with the footer smsformobile. Good on you!

. said...

I've been trying to find this tutorial for more than 2 months! THANK YOU SO MUCH this one is so simple and it worked out perfectly for me!!!!!! You're aw!

www.hobbychic.blogspot.com

The Wizz said...

Hope you will call back again when next you need help hobbychic. Cool blog by the way!

Manish Ahuja said...

I must have checked at least 5-6 sources before I came across this link. It works perfectly and is FLAWLESS.

The Wizz said...

That's great Manish. Hope you will call back here first when next you need Blogger help

Reju said...

Thanks a lot for this great post.

Just checkout

http://techmasterguide.blogspot.com

For Latest Tech Articles & News, Games, Computer Tips and Tricks, PC Problems Troubleshooting, Gadgets, Templates, Mobile, Software, Utilities, Windows, Outlook & Exchange Server, Networking and many more...

Su-zen said...

i haven't been able to insert the code successfully. :( every time i try this pops up;

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "

HELP.

http://suzenlim.blogspot.com

Su-zen said...

oh i've managed to insert the code! THANK YOU SO MUCH! :D

The Wizz said...

Thanks for visiting Reju

The Wizz said...

Su-zen great to hear you now have the code working. Good stuff!

Kepler said...

Thank you very much for the information.

C.McKane said...

Thank you. Yours was the only one that worked for me! I'll play around with this on my testing site for now.

Carl Burke said...

Great job, You could not have made it any easier, thanks. Carl Burke

shirleytwofeathers said...

Awesome! It's the only tutorial I found that actually worked!

Nguyen Huynh said...

Thank you very much. I will test :)

Sheila said...

I tried several other sites and coding to add three column footer with no success. Yours worked beautifully! Thank You!

Del Glamiva said...

Oh my lord thank you sooo much for this post!! I've been trying like...3...4..oh god knows how many already. Thank you so much! Oh for your info, my layout didn't have that footer-wrapper or anything like that. I tried to just paste the 3 column code lower part of my template and it worked!

I've made a post about it and credited your post here. =)
http://glamiva.blogspot.com/2010/12/create-3-columns-in-footer-for-blogger_06.html

Cheats S30SCI Movie said...

Thanks sharing tutorial in your post..

Shirley E Hardy said...

Thanks for the tutorial. I tweaked your code a bit and created a 5 column footer in a template I'm designing. I had a few problems with the template I am using but finally got it working. Check it out if you like at http://sleekgrayufo.blogspot.com
Thanks so much for sharing. It saved me lots of time searching for the right code. You're fantastic. Keep up the excellent work!
Shirley Hardy

T.S.A said...

Thanks ! for the tutorial.

ceejay@ mtn free downloading cheat said...

with your help sire, i have added three column footer to this blogs.
download free online

Nigeria entertainment News Online

just want to say a big thanks.

Henry said...

Good heads up! Always clear floats to avoid page disaster :)

Gilbert Canda said...

Great work, i got it. Thanks i found this page. Keep it up.

m3vrs said...

quiet impressive

Post a Comment