How to Add 3-Column Footer to a Blogger Blog

by

blogger blogspot logo 2011

NOTE: I posted this article few years back when not much good 3-column footer blogger templates were available. But now you can find plenty of beautiful “3-column footer blogger themes” for free! I suggest you to use these new themes rather than altering your existing theme since there is a chance of error. Or of you badly need to tweak your theme, you can do the following steps!

Please Note: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving
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’><b:section class=’footer’ id=’footer’/>

    </div>

    (Note:In some templates, instead of footer-wrapper you can 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.
This trick will work fine in all Standard Blogger Templates. For other Customized Templates, you have to find out the footer section in your template and add the codes given above. All the Best!

Leave a Reply