Add 3 Column or 4 Column Footer to Blogger

How to Add a 3 Column Footer to Blogger

1. Log in to Blogger if not already logged in
   
2. Navigate to Layout > Page Elements
   
3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
   
4. Navigate to Layout > Edit HTML
   
5. Back up your template as a precaution by downloading it to your computer
   
6. Find the following section in your Blogger template
   
   

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

   
   If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
   
7. To Add a 3 Column Footer to Blogger
   Replace all the code located in Step 6 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' 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='footer2' 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='footer3' 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;'/>
   </div>

   
   To Add a 3 Column Footer to Blogger with a Lower Footer Section
   Replace all the code located in Step 6 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' 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='footer2' 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='footer3' 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/>
   <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>

   
   
   To Add a 4 Column Footer to Blogger 
   Replace all the code located in Step 6 with the following
   
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   
   
8. Save changes to your Blogger template.
   
9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
   
10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
    
11. Click View Blog to admire your new footer section

Tips and Troubleshooting

1. To Add Padding Between Footer Columns in Blogger
   To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.
   
   #footer-columns {
   clear:both;
   }
   
   .footer-column {
   padding: 10px;
   }
   
2. To Add a Border to the 3 or 4 Column Blogger Footer
   
   • For Top Border Only of the 3 or 4 Column Footer
     Paste the following code before the </b:skin> tag
     
     #footer-columns{
     border-top:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     }
     
   • For a Box Border Around the 3 or 4 Column Footer
     
     #footer-columns{
     border:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     } 

Posted in: Blogger Footer