Make 3 Columns above Footer

If you wish your Blog has 3 columns (three columns) above the footer, follow my tutorial here, it's easy.

Like usual, go to 'Layout' and set tab to 'Edit HTML', then find these code. :P
Don't forget to backup your HTML first, to prevent mistake.

<div id='footer-wrapper'>

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

</div>

Now, change <b:section class='footer' id='footer'/> with these code below here.

<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;'/>



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

From the code above, do you see 30%, 40%, and 30% (the orange code)? It means the width of first column from the left side to last column at the right side, you may change them as long you got those percentage total to 100% (30% + 40% + 30% = 100%).

Now, you should find </b:skin> and place these code above it.

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Now, save it and see the result.
Need further tutorial? Feel free to ask on the comment. :)