How to Add Footer Column Widget into Blogger blog

How to Add Footer Columns Widget to Blogger blog
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

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