Create A three Column Footer In Blogger Blog

This Footer widget contains 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.

Add This Three Column Widget Inside Your Blogger Templates,

Follow these steps,

click on the 'template' tab

Backup your Template before making any changes to your blog

Now   Expand Widget Templates

 click on the "Edit HTML".

Now find this code

]]></b:skin>

Copy the code shown below and paste Before/above it

{

       margin:auto;

       padding: 0px 0px 10px 0px;

       width: 100%;

       background:#ecf3f5;

}

#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 {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6yE3oiMHLJF8AQxYdi-wT4NxSPh7VRg9WwrB58NAb1DHDARauCVpMHqBqHx03W2Om6GfXbwBuoib3oSGT8VXVyRfM9VW2g-5c3YldTx3tVgJpUDBLSgCxy3hJtV_YgWVhltq_K71g68/s1600/greentickbullet.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}

}

6. Now Search For </body> and just above this code paste the code below,

<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 ,Done!