Create Three Column Footer in Blogger

Visualization of blog is an important factor for getting more traffic thus that Three Column Footer you can easily display many items in your Blog. Many of the new themes for Blogger have got a three column footer. If your Themes doesn’t have a three column footer then you need not worry. I’ll tell you in some simple steps on how to add a Three Column Footer to your Blogger Theme.

• Go to Edit HTML page in the Blogger Layout Window

• Find(Ctrl + F) the following Code:

                                          <div id=’footer-wrapper’>

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

                                         </div>

• After getting these codes just replace the red line with the following codes,

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

• Now Find </b:skin> and place the below codes before this line:

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

.footer-column {
padding: 10px;
}    

• Now SAVE Your Template.

• Now Go to Page elements you can see three column created in your footer above your main footer. I think you would love this hack.

Please leave your comments and like to boost my blogging. .