How to install a three column Blog footer

  • Login to your Blogger account.






  • Go to Dashboard > Layout > Edit HTML.






  • Back up your template.






  • Look for the existing footer code near the end of your HTML. It might look something like this:














    •  



    if you already have contents in the footer, the code should be longer.



    • Copy and paste the code below immediately under the footer . This code will create 3 new gadget containers (one for each column) under the existing footer container.











    • Copy the code below and paste it in CSS section, before  ]]>.         





    #new-footer-wrapper

    {

    background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;

    }

    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

    .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 Layout > 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 
       until 
      ).