Breaking News
Loading...
Sunday, April 3, 2016

How to Create Three Column Widget footer in Blogger ?

How to Create Three Column Widget footer in Blogger ?
Have you ever thought about having an extra space in your blogger footer area to add specific widgets like Facebook like box, popular post, recent comments and advertisement etc.? Creating a three column widgetized footer is the perfect solution of this problem. and its allow 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 provides this type of feature by default in their templates. By Blogger Basic In this article, we will show you How to Create Three Column Widgets footer in Blogger.


Why to Create Widgetized footer ?

         Sometimes you observed that 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. But if you having an extra three widgets area in blogs footer would certainly provide you much relief in moving any of your sidebar widget to the footer widget area, without removing them from your site.

How to create three widgets footer in blogger ?

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

<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;'/>

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

#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 now you’ll notice that three widget areas towards the bottom of the page. You can add more gadgets or can edit them depends on your needs and requirements.

Note:- Dear Readers Your Feedback Is Very Much Important For Us. Give Us Your Feedback Via Comment Box Given Below :)

0 comments:

Post a Comment