How to Add 3 Column Footer in your BlogSpot Website

It’s really difficult to get a website template according to your need. But if you are not getting the desired template then you can customize it as per your need.

The best thing is that you will learn some basic tips and tricks about customization of BlogSpot.

Sometimes you want to add 3 column footer in your website but you don’t get it from the ready made templates. From this article you can customize your website and get 3 column footer easily.

  • First step is to Login into your Blogger account.
  • Now navigate to Layout section.
  • Move or Delete any existing widgets from the footer section or place them temporarily to the sidebar and save changes.
  • Take backup of your template from Template section and click on Backup/Restore option to download it into your computer.
  • Now navigate to Layout and click on Edit HTML.
  • You have to find following section in your Blogger template.
<div id='footer-wrapper_section'>
 <b:section class='footer' id='footer'/>
 </div>

If you are getting some difficulty in finding the above section then you may try for footer-wrap or footer_wrapper or something similar like that as sometimes this section is called something else in some templates.

Now replace all the above code with the following code.

<div id='footer-columns'>
<div id='footer-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column1' preferred='yes' style='float:left;'/>
</div>
<div id='footer-2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column2' preferred='yes' style='float:left;'/>
</div>
<div id='footer-3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3 Column Footer

  • Now save the changes.
  • Click on Layout and here you will see a 3 column footer.
  • Now you can Move or Re-create the desired gadgets to your Blogger footer columns.

If you want to create a top border in footer then paste following code before the </b:skin> tag

#footer-columns{
border-top:1px dotted #5492d1;
clear:both;
margin:0 auto;
}

I hope this article will help you to add 3 column footer in you blogger template.

You can also add 4 column footer widget to your blogger website.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top