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.

SiteGround Black Friday Sale Below Banner

Get Free Blogging Tips & Technology updates in your Email !!!

Subscribe via RSS feed

The following two tabs change content below.
Anil Kumar
IT Blogger Tips focus on Blogging Tips, SEO Tips, Social Media, SQL Tips, PL/SQL Tips, Oracle DBA, Linux/Unix, Latest Technology, How Tos and Technical Solutions. You can find us on Facebook | Twitter |
Find on Google+

Siteground SALE
70% OFF SiteGround WordPress Hosting – $2.95/month (Exclusive Offer !!!)