Multi Column Footer for Blogger with Backgrounds

This widget is Introduced for those Blogger who Does not use Blogger own templates. They use third Part templates Because blogger own templates can be modified by template designer and you can control Body Layout. But if you are using third party templates then you have not this option So i was worried about this and 1 day i discussed it with my friend inam and he design a script for me

Go To Blogger > Design > Edit HTML

Backup Your Template

Search for ]]></b:skin>

Just above ]]></b:skin> paste the code below,

/*----- yum tricks MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

 5.    Now search for </body> and paste the following code just above </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> </b:section> </div>
<div style='clear: both;'/>
</div> </div>

Notes::

You can Increase or decrease columns by removing or adding new lower bar column like lower bar 1,2,3,4 and you can add 5 by this code

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>