Multi Column Footer Widget For Blogger

Today we will learn how to add an awesome multi column footer widget in our blogger blogs. More and more bloggers use this widget because it gives a professional look to your blog and extra space for your widgets.

How To Add Multi Column Footer Widget To Blogger

• Go to Blogger > Template > Edit HTML
• Search ]]></b:skin> tagand above it, past the below given code :

/*----- MBT 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;
}

• Now search </body> tag and above it, paste the below given code :

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

• Save template

Go to Blogger > Layout and start adding some widgets in your fresh created Multi Column Footer.
Your footer gadgets zone must be like in the next image :

How To Customize This Widget

• To make the widget smaller or larger, simply change width: 960px;
• If you want to remove a column from your footer, simply remove the below given code from the original code :

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

• Or if you want to add another column, paste the below given code above <div style='clear: both;'/> tag :

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

Keep in mind that lowerbar# it refers to column number, so if you add the column number 5, then replace lowerbar# with lowerbar5.
After you added the number 5 column you should change width: 23%; with width: 17%;