160 How to add three columns to your footer section
October 18, 2007 /

As you can see at the bottom of this blog, I have three columns in the footer section, followed by a wide section which I use to feature the main blog links. This style is fast becoming common in Web 2.0 style websites and blogs, and is quite easy to duplicate in Blogger templates. In this tutorial, I will explain how you can add these extra columns to your own Blogger blogs.

Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.

There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

  1. Back up your existing blog template!

    Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

    To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
  2. Move all existing widgets from the existing footer section

    In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
  3. Add extra code to your footer section.

    Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

    Now you need to find this section in your template:
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

    Replace the entire line highlighted in red with the code below: It is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
  4. Adding style for the new footer section

    Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.

    Immediately before this line, add the following lines of code:
    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }
    And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

<hr align='center' color='#5d5d54' width='90%'/>
If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.

If you would prefer to remove the line altogether, simply delete the whole line.

I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.

If you enjoyed this tutorial, please consider subscribing for future updates.

Technorati Tags: | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

160 comments:

  1. this is great Amanda !!!
    just what I have been looking for :)
    thank you :)

    ReplyDelete
  2. hi, Thanks for the post, i was looking for this all around the web, but might be my search skills are not that good and i didnt able to find this. I have visited your blog quite a some time but how the hell i didnt found this earlier.
    Thanks again.

    ReplyDelete
  3. hi again amanda, i have done the same way you have deccribe in your post,I have also added one more column. But its look like there is too much of space between 3rd and 4th column. Any idea why this is happening?

    ReplyDelete
  4. Hello Iclfan,

    I had a quick look at your blogs and noticed that there seem to be four footer columns, whereas there would normally be three, with a wide section beneath them. This seemed strange at first until I looked at the source code and realized you'd changed the width of the first three columns to make them narrower. These would usually be 30%, 40% and 30% to make up the 100% of the page width, which would then push the bottom footer section beneath them.

    There are a few ways around this, depending on the way you would like your blog to look.

    If you'd prefer to have four columns instead of three, you can change the "style" of each footer-column to have a width of "25%".

    If you'd prefer three columns instead, you could change the width dimensions back to those of the default installation (30, 40 and 30% respectively) which would push the other section beneath them again.

    Feel free to send me an email if you need more detailed help, and I can help you with the code for this.

    Best wishes,

    Amanda

    ReplyDelete
  5. Amanda,

    I REALLY like this feature. I've always felt like there are some items/widgets that I want on my blog, just not in the main area and the three footer columns are PERFECT! Thanks for adding the color to it for me. Once again you have been more than patient and helpful.

    ReplyDelete
  6. I am back again with query amanda :). As you aware that i have made 4 columns but can you please tell me how to change the font of title in sidebar and footer container?

    thanks in advance

    ReplyDelete
  7. Hello Iclfan,

    Usually you would be able to change the font and size in the "fonts and colors" section of your blogger dashboard. I took a quick look at your source code and it seems that both the sidebar and footer titles would be controlled by this variable.

    If you still have problems though, feel free to send me your template by email and I'll see what I can do to help.

    ReplyDelete
  8. great help thankyou! works a treat!

    ReplyDelete
  9. Hi, Amanda. This is just what I was looking for! I was about to give up, too.

    I have a question though. I added a link list to one of the columns, but it's come out with a disc list style. How do I get no list style as it is with sidebars?

    ReplyDelete
  10. Thanks for the help with the columns in the footer. It looks great, except that for some reason the main column of the body of the blog, which is the longest, overlaps into the footer. How can I add a margin to make sure it stays clear of the footer?

    ReplyDelete
  11. Accurate and concise directions, Amanda. I made just one change with the width variables. In your code, you list the widths of the columns as 30%/40%/30%, which resulted in a mondo middle column with two little ones on either side. I simply changed the width to 33%/34%/33% and now have nearly equal widths throughout.

    Keep up the great work. You're becoming one of the most reliable and trusted sources of information regarding Blogger hacks and add-ons.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. I really like the layout that you have put here but I cannot get the format to match my other sidebar (text/color/bullets). I fixed my previous comment and would really appreciate your help with this one...thanks!

    ReplyDelete
  14. It works and I like it so much I've spent tonight dumping my three column template to go back to the 2 columns. Finding it a bit narrow though and looking for a way to adjust that without throwing everything else out of whack. Thanks for the 3 column footer. I wanted something like this two years ago but didn't know how to do it.

    ReplyDelete
  15. Amanda, thanks so much for this footer. I finally got it right and even added a fourth column by reducing the 30% width to 25%. I haven't added any color yet but its great!

    And I think your new look is great an effective use of space and color.

    ReplyDelete
  16. Amanda...
    Thank you sooooooooo much!! :)
    It's pretty good to know there are people like you that really MAKE A DIFFERENCE - in our www !!!
    As soon as I finish customizing my blog I'll ask you to "drop by", so that you can see how much you've helped me (and how grateful I am)!!
    ~ * ~

    ReplyDelete
  17. Once again, thanks Amanda.

    ReplyDelete
  18. Thanks a lot for this awesome piece of code!!!

    Spent half-an-hour on it before i got it right!

    Thanks again! :)

    ReplyDelete
  19. Hi amanda,
    i got error messages...

    We were unable to save your template
    Please correct the error below, and submit your template again.
    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 "

    was wrong,..?
    Thanks...

    ReplyDelete
  20. Hello Ivan,

    It seems you may not have copied all of the code from the code box correctly as this would result in the error you described.

    The easiest way to copy the code is to put your cursor inside the box, then click CTRL+A (to highlight all of the text) followed by CTRL+C to copy this to your clipboard.

    Then you can paste this code in place of the footer DIV as explained in the post.

    Let me know if this works out better for you :)

    Best wishes,

    Amanda

    ReplyDelete
  21. How do I change the fonts and colors of the widgets in the footer? They don't show up in the Fonts and Colors section...

    ReplyDelete
  22. hai amanda,,...
    I did like that,..
    but still erorr messages "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 "

    what can i do to fix it,..?
    thx,...
    GBU

    ReplyDelete
  23. hai amanda,..
    me again,.. :D
    I was successful post the code...
    i must delete my widget before,..
    it`s work...

    thank`s
    GOd Bless U.

    ReplyDelete
  24. thank you so much for all your work! this is a fabulous feature and so easy to implement...
    thanks!

    ReplyDelete
  25. How can I add a 3 column footer section to the blogger template "Tekka" because there appears to be no

    'footer-wrapper' section

    I tried to add one but with no luck.

    Thanks,

    Buck
    http://www.conservationreport.com/

    ReplyDelete
  26. OMg, thanks for this tutorial .. greeting from Indonesia Amanda :-)

    - Halfian -
    http://mymotivation.blogspot.com

    ReplyDelete
  27. How do you make the footer look like yours with three seperate footers? On my blog there is just one long color strip with three sections in it.

    ReplyDelete
  28. hi this is Gagan,

    actually i was reading this post of urs http://www.bloggerbuster.com/2007/10/how-to-add-three-columns-to-your-footer.html on how to add 3 colomn to footer.

    I tried this thing but i want 3 colomn like you have,colmns having round borders and a separate background !! I want to addd background color to 3 colomns in footer..

    here is my dummy blog

    http://dummyblog1-gagan.blogspot.com

    waiting 4 a +ve reply !!

    ReplyDelete
  29. Hi!

    I have the same probles as Gagan!
    I want to 3 columns with round borders and background color!! Some help please!

    www.loltuga.info

    ReplyDelete
  30. Dear Amanda,
    Thank you so much for all your great tips and help for new bloggers like me. I did this one and it's great! Take a look at my blog. It is still work in progress as I am improving it one step at at time so you'll find dummy postings here. But see what I have done and thanks again.


    http://abloggersnook.blogspot.com

    ReplyDelete
  31. Hi, thanks for the trick, i have done it on my blog, but instead of footer its near header and with 4 column. Its look beautiful with the adsense.

    movie-sutra.blgspot.com

    ReplyDelete
  32. Did anyone figure out how to add color to the 3 column footer, yet? .....Like Amanda has on her home page?

    ReplyDelete
  33. perfect easy to follow Thanks!

    ReplyDelete
  34. Hello Amanda.

    The code supposed to be written in red has disappeared and is, now, replaced by "Service Temporarily Unavailable".

    Congrats on the new design. Looks purrrfect! :-)

    Wilmaryad Ben O'Scallas,
    http://cruciblecrucified.blogspot.com/

    ReplyDelete
  35. how about a three column page. a post and two sidebar. post, sidebar,sidebar or sidebar,post,sidebar. :D

    ReplyDelete
  36. how about how to add a page element below the header

    ReplyDelete
  37. amanda I need your Help. I am unable to remove --> from the top of my blog.What should i do?I will be waiting for your answer.

    ReplyDelete
  38. Hi Amanda!

    Thank you so much for this tutorial! I've been all over and this is the only clear instruction there is! you rock! keep those tutorials coming, and thank you so much for helping us bloggers :-)

    xoxo

    ReplyDelete
  39. Hi Amanda,

    thanks for your great post.

    i want 3 colomn like you have,colmns having round borders and a separate background.

    Please help to have this.

    ReplyDelete
  40. Amanda,

    I want to thank you for all your great tuts that you have written. With your tweeks my site is looking more like a website rather than a blog. I love the way you explain things, simple and easy to understand. Blogger Buster is the first stop I make for the latest in blogger tweeks, tutorials and news. Keep up the great work and I thank you for the three column footer it looks great.

    ReplyDelete
  41. Hi Amanda, thank you so much for this information, i've been looking for it all over the web, am still editing it though...but just wanted to know...how did you arrange all of the footer elements in this order, because i just can't get them to be this tidy...hehehehe, and how did you get that kind of mybloglog recent reader widget? i mean without the border and those stuff...plus i'll really appreciate if you could give me a little advice for my blog.

    Thanks in advance

    ReplyDelete
  42. how do we customize these 3 footer widgets?

    ReplyDelete
  43. this is a great hack! thanks for sharing! =)

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. hey can you tell how to add three columns to footer tabs,like you have done....ie bottommost part.I tried your trick,but it adds three columns just below the atom link.When we new widgets ,the post column stretches down,which doesnt liik good..in my template there is option to add widgets in footer tabs but it is a single column not three column...you can see it here http://pkmumbai.blogspot.com
    please tell me how to convert it into 3 columns

    ReplyDelete
  46. Service Temporarily Unavailable
    The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.
    Apache/1.3.33 Server at bloggerbuster.com Port 80

    ReplyDelete
  47. Amanda I need to add this to my blog and I get this message "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 "

    Please help me. I am real aggravated that everytime I try to add something I get messages like that and I can't figure out where the closing tags are suppose to go.

    I did CTRL A and CTRL C and pasted it.

    Thanks

    ReplyDelete
  48. This is driving me nuts, too. I keep getting that same error message. I'm not sure if this has to do with the newest version of Blogger. I just want to use this hack to modify the Minima Black template. Please let us know what we are doing wrong.

    ReplyDelete
  49. Guys for those of you who can't see the rest of the code because of server problem, i've brought back the hack on my website
    http://www.technologypublic.com/2008/09/adding-three-column-footer-to-blogger.html

    As for the template problem, "Sandra & Tiffany" it could be that some of your html codes are not well closed check back with your html template.

    ReplyDelete
  50. This is the error I get after adding the code from here!

    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 "

    Please help!

    ReplyDelete
  51. This excellent, worked fine for me.
    I am really new to this, but I would like to change the line thickness to thinner line, what can I do? Anna :)

    ReplyDelete
  52. Help me i m doing everything as per as explained in post and everything is working fine.....

    http://netbks.blogspot.com/

    but when i m adding gtalk in my footer it expands from the image but i want that google talk is come i want to gtalk come in footer image any trick to expands footer image by css coding ??

    Thanks

    ReplyDelete
  53. Hi Amanda! Thanks for this hack!
    But I have a problem: all text that I put into the new footer columns is displayed in capital letters.
    What's wrong?

    ReplyDelete
  54. Thanks Amanda.. You've been a great help again to my new blogs. More power to you.

    ReplyDelete
  55. Rock on - works great. And thanks to DanielPK, as I was getting the error code, too.

    ReplyDelete
  56. I cant do this... I removed the widget and all but it says < /div > is missing

    ReplyDelete
  57. thanks for this! anyway i have a question, when i put a widget in the left footer, it shows up in the blog in the leftmost portion of the page, way past the left margin for the posts and header. is there any way i can make it align to the left margin (and also the right footer to the right margin)? here's my blog for reference:

    http://acompoundaday.blogspot.com/

    thank you! :)

    ReplyDelete
  58. could you make a three columns for the header too.. some professional bloggers use them I don't know if they use blogger but i think you can make it .thanks eg http://www.carlocab.com/

    ReplyDelete
  59. Help! I can get through step 3, and then step 4 never seems to work! Can you give me a visual on what it should look like in front of the /b:skin?

    ReplyDelete
  60. hi Amanda,

    I've been visiting your site every now and applied some of your tutorial.

    I have problem with this one though. I have tried several times since weeks ago to fix it without success. How do I change the background color and font size to this section. I have tried via font and color in the lay out but is not working.

    Please help.

    Thank you

    ReplyDelete
  61. Great hack. How do I adjust the thickness of the separator line please?

    ReplyDelete
  62. I can not find b:section class='footer' id='footer' please help

    ReplyDelete
  63. And how can I change the width of each column?

    ReplyDelete
  64. I get the broken code thing that won't let me save the template too. But it's always some little glitchy thing. If you poke around with the template long enough you will find it and then suddenly it works.

    ReplyDelete
  65. Thanks for the tips,.. i just make it,.. and ist work,.

    ReplyDelete
  66. Hi Amanda, I'd love to add the 3 column footer to my blog, but the code that's supposed to be in the box has been repaced by:
    Service Temporarily Unavailable
    The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.
    Apache/1.3.33 Server at bloggerbuster.com Port 80
    Could you let me know when it's back?
    Thank you,

    ReplyDelete
  67. Greetings Amanda, Happy Holidays

    Thank you your site has been a big inspiration and help in me modding my site. For some reason I can't get the your most important tutorial to me:) to function properly. Here's the error message I keep getting. Appreciate your help>

    Please correct the error below, and submit your template again.
    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 "p" must be terminated by the matching end-tag "".

    Justin http://cutstapleandfoldmedia.blogspot.com/

    ReplyDelete
  68. Amanda, do you know if this would look nice with Minyx 2.0 template for Blogger?

    ReplyDelete
  69. Amanda Help!! I want to add this to my blog but I get the following message:

    We were unable to save your template
    Please correct the error below, and submit your template again.
    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 "
    ".

    I did the Cont A and Cont V to copy but I still get the message. Any ideas?
    giasmom@gmail.com

    ReplyDelete
  70. Thanks so much! This was very helpful!!!

    ReplyDelete
  71. i m trying this hack right now in blogger-godown.blogspot.com, thanks in advance... lets see ... i will say thanks again if it works in my template....

    ReplyDelete
  72. Hi Amanda...


    I Have a problem... When I tried to paste that code..

    Blogger respond's was :

    More than one widget was found..The Id of widget must be unique..

    Can You help me ?


    Thanks before..

    ReplyDelete
  73. Hi amanda,

    I followed your instrucions, and now I have a three column footer! but there's one problem...
    (I use a modified version of Denim template btw)
    The collumns were stretching out my widgets and I have corrected that, but now all the collumns are centered left. You can see it at my blog if you search for featuredweb on blogspot. Can you help me please? Thanks in advance :D

    Dennis

    ReplyDelete
  74. Hi it's me again,
    I would like to add to my question, the collumns aren't aligned on the left side but rather all three stretch across the page, whereas I would like them to only cover the width of the content, if you get what I'm saying.

    Thanks,

    ReplyDelete
  75. Quick Question -

    I have the widget in a working, however, now I want to edit the style of the text,etc. What elements are used to style this widget, or would they be new/custom tags? Thanks.

    Mike

    ReplyDelete
  76. thanks infonya... lagi butuh bgt nih...

    ReplyDelete
  77. just change the ID for example:

    - HTML4 to HTML5
    - HTML6 to HTML20

    Hope this helps ^_^

    ReplyDelete
  78. @Titisan Dewa

    simply change the widget's id with different numbers. ex : there are widget1 and widget1, change one of them, so there are widget100 and widget1

    cmiiw

    --

    @Amanda

    i've succeed aplied this hack but then i got some problems, the space between the 3 footer column with the lower footer section is just too big. can you/someone help me how to fix it?

    this my dummny blog's url : http://jempolkebo.blogspot.com/

    ReplyDelete
  79. Great work as usual Amanda!!

    ReplyDelete
  80. Hi...Thank you so much for sharing this very nice idea...i tried adding it on my layout and i was really satisfied with the result...happy day! and more blessing to you....you ish a gift to everyone...-smiles-

    ReplyDelete
  81. great post:) i've made a slight modification in my blog

    ReplyDelete
  82. Amanda!!

    You don't know how much you just helped me. It works like magic in my test blog. I'll soon implement it in my blog soon. Thanks.

    ReplyDelete
  83. Thank you amanda...i have try it, but a little change from above code.

    ReplyDelete
  84. Really very very nice site
    also visit www.crackznhackz.blogspot.com

    ReplyDelete
  85. Hi Amanda,

    I would like to try this one but I cannot see the image in item no. 3 showing the codes.

    Hope you can fix this. Thanks for this wonderful tutorial.

    ReplyDelete
  86. Finally, i managed to success doing this tutorial ^_^

    ReplyDelete
  87. how can i change its background colour of our footer . Like you have put your bg colour as brown.
    any idea . my blog url is idea-for-u.blogspot.com

    ReplyDelete
  88. ohhh Amanda, the 3th step is out (Service Temporarily Unavailable)

    ReplyDelete
  89. WOW, Amanda You are Amazing, Really you are great.

    BUT, Unfortunately, I was not able to add it.

    I tried a lot to do it. and every time it tells me:
    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 "

    And;

    I don't have any widgets in the footer section.
    I Selected All the code by using "Ctrl + A"
    And Copied It By "Ctrl + C"
    Also Past It By "Ctrl + V"

    Hope You Help me Amanda
    And Thanks So So So Much.

    ReplyDelete
  90. GREAT POST AMANDA WAS REALLY USE FOR ME
    BUT HOW CAN I ADD SOME COLOR TO THIS?

    ReplyDelete
  91. thanks. i did it at last. informative unlike other post. thanks. http://classicalentertainment.blogspot.com see the result.

    ReplyDelete
  92. And... how can we do this to the header? Ex, like this template of FalconHive:
    http://falconhive.com/2009/04/blogger-template-business-talk/

    ReplyDelete
  93. The labels after each post disappeared even if I clicked it on the blog posts. The labels are still in my sidebar though. I think it has something to do with the 3-column footer. Please help! Thanks.

    ReplyDelete
  94. Is it possible to do this for the header?

    ReplyDelete
  95. the 3th step is out (Service Temporarily Unavailable)!!T_____T
    D:

    ReplyDelete
  96. omg it worked perfectly!!!!!!! now Im off to figure out how to add an image background to my footer.

    ReplyDelete
  97. Hi Amanda,
    Me again! Have just read through these comments and was wondering if the 3 column code can be used to make 2 columns for widgets by changing the percentage to 50% and 50%, forcing the last column to drop below? If not, is there another way to get a 2 column footer?

    ReplyDelete
  98. Hi again Amanda, I had a go at splitting the percentage between footer 2 and footer 3, and it works a treat, footer 4 has been pushed to the bottom, and photos/widgets are centered in f4, which is an added bonus!
    Just want to say a big thank you for all the cool tips your site has provided me in the last month or so, this is my first attempt at building a blog and editing HTML, and although it still needs some work (too many ads), I'm more than happy with the results, would love your opinion if you have time?
    Thanks again,
    David http://toptravelgear.blogspot.com/

    ReplyDelete
  99. U r just awsome......................U R BLOGGER GODDESSSSSSSSSSSSSSSS>>>>>>>>>>>

    ReplyDelete
  100. you fu@*ing ROCK! Thanks for all these awesome posts!

    ReplyDelete
  101. thanks...it's fantastic :D

    ReplyDelete
  102. how to add color in the 3 colounm footer

    ReplyDelete
  103. Thanks for the tutorial :)
    I've a widgeted footer too..

    ReplyDelete
  104. you are the greek Goddess of awesome! thank you very much!! love all your latest templates as well :))

    ReplyDelete
  105. Thanks for the tutorial, thats so nice, now my footer is 3 coloumns

    ReplyDelete
  106. Thanks.I am going to implement this soon.If I want to add two columns instead of three,what should be changed or modified ?
    cnetworld.blogspot.com

    ReplyDelete
  107. Hi Amanda!

    Thanks for your post. It has helped me quite a lot.

    I am trying to setup a about six columns of ten hyperlinks per column going across the bottom of the page. I tried doing that with your code by inserting more div columns, but they were getting squished. So eventually, I settled on 2 columns with the correct spacing and padding. Is there a any way of copying the two columns twice to get the six?

    Thanks in advance.

    ReplyDelete
  108. nice work but i want to add a background please help me

    ReplyDelete
  109. thanks
    how to divide html widget like footer

    ReplyDelete
  110. Thank you very much ...nice post ...

    ReplyDelete
  111. doesn't work with me :( check out http://dunkdaft.blogspot.com whts wrong with the template?

    p.s. please change comment layout to popup version.

    ReplyDelete
  112. Finally i've found what i've been looking for in a long time.
    Infortunately, the code page is offline.
    Is it really temporary?
    I would like very much to try it as soon as i can.
    Thanks

    (great, great blog, Congrats!)

    ReplyDelete
  113. thank for sharing

    visit: http://www.best4share.com

    ReplyDelete
  114. Thank you so much Amanda,That was what i looking for!

    ReplyDelete
  115. Hi Amanda!
    Thank you very much for this tutorial it worked perfectly fine for me.
    This question is quite popular here, could you or anyone else tell us if its possible to add a background image to the complete footer section???

    ReplyDelete
  116. Hey thanks for the tip. i have used this tip in my blog for central govt employees News But I want a border for this footer also. how can i do it..

    ReplyDelete
  117. Great Info !!

    Hey can u tell me one more thing ? how to add color to the footer and border also..

    ReplyDelete
  118. Awesome, this works perfectly! Thanks.

    ReplyDelete
  119. Did anyone figure out how to have a footer like Amanda's? The entire section that's made up of 3 containers and then a bottom one under them, has a solid background color-

    anyone know how this is done?

    ReplyDelete
  120. thanks it works
    See mine milahelp.blogspot.com

    ReplyDelete
  121. Thanks for this tip, I used it before and had it bookmarked for reference. Unfortunately today one of the images is missing - I'm getting an error message right below "
    Replace the entire line highlighted in red with the code below: " so I can't see what I'm supposed to replace. Can you check that out?

    ReplyDelete
  122. Amanda,
    I have a question in this regard or i should say a problem. coding is nicely executed. i have got the 3 column footer. But the as the middle (40%) footer element if floating on left, problem occurs when assigning colour to the elements.left footer element and middle footer element is appearing together with no gap between them and unlike right footer element.I would like to place the middle footer element in the center of the footer columns.Can you help?

    ReplyDelete
  123. Can anyone post the code which is missing

    ReplyDelete
  124. for some reason, I keep getting three columns stacked on top of each other, not in sections...anyone know why?

    ReplyDelete
  125. the codes are not showing in your post..

    ReplyDelete
  126. Amanda the code is google error can you help to fix it amanda thanks :D

    ReplyDelete
  127. There is a code that's missing.

    ReplyDelete
  128. Hi, can you please tell me what to do now that my template doesn't contain code?

    My template is a custom template made by a web developer.

    How do I add 3 column footer on my template?Please help me. Thank you so much.

    ReplyDelete
  129. Sorry, the message I posted doesn't displayed complete text of my comment.

    Between words "contain" and "code" is the code highlighted in red you said we must look for first in our template. Thanks again for helping me.

    ReplyDelete
  130. code not displayed..........mam..............same prob.............

    ReplyDelete
  131. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  132. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  133. stupid way to explain such a complicated process.. killed my time and still i was unable to add footer. not a useful story.

    ReplyDelete
  134. Thank so much for share the tutorial above, it very useful.

    ReplyDelete
  135. the blog is interesting! thanks for sharing this useful info

    ReplyDelete
  136. Hi,

    We made three coloumn footer in our website by using CSS + HTML tags. I liked the idea that you gave, as it is going to save a lot of time. We did it with a lot of time spent & a lot of hard work. But your way is much easier.

    Thanks dear for sharing.

    ReplyDelete
  137. Hello,

    I must admit this is one great insight. It surely gives a company the opportunity to get in on a lawn floor and really be a part of creating something special and tailored for their needs.

    Regards

    ReplyDelete
  138. Plz help your code is not showing ,,, error

    web: h4ck3rcracks.blogspot.com

    ReplyDelete
    Replies
    1. Done with it from mbt blog ,well no need to worry now!!


      webs,
      hacks: Xulfi Hacks
      Tools with Cracks: H4ck3r Cracks

      Delete
  139. Hello,

    I don't know specifically what changes I made to my template but the issue I mentioned before is no longer an issue o.O and ^_^.

    I have a question though. What if I only wanted to add two more footer columns instead of three? What changes to your code would I need to do? Thanks! And again awesome tutorial :)
    ---------------
    Abacus

    ReplyDelete
  140. Thank you very much on your pleasant pointers you’ve shared on this page.

    Please visit:
    medical billing services in Atlanta
    The best billing software for medical professionals

    ReplyDelete
  141. thanks for your update, it helped my blog http://www.howtouncle.com/ very much. superb share...!!

    ReplyDelete
  142. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  143. I’m impressed. Very informative and trustworthy blog does exactly what it sets out to do. I’ll bookmark your weblog for future use.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy