Add Footer Columns To Blogger Templates

Sometimes you need to add a custome footer columns with widgets on the blogger template you use. So in this easy step by step tutorial we will show you how to add this columns. In this footer widget example there is three columns where each column can accommodate as many widgets as you can add.
In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

– Go To Blogger > Layout > Edit HTML
– Back Up your template
– Search for ]]>
– Just before ]]> paste this CSS code :

/* -----   Footer SECTION   ----- */ 
#lower { 
       margin:auto; 
       padding: 0px 0px 10px 0px; 
       width: 100%; 
       background:#333434; 
}  
#lower-wrapper { 
       margin:auto; 
       padding: 20px 0px 20px 0px; 
       width: 960px;
}
#lowerbar-wrapper { 
     border:1px solid #DEDEDE; 
       background:#fff; 
       float: left; 
       margin: 0px 5px auto; 
       padding-bottom: 20px; 
       width: 32%; 
       text-align: justify; 
       font-size:100%; 
       line-height: 1.6em; 
       word-wrap: break-word;  
       overflow: hidden; 
}
       .lowerbar {margin: 0; padding: 0;} 
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 { 
      margin: 0px 0px 10px 0px; 
       padding: 3px 0px 3px 0px; 
       text-align: left; 
       color:#0084ce; 
        text-transform:uppercase; 
      font: bold 14px Arial, Tahoma, Verdana; 
       border-bottom:3px solid #0084ce; 
}
.lowerbar ul { 
      margin: 0px 0px 0px 0px; 
      padding: 0px 0px 0px 0px; 
      list-style-type: none; 
}
.lowerbar li { 
      margin: 0px 0px 2px 0px; 
      padding: 0px 0px 1px 0px; 
      border-bottom: 1px dotted #ccc; 
}

– Now Search For and just above add this code :

<div id='lower'> 
<div id='lower-wrapper'> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div> 
<div style='clear: both;'/> 
</div> </div>

– Save your template and you are done

Now visit the page Layout > Page Elements and start adding widgets.