How to make a 3 Column Footer

Making your blog footer into 3 columns is very easy in just few minutes. Maybe you wonder how bloggers made such tweak to their blogs. Here's the simple steps to follow:

Step 1:

If you have already added widgets on your footer, temporarily transfer it to the sidebar.

Step 2:

Go to Edit HTML. Check the box "expand widget templates". Press CTRL+F and search the code below:

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

Step 3:

Replace the above code with the following:

<div id=’footer-wrapper-container’>

<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>

Step 4:

Add style to your footer.

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

.footer-col {
padding: 10px;
}

Cheers! Done. Any questions? Leave comments.


Posted in: Make a 3 Column Footer