How to add three columns to your footer section

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template.

]]></b:skin>

And immediately Before it, paste this code:

/*
Code is developed by:
http://hubpages.com/_rt3/profile/blog
Blogspot Tutorial Index:
http://hubpages.com/_rt3/hub/blog-index
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;
}

After adding above code,find (CTRL+F) this code in the template:

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

Select the above line of code from your blog template and delete the entire line from the template code and paste the following lines of code there:

<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'/>

After successfully finishing the above tasks, save the modified code by clicking Save Template button to save the whole modified code. Now, your blog has three columns in the footer section.