Three Column Footer One

 It is pretty common that you might have seen all the professional blogger templates would possess a three column footer where in, they add details about their site or an about me widget and lots more. I recommend you to add this feature in your blog to make it more professional.

You may scroll down the page to have a look at the
bottom of the page to have a look at this widget which contains Popular Posts, Useful

Resources, Blog Archive and Recent Comments. Hope, you got an idea

about what a three column footer is.

To add this stylish three column footer to your blog, just follow these simple steps. As we always ensure safety, the first step would be to back up your template. To do this, simplynavigate to "Design->Edit HTML and make a backup of your template clicking on the "Download full template" link at the top of the page. Once the back up is over, follow these simple steps.

1. Search for the following text in your blogger template. To fasten your search, use "CTRL+F".

]]></b:skin>

2. Download the following text document : Three Column Footer One

/* -----   LOWER SECTION   ----- */

#lower {

       margin:auto;

       padding: 0px 0px 5px 8px;

       width: 100%;

       background:#333434;

}

#lower-wrapper {

       margin:auto;

       padding: 20px 0px 00px 0px;

       width: 942px;

}

#lowerbar-wrapper {

     border:1px solid #DEDEDE;

       background:#fff;

       float: left;

       margin: 0px 8px auto;

       padding-bottom: 3px;

       width: 31%;

       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;

}

/* Footer

----------------------------------------------- */

#footer {clear: both;text-align: center;color: $textColor;}

.footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;}

#footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;}

#footer .widget h2 {text-align:left;}

#footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;}

#footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}

#footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

#footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;}

#footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;}

#footer-wrapper a:hover {color:#cccccc;font-weight:normal;}

#footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;}

#footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;}

#footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}. Just paste the code in the document above the line mentioned in step 2.
3. Search your template for the following text.

</body>

4. Paste the following piece of code above it.

<div id='footer-wrapper'>
<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>

(Note: You may paste the above code in the place where you want the footer to appear. It is ideal to place this section before the credits section in your blog.)
5. Now, save your template and your ready with the footer section. Add any widget you want. Feel free to comment or contact me via Email for any assistance that you need to install this feature. I would be happy to help you!! See you soon in my next post!!!