Do you want to Add column widget to your blogger blog? Kindly grab a cup of coffee and relax..You might have seen numerous blogs that have three or four column widget at the bottom of their page.Most times When searching blogger template we rarely find 3 column footer blogger template out design. 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 content or items which you like and desire. Also you will be able to put less frequently used widgets such as recent 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
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>
<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>
<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>
<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.