How to Create Three Column Widget footer in Blogger

Advertisements
Have you ever thought about having an extra space in the footer area of your website to place significant widgets like Facebook like box, twitter feeds, Google Followers gadget and more? Creating a three column widgetized footer is the perfect solution as it allows you to add widgets in your site other than just sidebar. Most of the professional blogger template developers like Themeforest, Templateism and more are already providing this feature by default in their templates. In this article, we will show you How to Create Three Column Widgets footer in Blogger.

Why to Create Widgetized footer?

Sometimes you find your sidebar loaded with various widgets that you don’t want to remove for some reason. However, you end up in removing them to keep your site neat. By having an extra three widgets area in a footer area would certainly provide you much relief in moving any of your sidebar widget to the footer widget area, without removing them from your site. This is the reason why almost all blogs now consider about having a widgetized footer area.

How to create three widgets footer in blogger?

To install the three widget footer in blogger, you have to first declare the widget area’s in the blogger template. Therefore, go to Blogger >> Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following piece of coding:

<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes'>
  <b:widget id='HTML15' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'>
  <b:widget id='HTML14' locked='false' title='Gallery' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'>
  <b:widget id='HTML13' locked='false' title='About' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>

After you’re done by declaring the widgets in the template the very next thing is to apply style sheet so that it not only look compatible with your design but also appears in an efficient way. So in the template coding, search for ]]></b:skin> tag and just above it paste the following piece of code. Note: This CSS is minimal and you’re free to edit it according to your needs.

#footer-widgets {
    padding: 20px 0 0 0;
}
.footer-widget-box {
    width: 300px;
    float: left;
    margin-left: 15px;
}
.footer-widget-box-last {
}
#footer-widgets .widget-container {
    color: #374142;
}
#footer-widgets h2 {
    font-family: inherit;
    text-shadow: none;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 4px solid #444444;
    padding-bottom: 10px;
}
#footer-widgets .widget ul {
    list-style-type: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#footer-widgets .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;
}
#footer-widgets-containerback {
    width: 980px;
    margin: auto;
}
#footer-widgets-container {
    background: #484848;
    border-top: 10px solid #66b381;
}
.footersec {
    color: #A1A6AF;
    font-size: 13px;
    line-height: 18px;
}
.footersec .widget {
    margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

Now you can go to Blogger >> Layout and you’ll notice three widget areas towards the bottom of the page. You can add more gadgets or can edit them depends on your needs and requirements. Furthermore, visit your blog as well to see everything in live action.

We hope this tutorial would turn out to be useful for non-developer and developers to understand how these small things are done, as these things plays a significant role in creating a blogger template from scratch. At MyBloggerLab, we’re using two columns footer because it entirely depends on one need that how much space is required for his site. If you like this article, share it with your friends and blogger colleagues on Facebook, Google+ or twitter.


Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

10 comments

August 22, 2014 at 9:58 AM

I'm using this footer 3 columns. In the desktop version is OK but it is also creating problems in the mobile version of graphics. How can I disable this menu, 3 columns from the mobile version?

August 22, 2014 at 10:14 PM

thanks allot for helping me...

December 10, 2014 at 11:56 PM

Andrea Sapuppo @ To hide this footer widget from mobile version just add this CSS code to the media queries inside your Template Code:-

#footer-widgets-container {
display: none !important;
}

Save your template and your ok to go with :)

Twist Blogger

December 18, 2014 at 4:39 AM

Use this code:
#footer-widgets {display: none;}

April 22, 2015 at 2:12 AM

hmm...very helpful

May 5, 2015 at 6:40 AM

thanks for tutorial .....

September 3, 2015 at 3:41 PM

It works perfectly.

I changed the" widht" and it´s working in my mobile an ipad.

#footer-widgets-containerback {
widht: 100%;
max-width: 980px;
margin: auto;
}

thans you

September 30, 2015 at 10:12 AM

It is working fine but how it is coming below my footer credit (Copyright bar). Can you help me to make it like yours :)
Thanks in advance

March 27, 2016 at 9:55 AM

nice trick, it is working good but how it is coming below my footer credit (Copyright bar). Can you help me to make it like yours :)

May 11, 2016 at 9:10 AM

Awesome dear, it worked for me in the way i was wishing to make it.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.