Blogger Hacks: How to add 3 Column Footer

Want to add widgets but you lack space in your sidebar? This hack will help provide more valuable space for blog widgets. An example of this is this blog. Try going back to front page and go to the bottom part. You'll see my widgets compressed all in one footer. This gives more pleasing look unlike putting all this widgets to one sidebar.


So here's how to do it.

1. Go to page elements and move all the widgets to your sidebar. This is temporary just to ensure you won't lose your widgets in your footer.

2. Make a back up of your template. To do this, download full template in Edit HTML under layout tab.

3. Search this tag:

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

4. Then will replace the tag colored in RED above with this code below:

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

5. After this, search for the closing tag "</b:skin>"

6. Before this tag, copy and paste the code below:

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

.footer-column {
padding: 10px;
}

7.You can now save your template. The style in these lines of code ensure that the footer column don't slide beneath each other in the layout of your template.

If you have already viewed my blog, you can see a horizontal line in the footer. The purpose of this is to make a distinction between the footer columns and the wide selection beneath. You can change the color of this horizontal if you wish.

<hr align='center' color='#5d5d54' width='90%'/>

Change the hex color values of your choice.

You can also delete the horizontal line by just deleting the whole line.

Related Posts by Categories

Widget by Hoctro | Jack Book