Tricks To create 3 Column Transparent Footer on Blogger Template

Tricks To create 3 Column Transparent Footer on Blogger Template

0
data:blog.title
blogger footer

Blogger templates without footer looking not a professional template. But many blogger run use blog templates without footer to load the templates faster. But loading time is not depends on footer its all about widget. If you use more widget in your templates then it will take time to load. Three column widget at the bottom of the blog mostly used by professional Bloggers. Just follow the simple tricks from below to add three column footer section at the bottom of your blog templates.


Live Demo


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin>  and Save the Template

/*--Footer Section By www.bloggerspice.com--*/
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#000000;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#333333;
       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;


Step 5 Now Find this code </body>  by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </body>  and Save the Template

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



Step 7 You have done ! Now go to layout and Start adding widgets.


Customization

  •     Change 000000 for changing the background color of Footer. Use Color Picker from Here 
Tricks To create 3 Column Transparent Footer on Blogger Template
4 Stars stars - "Tricks To create 3 Column Transparent Footer on Blogger Template" Blogger templates without footer looking not a professional template. But many blogger run use...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *