How to Add 3-Column Footer to a Blogger(blogspot) Blog

You might have observed that most of the Blogger Templates have only one column footer. It may restrict you adding more widgets to the footer section. With the 3-column Footer, you can add more widgets like Recent Posts, Recent Comments, Archives, Labels and even some Ads. It's very simple to add a three column footer section to a blogger(blogspot) blog.


You might have observed that most of the Blogger Templates have only one column footer. It may restrict you adding more widgets to the footer section. With the 3-column Footer, you can add more widgets like Recent Posts, Recent Comments, Archives, Labels and even some Ads. It's very simple to add a three column footer section to a blogger(blogspot) blog.

Do the following steps:

Please Move all your widgets from the Current Footer Section to sidebar or any other section

1. Go to Edit HTML page in the Blogger Layout Window

2. Find the following Code:

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

# (Note:In some templates, instead of footer-wrapper you may find footer or footer-section)

3. Replace the entire code from starting

to

with the Following Code:

<div id='footer'><br /><div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'><br /><b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/><br /></div><br /><div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'><br /><b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/><br /></div><br /><div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'><br /><b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/><br /></div><br /><div style='clear:both;'/><br /></div><br /><p><br /><hr align='center' color='#5d5d54' width='90%'/></p><br /><div id='footer-bottom' style='text-align: center; padding: 10px;'><br /><b:section class='footer' id='col-bottom' preferred='yes'><br /></b:section><br /></div><br /><div style='clear:both;'/><br /></div></div>

4. Then Save the Template.
--------