How to Create a 3 Widget Footer in Blogger

Known for its ease of use and free access, Blogger's blogging platform allows its users to customize blogs by changing the header, theme, sidebars and footer content. This includes the addition of various widgets and giving the user a choice on where to place them. By default, many of Blogger's themes don't include a footer area for widgets, but one can be added with a bit of code. To add a sleek footer area to a Blogger blog, individuals will need to edit the HTML coding of the template itself.

Instructions

1. Log on to Blogger by using your Gmail address and password. Click on the "Design" link under the to edit. This will send you to the "Page Elements" page of your blog.

2. Click on the "Edit HTML" tab at the top of the screen. Back up your current template by clicking on "Download Full Template" and clicking on the "Okay" button that pops up to save it to your computer.

3. Expand your widget coding by clicking on the box above the main content area that says "Expand Widget Templates." Click your mouse anywhere within the content area and hold down the "F" and "Ctrl" keys on your keyboard to open the search field.

4. Type "</b:skin>" so that Blogger highlights it for you in the content area and paste the following CSS code above that tag.

   #footer-column-container {

   clear:both;

   }

   .footer-column {

   padding: 10px;

   }

5. Open the search field again by holding down your "F" and "Ctrl" keys and looking for where it says the following:

   <div id='footer-wrapper'>

   <b:section class='footer' id='footer'/>

   </div>

6. Replace "<b:section class='footer' id='footer'/>" with the code below.

   <div id='footer-column-container'>

   <div id='footer2′ style='width: 30%; float: left; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col1′ preferred='yes' style='float:left;'/>

   </div>

   <div id='footer3′ style='width: 40%; float: left; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col2′ preferred='yes' style='float:left;'/>

   </div>

   <div id='footer4′ style='width: 30%; float: right; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col3′ preferred='yes' style='float:right;'/>

   </div>

   <div style='clear:both;'/>

   <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

   <b:section class='footer' id='col-bottom' preferred='yes'>

   <b:widget id='Text2′ locked='false' title=" type='Text'/>

   </b:section>

   </div>

   <div style='clear:both;'/>

   </div>

7. Save your changes to Blogger and check your site. If the code was installer correctly, you'll see an empty footer area at the bottom of your blog.

8. Return to your Blogger dashboard by going to "blogger.com" and then click on the "Design" link under the blog you just worked on to reach the "Page Elements" area. Note how there are now three addition widget areas along the bottom of the page.

9. Add widgets to your new footer by clicking on the "Add a Gadget" link in each area. Click on "Save" to save your changes and preview your site.

Tips & Warnings

• If you aren't happy with your changes, you can always upload your old template by going to "Design" and then "Edit HTML." Click on the "Browse" button under the "Download Full Template" link and locate your saved template on your computer. Click "Okay" to upload that template onto Blogger.

References

• Cheth Studios: Create Three Column Footer in Blogger; Editorial Staff
• Anshul Dudeja: Create Three Column in Blogger Footer