How To Install A Three Column Blog Footer

Finding it hard to add widgets to your blog without overstuffing the sidebar? Ahh well, maybe it’s time to add a footer to your blog. This tutorial will show you how to do just that -install a three-column footer.

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Look for the existing footer code near the end of your HTML. It might look something like this:

   <div id='new-footer-wrapper'>
   <div id='column1-wrapper'> 
   <b:section class='new-footer' id='new-footer1' preferred='yes'/>
   </div>
   
   <div id='column2-wrapper'> 
   <b:section class='new-footer' id='new-footer2' preferred='yes'/>
   </div>
   
   <div id='column3-wrapper'> 
   <b:section class='new-footer' id='new-footer3' preferred='yes'/>
   </div> 
   <div style='clear: both;'/>
   </div>
   <!-- three column footer HTML End -->

   Copy the code below and paste it in CSS section, before ]]></b:skin>.

   #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;} 
   #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; display:inline-block; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; overflow: hidden;}  
   .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;} 
   .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
   .new-footer .widget-content { padding: 0px 5px 5px 5px; } 
   .new-footer ul { list-style-type:square; margin-left:15px; }
   
   Save the template and go to Design > Page Elements. You should have the 3 empty footer containers added at the bottom of the layout.
   
   
   
   
   
   
   You can now drag and drop the gadgets from the existing footer or sidebars into the new footer containers. The end result should look something like this.
   If the columns are not distributed evenly, try adjusting the width in line 3 and right margin in line 5 of CSS code (in step 6).
   Once satisfied with the result, if you want you can go back to the old footer code in step 4 and delete it (from <div until </div>).
   
   
   Enjoy!