How to add more column on Blogger Footer

How to add more column on Blogger Footer Section? Many of the blogger want to add more column on the footer section.

In Blogger you will find that the default Blogger template's footer has only 1 column. But you will see that many websites and blogs has two-four columns on footer. If you make more column on your Footer then you will see some of the good advantages as below ...

1. You may have more space for your widgets.
2. Can add and replace more widgets.
3. Your website will be loaded faster if you use large widgets on footer.
4. It will turn the design of your blog to the modern Web 2.0.

As we are going to add multiple column on our footer section. I think 3 column is better for this tutorial. So, I'm going to add three column on the footer section of the website. Just follow the following steps to add three column to Blogger footer section:

1. Back-up your existing blogs Template. (Download the Template)
2. Remove all widgets (gadgets) from the footer section.
3. Add CSS code for three column Footer section.

Lets Add CSS to accomplish the work ...

1. Go to Blogger → Template → Edit HTML → Proceed
2. Expand the Template checking the expand box.
3. Press (Ctrl + F) to find ]]></b:skin> code on your Template.
4. Add the following code just above the ]]></b:skin> code.
   

   /*

       Code is developed by: 

           http:www.howblogger.com

       Blogspot Tutorial Index:

           http:www.howblogger.com

       Code Description: 

           Codes for adding columns (3 columns) in the blogger footer section

   */

   #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: 30%;

       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;

   }

5. When we have completed adding CSS code, we shoul add the containers for the footer section. We have to search the following code to add containers:

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

6. Find our the above code from your Template & delete the code. Then paste the following code at the place of the above 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'/>

7. Now Save your Template & you have completed adding 3 columns on your blogger blog.
   
   
   

If you have any problem please let me to know. If you face any problem you may post a comment under this post so that I can solve your problem.