Creating A 3 Column Footer In Blogger Template
I introduce Rajeev Edmonds, a Blogger maestro who will be writing regular tutorials on using the Blogger platform. Here’s one for our Blogger bloggers 
In the last few years blog templates have transformed from a simple diary to a full fledged template having all the features of a website as well as a weblog. In recent years we can see the trend of 3 column footer templates. Normally, a typical blogger template is devoid of a 3 column footer. What if you want the same for your template. Let’s see how can we use this simple trick to add 3 column footer to our blogger template.
Back Up The Template
Whenever you modify the code of your template, make sure you always take a backup. In case something goes wrong you can easily restore your blog to previous state. For backing up the template, go to Layout -> Edit HTML and click the ‘Download full template’ button.
Clean The Footer
Before you edit the footer code you must remove any widgets present in the footer. It will make the code less cluttered and implementing the footer code will be easy. Don’t panic, after modifying the template you can easily restore your footer widgets.
Adding The Footer Code
Go to Layout -> Edit HTML and make sure ‘Expand Widget Templates’ is unchecked. It will keep the template in compressed form hiding all the expanded widget code. This will help in easy implementation of the code.
To start with, find the following piece of code in your template…
<b:section class=’footer’ id=’footer’/>
</div>
One you have spotted this code, delete the middle line and replace it with the following code:
<div id=’footer12367′ 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=’footer6785673′ 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=’footer8333454′ 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>
Note the random numbers taken for each div section. This ensures that the new section names does not clash with the previous ones. Now find the </style> tag in your template and just above this tag paste the following code.
clear:both;
}
.footer-column {
padding: 10px;
}
This code will ensure that columns remain intact in their place and does not slide,shift or garbles while viewing the web page. Note: After pasting the code replace all instances of ’ with “, if any.
Now go to Layout -> Page Elements in the dashboard. Now you can see three columns in your template footer. Now you can easily add new gadgets and widgets in these columns. If you get stuck, feel free to ask below in comments and we will try our best to help you out.
Written by Rajeev Edmonds from MintBlogger
If you liked this post, consider subscribing to the RSS feed (what's RSS?) to get updates on new blog posts.
Thanks for the nice tute. I just love it.
This is really good footer. I lo
Thanks! I want to become more familiar with Blogger, I hear it’s incredibly stable and secure.
Cheers,
http://www.manzine.tk
Sorry i am not able to do this. because my code is different.Like this :-
Romeo, this technique does not work for classic templates. You need new blogger beta template for adding 3-column footer with this technique.
Is there a way to build a three column HEADER?
Yes, a 3-cloumn header is also possible. Download and see WP-Polaroid blogger template. It has 3-column header. You can inspect it’s code and can implement it in your template with modifications.
Thank you for writing all of this out. I am having a problem, but I think it may be me
I found the first code and took out the middle and added the text. However I couldn’t find the style tag, so I didn’t add the other. When I tried to preview I got this message:
We were unable to preview 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: Open quote is expected for attribute “{1}” associated with an element type “id”.
I have the minima template. If there is any help you could give me I would really appreciate it. Thanks.
@Krystle – After pasting the code, replace all occurences of ‘ by ” (i.e replace all occurrences of single quotes with double quotes). Hope this will help.
Hi, I’ve seen this same tutorial in several places and each time I get an error message like the one mentioned above. So I went in and changed all the ‘ to ” just in the part of the code that I pasted in and still got an error message.
Not really sure what I’m doing wrong. Any tips would be appreciated. Thanks! Feel free to email me.
Hi carrie, Thanks for stopping by. I have mailed you the solution.
Hey. I’m having the same problem as Carrie. I’ve found the tutorial in other sites, I’ve followed the instructions, and got the Open quote is expected for attribute “{1}” associated with an element type “id” problem, even after changing the ` to ”. Could you help me too?
Hello Tad,
Mail me your template. I’ll try my best to add the footer.
Rajeev,
Culd you tell me your e-mail please? I’m in China and for some reason the website linked to your name (www.mintblogger.com) is blocked (happens all the time).
Rajeev, a friend of mine showed me how to do it. It was so simple I’m utterly ashamed to say what the solution was. Thanks anyhow!
Glad you found the solution
this tutorial is interesting but somehow i got the same prob
“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”.”
how rajeev?
Hello dosz,
Mail me your template and I’ll send you the modified template.
I’ve been trying to do this for awhile. Hopefully this one works for me
I’ll check it out. Thanks for posting! Take it easy.
i want a 3 column footer for my blog good thing i landed here! however i am experiencing problems like dosz. im using minima lefty stretch. any suggestions how to solve my problem?
I’ve tried to add this to my site, but have been unsuccessful thus far. I’ve experienced the same errors that the others had, and don’t seem to be able to get anywhere with the coding on my own. This is the last addition I wanted to make and figures it is giving me the most trouble!
I think what might be complicating it is that I was trying to leave current footer info intact (credit to designer), although that situation could be easily rectified via a link elsewhere.
Any help or suggestions you might be able to offer?
@icka, @Tammi – Send me your blogger template and I’ll add the footer.
@ Rajeev – I emailed it to your mintblogger.com email address. It was the only one I could find …
Thanks for your kind offer. My template is on its way to you.
Hi Rajeev,
Tried this, but having this error message.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
Many have asked same question before me i guess. Could you kindly let me know what i should do to rectify this on my Minima blogger template please.
Help much appreciated.
tnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnx
I am having the same problem with the style part… I have emailed you my template.. please help!
Hi Guys,
I’ve sent you the modified template via email. Hope it works well for you
Could you please help me here.. or contact me by mail? I have been working on this template the whole night, and I still don’t get it… My header just wont fit to the rest of my blog, and i don’t know what to do:(
Hi Rahjeev,
I’m having the same problem as the others above me, could you please post the solution or fix my layout, I would be deeply greatful.
Peace
Jerry
hi this post realy very help full for me
keep going buddy
some best leech server .
http://digg.com/software/Mega_Leecher_leech_server
http://www.myleecher.blogspot.com
http://www.my-leecher.blogspot.com
i did not found
this code
after expanding widgets ………… brother ……….. plz tell me
plz say by coming on my blog
http://www.walllpaperz.blogspot.com
http://www.sweetwalllpaperz.blogspot.com
Good Tips but I want something which suits my blog mainly the CSS part.
Rajeev you have a look on my blog – http://www.scientiamag.com/
If you have any suggestions, please let me know
Thanks I just love it.
So… what is the fix for this? Clearly I’m not the only one getting the following error message –
We were unable to preview 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: Open quote is expected for attribute “{1}” associated with an element type “title”.
It’s really nice of you to offer to fix the template via email – but I just want something I can do right now. What’s wrong with the code?
@shirleytwofeathers – Mail me your template, I’ll send the fixed version back.
Sir i am using minima white template i designed it in black
Not working in this
Please help me out
Hi Ateeq,
I visited your blog and found 3-cloumn footer working fine in it