How To Practice 3 Column Widget Footer Inward Blogger

Have yous e'er idea virtually having an extra infinite inwards the footer expanse of your website to house pregnant widgets similar Facebook similar box, twitter feeds, Google Followers gadget and more? Creating a 3 column widgetized footer is the perfect solution every bit it allows yous to add together widgets inwards your site other than only sidebar. Most of the professional person blogger template developers similar Themeforest, Templateism together with to a greater extent than are already providing this characteristic past times default inwards their templates. In this article, nosotros volition demo yous How to Create Three Column Widgets footer inwards Blogger.

Why to Create Widgetized footer?

Sometimes yous notice your sidebar loaded amongst diverse widgets that yous don’t desire to take away for around reason. However, yous terminate upward inwards removing them to choke on your site neat. By having an extra 3 widgets expanse inwards a footer expanse would sure render yous much relief inwards moving whatever of your sidebar widget to the footer widget area, without removing them from your site. This is the argue why almost all blogs forthwith regard virtually having a widgetized footer area.

How to exercise 3 widgets footer inwards blogger?

To install the 3 widget footer inwards blogger, yous accept to showtime declare the widget area’s inwards the blogger template. Therefore, larn to Blogger >> Template >> Edit HTML >> together with search for the ending </body> tag together with only higher upward it glue the next slice 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 championship 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 championship 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 championship 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 past times declaring the widgets inwards the template the real adjacent affair is to apply mode sail together with thus that it non only expect compatible amongst your pattern but besides appears inwards an efficient way. So inwards the template coding, search for ]]></b:skin> tag together with only higher upward it glue the next slice of code. Note: This CSS is minimal together with you’re gratuitous 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 enterprise #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 enterprise #66b381;
}
.footersec {
    color: #A1A6AF;
    font-size: 13px;
    line-height: 18px;
}
.footersec .widget {
    margin-bottom: 20px;
}
#footer-widgets-container { background: #484848; border-top: 10px enterprise #66b381; float: left; width: 100%; }
.footersec ul {
}
.footersec ul li {
}

Now yous tin larn to Blogger >> Layout together with you’ll notice 3 widget areas towards the bottom of the page. You tin add together to a greater extent than gadgets or tin edit them depends on your needs together with requirements. Furthermore, take in your weblog every bit good to meet everything inwards alive action.

We promise this tutorial would plough out to live useful for non-developer together with developers to sympathise how these small-scale things are done, every bit these things plays a pregnant business office inwards creating a blogger template from scratch. At MyBloggerLab, we’re using 2 columns footer because it only depends on 1 demand that how much infinite is required for his site. If yous similar this article, percentage it amongst your friends together with blogger colleagues on Facebook, Google+ or twitter.