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.

Do the following steps:

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

2. Find the following Code:
   <div id=’footer-wrapper’>
   <b:section class=’footer’ id=’footer’/>
   </div>

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

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

4. Then Save the Template.

You Might Also Like:

• 2 Column and 3 Column Blogger Template Sites

Article by Shafar.
Author: Owner and Admin of TipsBlogger.
To submit your guest posts here, please read the Guidelines and Benefits.
Get Updates via: Twitter | RSS Feed | Email