How To Add Three Column footer in Your Blog

How To Add Three Column footer in Your Blog convert your blogger footer (blogspot blog footer)into a three column adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern “Web 2.0” appeal for your blog design and you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first, there are only four main steps to this tutorial, and I’m sure you’ll agree that the overall process is quite simple.
I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.
This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns
See How To Add Gadget Inside Blogger Header Section

Add Three Column Footer in Button Section of Blog

Here are the four steps needed to transform the footer section of your blog template:
Back up your existing blog template!
Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don’t like the new look, you can easily revert back to this design.
To back up your existing template, go to Template>>Edit HTML in your Blogger dashboard, and click on the “Download Full Template” link near the top of the page. You can then save your existing XML template file to your computer.

Go Blogger.com Layout >> Edit HTML
Now Find This code ]]></b:skin>
Copy the below code and past before this code ]]></b:skin>

#footer {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#footer-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;

}

#footerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}

.footerbar {margin: 0; padding: 0;}
.footerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}

.footerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.footerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}

Now Search </body> and past the below code before this code

<div id=’footer’>
<div id=’footer-wrapper’>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar1′ preferred=’yes’>
</b:section>
</div>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar2′ preferred=’yes’>
</b:section>
</div>
<div id=’footerbar-wrapper’>
<b:section class=’footerbar’ id=’footerbar3′ preferred=’yes’>
</b:section>
</div>
<div style=’clear: both;’/>
</div> </div>