Add Columns To Blogger Footer

Advantages:
► you can place more widgets (gadgets)
► rearrange them as you want
► your main content area will load faster if you place your "biggest" widgets on the bottom
Do not forget to backup current template

1. Go to LAYOUT ► EDIT HTML ► and locate the following code:

]]></b:skin> </head>

1. ..ABOVE it, you'll have to place the following code:

#footer-columns { border-top:1px dotted #999999; clear:both; margin:0 auto; } .column1 { padding: 0px 5px 3px 5px; width: 30%; float: left; margin:3px; text-align: left; } .column2 { padding: 0px 5px 3px 5px; width: 31%; float: left; margin:3px 3px 3px 5px; text-align: left; } .column3 { padding: 0px 5px 3px 5px; width: 30%; float: right; margin:3px; text-align: left; } .addwidget { padding: 0 0 0 0; } #footer-columns ul { list-style:none; margin:0 0 0; padding:0 0 0; } #footer-columns li { margin:0; padding-top:0; padding-left:0; padding-bottom:.25em; padding-right:15px; text-indent:-15px; line-height:1.5em; } body#layout #footer-columns { width: 100%; margin-left: auto; margin-right: auto; } body#layout .column1 { width: 32%; float: left; } body#layout .column2 { width: 32%; float: left; } body#layout .column3 { width: 32%; float: right; }

...that's the CSS style for our new Footer section.

1. Now, to add some containers. In your LAYOUT ► EDIT HTML ► locate this code:

<b:section class='footer' id='footer'/>

...DELETE it, and REPLACE with this code:

<div id='footer-columns'> <div class='column1'> <b:section class='addwidget' id='col1' preferred='yes' style='float:left;'> </b:section> </div> <div class='column2'> <b:section class='addwidget' id='col2' preferred='yes' style='float:left;'> </b:section> </div> <div class='column3'> <b:section class='addwidget' id='col3' preferred='yes' style='float:right;'> </b:section> </div> <div style='clear:both;'/> </div> <b:section class='footer' id='footer'/>

...Save your template.