How to Add 4 Column Footer in your Blogger Website

In my previous post you have already seen how to add 3 column footer widget to your blogger.

Now it’s really easy to add 4 column footer widget in your blogger website but some of my friends were getting difficulties in doing the same. So I am posting this article to add 4 column footer widget to your blog.

  • First you have to Login into your Blogger account.
  • Navigate to Layout section.
  • Move or Delete any existing widgets from the footer section or place them temporarily to the sidebar and save changes.
  • Backup of your template from Template section by clicking 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: 25%; 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: 25%; 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: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column3' preferred='yes' style='float:left;'/>
</div>

<div id='footer-4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

4 Column Footer


  • Now save the changes.
  • Click on Layout and here you will see a 4 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 #5493d1;
clear:both;
margin:0 auto;
}

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


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