How to Plus three columns in blogger footer Style

Now add best hover effect three columns widget in your blogger blog footer this footer style sexy and great for your gadget , related links and many more so add this footer style widget in your blog now.

* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template now.
* Find below giving code in your blog template now

<div id='footer-wrapper'>

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

</div>

* Now replace red line of above code with below giving code

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

* Now again find  ]]</b:skin> by CTRL+F key 
* Now  copy below code and paste before ]]</b:skin>

#footer-column-container h2 {
margin: 15px 0px 15px 0px;
padding: 0px;
text-align: left;
color: #dddddd;
font-size: 18px;
font-family: Arial,Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight:bold;
text-transform: none;
}
#footer-column-container li {
text-decoration: none;
list-style-type: none;
line-height: 32px;
margin-left: 0 !important;
padding: 0px 0px 0px 5px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
}
#footer-column-container li:hover {
background-color:#222;
}
#footer-column-container ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0 10px 0 0;
padding: 0;
border-top: 1px solid #222;
border-bottom: 1px solid #444;
}
#footer-column-container{background-color:#333333;clear:both;color:#ffffff;font-size:14px;}
#footer-column-container a{color:#dddddd;font-size:14px;}
#footer-column-container a:hover{color:ffffff;font-size:14px}
#footer-column-container ul,#footer-column-container ul li{list-style:none}
.footer-column{padding:10px}

* NOw save your template you are done. if you any problem to adding this please comment i will solve ok.