Installing three column footer in Blogger.

Got tired of adding  widget adding widget in one column footer then it time to go ahead by installing third column footer.It is easy as adding column(sidebar) in Blogger.If you are using blogger default template then this tutorial is not for you.The tutorial will just describe you how to install three column footer.But you need to identify the footer code as it varies in different template.

1. Go to Blogger Dashboard>Design or Template
2. Back Up your Blog.
3. Go to Edit HTML
4. Find the code which is similar to this.(It may be different in different template )

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>
   

5. Copy the below code just after </div> tags.

   <!-- Buttom Bar starts -->
   <!-- Bloggerrounder.blogspot.com -->
   <div id='buttom-wrapper'>
   <div id='buttombar-wrapper'>
   <b:section class='buttombar' id='buttombar1' preferred='yes'>
   <b:widget id='HTML1' locked='false' title='HTML Javascript' type='HTML'/>
   </b:section>
   </div>
   <div id='buttombar-wrapper'>
   <b:section class='buttombar' id='buttombar2' preferred='yes'/>
   </div>
   <div id='buttombar-wrapper'>
   <b:section class='buttombar' id='buttombar3' preferred='yes'/>
   </div>
   <div style='clear:both'/>
   </div>
   <!-- Bloggerrounder.blogspot.com -->
   <!-- Buttom Bar ends -->
   

6. Add the following code as CSS i.e just above  ]]></b:skin>

   #buttom-wrapper {
    background: #EEEEEE;
    width:99%;
    margin: 0 auto;
    padding: 0 10px  10px 0;
   }
   
   #buttombar-wrapper {
    float: left;
    width:30%;
    text-align: left; 
    word-wrap: break-word; 
    overflow: hidden;
   }
   
   .buttombar .widget-content {
   padding: 0px 3px 3px 3px;
   }
   
   .buttombar ul {
    list-style-type:circle; 
    margin-left:10px;
   }
   

7. Where,
• In Line 2, You can Change #EEEEEE to change background of footer.You can get six digit color code from here
• In line 3,you can change width:99% as your wish in percent or pixel.If successful implementation we recommend you to use measure it.
• In line 10 change the width:30% for changing width of column of footer.
• Change margin or padding to increase or decrease the space of inside or outside of container .
• You can add More CSS as your wish after line 23 for styling the footer.
8. Click on Save button
9. Go to layout of your Blog you can see three column like this.
   
10. Enjoy by adding Widget or Dragging Widget from sidebar to footer.

Bye.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.