Add Beautiful 3 Column Footer to Blogger | InfoTechBlogging InfoTechBlogging: Add Beautiful 3 Column Footer to Blogger

Posted by Syed Muhammad Ali

Footer Column plays role in helping visitor to understand your blog. You can place your pages and other link in footer and visitor can easily see your footer. I saw a footer from a blog and i have customized it. You can easily add it to blogger. Just follow the below steps

  • Find  ]]> by pressing Ctrl+F key
  • Paste the Below code Just Above it

#footer-wrapper {clear: both;width: 100%; height:4px; background: Purple;}

You can change the border color by replacing Purple with your own colour

  • Now Search For tag
  • Just above it paste the below code


  • Find ]]> in template by pressing Ctrl+F
  • Paste the Below Code Above it

/*—– Infotechblogging three Column Widget (Green Border) STARTS—–*/#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background: url( repeat scroll 0 0 #222222; } #lower-wrapper { background: url( repeat scroll 0 0 #222222; margin:auto; padding: 20px 0px 20px 0px; width: 960px;border:0; } #lowerbar-wrapper { background: url( repeat scroll 0 0 #222222; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 30%;text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; 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; border:0; color:Purple; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; }

/*—– Infotechblogging three Column Widget (Green Border) END—–*/

  • Change 960px to Your Required Width or Replace it with 100% to get Sheet Length Footer

  • Now Search For tag
  • Paste the below code just above tag


Save your Template and you are done!

I hope you like this widget, Ask any queries in below comments 

Follow Us!

About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter