- You will get enough valuable space for your widgets.
- You can add/replace more gadgets/widgets.
- You can rearrange all the gadgets/widgets.
- If you place all the biggest gadgets at the footer section, the main content will be loaded faster.
- It will also contribute your blog design as the modern Web 2.0.
Steps to add three columns to Blogger footer section
Step 1: Back-up your existing blog
Before any type of modification of your blog template code, it's very essential to back-up your existing blog template. You may take backup only the template or the widgets (gadgets) only or you may take the complete back-up of your blogger blog. I already discussed the process of back-up in other pages. To know the process of back-up, you may follow the following posts..- How to Back-up Your Blogger Template Design?
- How to Back up Your Blogger Widgets (Gadgets)?
- How to Back-up Your Blog Completely (Posts + Comments + Gadgets)?
Step 2: Remove all widgets (gadgets) from the footer section
Step 3: Adding CSS code for the footer section
Now, go to your template code section.
Before adding CSS code to your blog footer, first find the following two lines of code:
]]></b:skin></head>/* Code is developed by: 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;}Step 4: Add containers to hold all the footer columns
.<b:section class='footer' id='footer'/> :<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'/>













