How to make your footer 3 column?

You may have noticed a 3 column footer in many blogs, it's been quite popular these days.

It's quite easy to add a 3 column footer to your blog just follow these steps -

STEP I - First and foremost backup your template.This is a very essential step, in case anything goes wrong, you will be able to restore your previous template.

STEP II - Now find this code (you can use Ctrl+F in Mozilla Firefox)-

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

Note: Some templates may have only "footer" instead of "footer-wrapper".

STEP III - Replace the red code with following 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 save the template.

STEP IV - Now find this tag -

]]></b:skin>

Place this code before the above tag -

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;


}

Save the template.

STEP V - Now go to your "Page Elements" page, you will find three columns in your footer.

You are done now, add any Gadgets you wanna add to your footer columns and enjoy :-)

If having any difficulty in implementing these steps, just leave a comment here.