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.





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




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