How to Add 3-Column Footer to a Blogger Blog
NOTE: I posted this article few years back when not much good 3-column footer blogger templates were available. But now you can find plenty of beautiful “3-column footer blogger themes” for free! I suggest you to use these new themes rather than altering your existing theme since there is a chance of error. Or of you badly need to tweak your theme, you can do the following steps!
- Go to Edit HTML page in the Blogger Layout Window
- Find the following Code:
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>
(Note:In some templates, instead of footer-wrapper you can find footer or footer-section)
- Replace the entire code from starting <div> to </div> with the Following Code:
<div id="footer">
<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;">
<b:section class="footer" id="col-bottom" preferred="yes">
</b:section>
</div>
<div style="clear:both;"/>
</div> - Then Save the Template.
You May Also Like:
Article by Shafar. About the Author: Tech Freak, Android Lover, Wordpress Addict, Social Media Junkie and the Founder of TipsBlogger.
To submit guest posts to TipsBlogger, please read the Guidelines.
62 Responsesto “How to Add 3-Column Footer to a Blogger Blog”
Leave a Reply
List of Blog Directories to Submit your Blog
Top 7 Uses for Having a Smartphone as a Mobile Broadband Modem
100+ Forums List to Engage Actively and Increase Backlinks to your Site
New 'Rich Text Signatures' from Gmail
Google Pagerank Update April 2009 – TipsBlogger got PR3!
Web Page Analyzer – Check and Optimize your WebSite Speed!
Best BuySellAds Alternative to Make Money Online and Keep Full Earnings!
Are You A Content Marketer Or Content Farm?
Nokia Lumia 800 Features, Specifications and Price
Nokia Lumia 710 Features, Specifications and Price
 |
 |
 |
 |
 |
 |
I like ur template very much..its nice to see.
thanks very much!I’ve have done successfully..
Thanks man.
Hi, there’s another simple way to remove this navbar at mine ! (http://www.themondey.info/2008/12/easy-way-to-hide-or-remove-navbar_10.html)Merry Christmas and Happy New Year Everybody !!Merry Christmas and Happy New Year Everybody !!
I had tried different tutorial to convert my blog’s footer to a 3 column footer with no luck…so far.Thank you!
Hey, dude, Your advice works perfectly! I wish everybody write such compact and REALLY WORKING advices as You do, man! Definitely would come to browse Your web again…Maybe to do small shopping as well
Good luck!
It only worked when I replaced only the b section line, but hey, it still got the job done!Thanks man!
Thanks for this simple code for a footer. Wow.
tHANKS for this wonderfull tip.. Worked like heaven man.. Simple Simple & the best on the web…. watch it in action @ my Blog
AWESOME! Thanks a lot for this!!! works like a charm! A thousand thanks to you!
Consider highlighting admin comments. Let visitors know you are active.. & thanks for dropping at my blog
@Srinivas
Thanks for your suggestion. Will do it soon!
@Advertise online
Yes you have to replace the entire code of current footer section from <div> to </div>(Don’t forget to back-up your template and preview the changes before saving!)
Pls help me it not works for my blog, pls introduce step by step clear for meTks
i must replace this all code in your step 2 or not, pls help me. tks
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.Sarahhttp://adoptpet.info
Hey, I have tried, and it works beatufully. Thank you so very much. Check it out pls visit me in Malaysia at http://sinarhairan.blogspot.com/
This is very good. My web blog: ulesson.blogspot.com
Nice tutorial! Finally i could install it
Thanks Bro http://hifidownloads.blogspot.com/
Thanks lot it is working on my blog
I have made one blog post about this tutorial. Hope you like it.
@moonheart
Hi, thanks for the post and link to TipsBlogger! Happy Blogging!
i’m having trouble with this one, hm …
NIce post thank you
http://www.staffingpower.com
Thank you so much! I tried other tutorials but only this one worked from the first try! XD
thank you again for this wonderful tutorial.
Thanks for your wonderful posts. We have come up with a list of most helpful sites and included your blog there.
http://lists2day.blogspot.com/2010/01/10-most-helpful-sites-for-bloggers.html
@lists2day
Many thanks for including TipsBlogger in that list!
Regards..
Hello! I see everywhere explanations for 3-column and 4-column footers. But do you have an idea, how to add a 2-column footer to my BLOGGER blog? Thanks in advance…
@Guest
Just use Blogger Draft, you can customize the template very easily! Take a look:
http://www.tipsblogger.com/2010/03/customize-blogger-template-easily-and.html
Thank you so much for this Tip. Working perfectly!
Wow. It worked perfectly! Thank you.
Thanks for the code that just works! I tried a number of sites, but I'm grateful for your simple instructions.
tnanks
I have done this before and I like it, so I am going to try it on my new template.
Thanks,
Brian M. Connole
http://www.i-blogger.info
http://www.hcg411.info
Very easy and efficient. I used your example to create 4 columns. Thanks!
I tried this, and got the following error:
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: Open quote is expected for attribute “{1}” associated with an element type “id”.
@Shirleytwofeathers
Thanks for letting me know. Please try now. It's working fine..
Hi! I tried this, and after driving myself crazy all day yesterday trying to do the 3 column footer, yours worked perfectly – thanks SO much, you are very appreciated!!!
Hi
I’ve added this to my blog. I need to remove this for a few moments to try something out. I’ve tried to delete it and replace it with the code at the start of your tutorial but it won’t let me save that version of my template telling me that something is wrong. Any idea how to remove it? I’ve had to resort to moving my widgets to my sidebar for the time being.
Please help!
Thanks
@A Thrifty Mrs
I found that you are using this template:
http://www.templates-blogger.com/minima-stretch/
-Just download the template from above site
-Backup your existing widgets manually(copy html/javascript codes to notepad
-Try uploading the template again
Hope that will solve.
Hi! Thanks for the guide I’ve also had this one in my blog in indonesian language, is it possible for you to visit back to my blog and leave your comment? I would very glad to get backlink from you. Thanks
Hi there!
Thanks so much for the tips. The 3-columns worked perfectly for me, but the font changed entirely and everything in the columns were in uppercase. I fixed the uppercase problem, but the font is really small.
I tried this same code with the “Simple II” layout (so that my blog posts are centred), but I couldn’t locate the “footer-wrapper” code!
I want to use the Simple II layout and add a 3-column footer at the bottom. Do you know how I can change this code to make it work?
Thanks a lot : )
xx The Little Dust Princess
@The Little Dust Princess
Hi, glad that you like this post. I posted this article 2 years back when not much good 3-column footer blogger templates were available. But now there are plenty of ready-made 3-column footer blogger themes for free. I suggest you to use these new themes rather than altering your existing theme since there is a great chance of error.
I recommend Btemplates for finding the best blogger templates or you can check some of the best magazine themes here:
http://www.tipsblogger.com/2010/05/30-best-free-magazine-style-blogger-templates/
Thanks
Thanks Bro. Its worked for me. Hats off
Thanx you bro. Very useful information.
Wow, thanks for the reply! I didn’t know it was called a “magazine theme”. I’m about to check it out.
Thank you!
Hi bros! there is a problem that code
can any body please help me in this matter.
@Rawal
Hey bro! Try it now, I made the changes. Please let me know if it’s not working.
Already had the CSS but other footer wrappers I found did not work. Always an error. Yours worked perfectly. Thank you! I just have work to do on the styling now. Bookmarking this page!! Blessings to you.
ok this is good.is there any way to put four columns instead of three?
@sam
1. Replace the first <div style="clear:both;"/> with the following:
<div id="footer5" 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;"/>
2. Make the width of other columns as 25%
Three columns look more professional and good for all kind of screen resolution. Just a suggestion from my blogging experience!
Good luck.
Excelent post. I try different solutions but this was the real solution. It works from the beginig and I was able to adapt it for my blog. http://montreal-blog.blogspot.com
Thanks for your time and clear code and instructions
i like 2 colums ,thanks
Dude thank you so much! i had to tweak it a little bit but man u r the best!!
Hi,
Thanks for this, good work. But the text under the photo is too large and doesn’t match the rest of the blog. How do I fix this, please.
Thanks in advance
Theresa
THIS is a beautiful piece of code. It works perfectly and I’ve learned a few things along the way. Sweet! Thank you.
@Theresa
I don’t know how the photo comes to this section! If the text is too large, it may be because of your template font settings.
Very Useful thanks!
Thanks for sharing nice trick.can u please explain how to add 2 column footer instead of 3
Nice tutorial. Thanks!