Add 3 Column footer to Blogger Blog

In today's Tutorial we are going to learn How to add 3 Column footer to Blogger Blog, this tutorial involve a little trick of adding a code to your existing footer section in your template to convert it to 3 column footer template.


Before Starting with our Post don't forget to take back up of your template before editing it.

Add 3 Column footer to Blogger Blog

1. First "Login" to your Blogger account

2. Click on "Design" highlighted in image below

3. Click on "Edit HTML" as shown below


4. Find the following code in your blogger template code

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

5. In most of the templates you will find this above code at bottom of blogger template

6. Now, to add 3 column footer to your blogger template replace the above code with code shown below

<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>

7. Save the Changes to your Blogger Template

8. You are Done !!! Happy Blogging