How to Add Footer Column Widget into Blogger blog

You may have seen many blogs that have a three or four column widget at the bottom of
there page. When we searching blogger template sometimes we can't find 3 column footer blogger template. In this tutorial i'm going to teach you how to add 3-4 columns footer widget box, With more columns in your blogger footer you can add extra stuff you like. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About me etc at the bottom of your template.

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.