How to Add Footer Column Widget in your Blogger blog

Adding a 3 Column Footer Widget

1. Navigate to template > edit HTML
2. Before making any edit always remember to backup your template
3. Find the following section in your Blogger template

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

If you are having difficulty finding this section trying searching for footer-wrap or something similar.

4. Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' 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='footer2' 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='footer3' 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>

Adding a 4 Column Footer Widget

Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

5. Save changes to your Blogger template
6. Navigate to Layout > Page Elements. You will now see a 3 column footer or a 4 column footer depending on what option you chose. 

Share on Google Plus