Adding a footer is always useful and provide a great tool for your users to know more about your site. In my footer i have added the about me and also show the links to my twitter and facebook account. So you too could add a footer to your blogger blog having three columns like the onve we use at Shankee.com .This is how my 3 column footer at shankee.com looks like-
Follow these steps (for blogger.com users only)
1. Back up your blog
Go to your blog’s dashboard>layout>Edit HTML
and click on the Download complete Template. The template download should start soon.
2. Move all widgets from footer to some other place or back them up.
Before you edit anything just remove all the content from your footer as it will be lost when you edit your blog. A good idea is to copy all content to notepad or you may just move the content to some other place on your blog.
3. Editing HTML to create columns in footer
Now we come to the main step. Now you directly edit the HTML of your blog. Let me tell you that this is serious stuff and you should be very careful in editing HTML as any error would result in ruining your blog.
To edit the HTML
got to the Layout section>Edit
Now search for the following code in your HTML code
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>
Please note that the code may be different in your blog, in my blog it was “footer” instead of “footer-wrapper”. I just edited that, but be sure that you know what you are doing before editing anything.
Now you just need to replace the red line with the code given below-
<div id=’footer-column-container’>
<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; 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>
Now hit the Save template button and check if it shows no error then only proceed to the next step. If it shows some error try to fix that before editing anything more.
4. Adding style for the new footer section
Now search for this piece of code in you HTML
</b:skin>
Now just add the given code just above above line..
#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 editing your layout, now go to the “Page Elements” section. You must see that the footer section is now divided into three(3) columns. Add the gadget of your choice in these columns.
If any problem persists mail me at [email protected] .Or just comment on this post.
Special thanks to Blogger Buster for the HTML code.