How to Add 3-Column Footer to a Blogger Blog

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.
5. This Will add matching Beautiful footer to your Blog. like this..:

This ambush will assignment accomplished in all Standard Blogger Templates. For added Customized Templates, you accept to acquisition out the footer area in your arrangement and add the codes accustomed above. All the Best!

Posted in: AdSense,Blog,Blogger,google,HTML,Templates