Don't Miss

How to Create a Three Column Footer Widget in Blogger

By Zohaib Liaqat - 19 Comments
Have you ever thought about having an extra space in your blog footer section for adding more widgets to your blog? You might have seen three column footer widgets section on many websites. Most of the templates come with built-in footer sections, but if unluckily your template doesn't contains a footer and you want to add it! Don't worry, we'll help you in creating a three column footer in blogger.

Recommended for You:
Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger
Add a Tabbed Table of Contents to your Blogger Blog
How to Create an Advanced Admin Control Panel in Blogger

If your sidebar is loaded with various widgets and you want to add more widgets without removing them. Then footer section is the best solution. By creating a footer section in your blog, you can add more widgets to your blog in the footer section. So, today in this tutorial we're going to share How to Create a Three Column Footer Widget in Blogger.
How to Create a Three Column Footer Widget in Blogger

How to Create a Column Footer in Blogger

First of all, log in to your Blogger Account >> Select a Blog >> Template >> Click Edit HTML and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before it (]]></b:skin> tag)

/* -----   Footer Start   ----- */
#footer {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#footer-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}

#footercol-wrapper {
       background:#333434;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.5em;
       word-wrap: break-word;
       overflow: hidden;
       color:#fff;
}

.footercol {margin: 0; padding: 0;}
.footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footercol h2 {
      margin: 0px 0px 10px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#fff;      text-transform:uppercase;
      font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
      font-size:21px;
      border-bottom:2px solid #fff;
}

.footercol ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.footercol li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #ccc;
}
/* -----   Footer End   ----- */

Again search for </body> tag and just above/before it add the following code

<div id='footer'>
<div id='footer-wrapper'>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol1' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol2' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Finally click Save Template button and you're done!
Now go to Layout and start adding widgets to your footer section.

For your Information:
  • background:#333434; The background color of the footer section, you can change it according to your website colors
  • background:#333434; The background color of the widget columns. In my case the backgrounds of both footer section and widget columns is same
  • color:#fff; The color of Widget Title

We hope this article may have helped you in creating a a Three Column Footer Widget in Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

19 comments to ''How to Create a Three Column Footer Widget in Blogger"

ADD COMMENT
  1. Hi! Good widget, but Blogspot have change something in the code. The column becomes not side by side.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. These advances have given them the chance to address their issues, make the important installments and deal with their current budgetary downsides. All the more in this way, they have been perceived by the administration. Payday Loans Costa-mesa

    ReplyDelete
  4. Transportation rates also vary depending on the client's request from Adma packaging, in addition to the type of packaging that the customer prefers to use in moving his luggage
    شركة نقل عفش
    شركة نقل عفش من الرياض الى الاردن
    شركة نقل اثاث من الرياض الى الاردن
    شركة نقل عفش بالجبيل

    ReplyDelete
  5. Aw, it was quite a good post. In idea I have to put in writing such as this moreover - taking time and actual effort to produce a excellent article… but what / things I say… I procrastinate alot through no indicates manage to get something completed. https://royalcbd.com/product/cbd-oil-2500mg/

    ReplyDelete
  6. Great blog here! Also your site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol web design agency new york

    ReplyDelete
  7. i was just browsing along and came upon your blog. just wantd to say great site and this post really helped me. nyc web designer

    ReplyDelete
  8. conclusion that you are absolutely right but a few require to be branding san francisco

    ReplyDelete
  9. I saw a lot of website but I believe this one has got something special in it in it ux san francisco

    ReplyDelete
  10. Cause of Arthritis… [...]while the sites we link to below are completely unrelated to ours, we think they are worth a read, so have a look[...]… ux san francisco

    ReplyDelete
  11. Good post. I learn something tougher on different blogs everyday. It'll at all times be stimulating to learn content from other writers and observe somewhat one thing from their store. I’d choose to use some with the content on my blog whether or not you don’t mind. Natually I’ll offer you a link in your internet blog. Thanks for sharing. device mockup

    ReplyDelete
  12. Once I initially commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any method you can take away me from that service? Thanks! device mockup

    ReplyDelete
  13. Step-by-Step create website Easy to Customize, Publish Now! Custom domain name. Multiple payment methods. Free multilingual fonts. 24/7 support center. 1000s of free images. Top industry hosting. 100s of Apps. Easy-to-add blog. Mobile optimized. Create Website

    ReplyDelete
  14. Nice article, I have changed my footer by flowing this article View This site

    ReplyDelete
  15. Thanks so much for your article. I used it but my problem is the mobile set up. How do I make the columns become rows?

    I pasted what you have here:
    }}/* ----- Footer Start ----- */
    #footer {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333434;
    }
    #footer-wrapper {
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    }

    #footercol-wrapper {
    background:#333434;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 32%;
    text-align: justify;
    font-size:100%;
    line-height: 1.5em;
    word-wrap: break-word;
    overflow: hidden;
    color:#fff;
    }

    .footercol {margin: 0; padding: 0;}
    .footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

    .footercol h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: center;
    color:#fff; text-transform:uppercase;
    font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
    font-size:21px;
    border-bottom:2px solid #fff;
    }

    .footercol ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
    }

    .footercol li {
    margin: 0px 0px 2px 0px;
    padding: 0px 0px 1px 0px;
    border-bottom: 1px solid #ccc;
    }
    /* ----- Footer End ----- */

    ReplyDelete
  16. BTW My website is www.8thworker.org

    ReplyDelete
  17. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. 増田裕介

    ReplyDelete
  18. Thanks but how to make it mobile friendly

    ReplyDelete