Blogger Template with Three Column Footer! :How to Add Three Column Footer to Blogspot Blog?

Most of the recent website or blog has three column footers at the end of the website page or blog page. Most visitors including the website owner or the blog owner like this feature.

---

Steps to add three column footer to Blogger / Blogspot Blog?

---

Adding a three column footer is not very difficult. Just a matter of some simple steps. Follow the following steps for adding a three column footer of your Blogger / Blogspot blog:

Step 1: Log in to your Blogger / Blogspot (www.blogger.com / www.blogspot.com) blog account and access Dashboard of your account. Choose the blog in which you would like to add the three column footer. Select that blog and go to the link Design link.

Step 2: Under Design tab, there is a link Edit HTML. Click on that link and you will access the template code of the blogger template.

Step 3: Click on Expand Widget Templates and find the following line of codes:

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

Step 4: Replace the code <b:section class='footer' id='footer'/> with the following lines of code:

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

 

Step 5: For adding the footer column the above code is enough. Now, you need to do some style for the new footer section which you have created earlier. Find the code </b:skin> and add the following lines of code:

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

.footer-column {  
    padding: 10px;   
}

Step 6: At last, you need to save the template which you just have added. Click on the SAVE TEMPLATE button to save the template.

 

---

Demo of adding three column footer to Blogspot blog?

---

The output of this tutorial can be found in the following link:

Demo Outlookhttp://creating-3-column-footer.blogspot.com/

And that’s all. Following the above mentioned steps, you can easily add three column footer at the end of each template.

Hopefully, applying the above mentioned steps, you can add a three column footer of your blogger blog. However, if you face any type of difficulties please mention it in the comment section. One thing, if you find this tutorial useful, do not forget to add comment in the comment section.