Utilize Your Blogger Footer By Three Column Footer !!

Hi guys This trick will Help you make Three Column Footer at the Bottom of your Blog/Site to help you utilize that space. And it really makes your blog look cool and even saves quite good amount of space.
You might have seen many blogs with such footer including mine. you also want to put this right? the go ahead and Try it.

And remember before doing anything with your template please back up your template.


Here are the steps you should follow :

• Log in to your blogger account.
• Go to Design --> Edit HTML
• Copy the code below, and paste above ]]></b:skin> 

/* -----   LOWER 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;
}

=> Change the background color of this widget
=> Adjust this width value in accordance with the width of your blog.
=> That are the background colour and width of the three columns where the widgets are added.
=> Change the color of the title
=> Change the font size and family
=> Change the thickness, style and colour of the border that appears at the bottom of the title
=> Change the size, style and colour of the border that appears below links.

• Then copy the code below, and paste above </body> 

<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 now. Then check in the Design --> Page Elements 

Credits

Full Blog Tricks

Posted in: Blogging