Saturday, August 04, 2012

Add 4 Column Footer to Blogger

See How to Add a 3 Column Footer to Blogger:

  1. Log in to Blogger if not already logged in
  2. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes.
  3. Navigate to Template > Edit HTML
  4. Back up your template as a precaution by downloading it to your computer.
  5. Find the following section

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

    If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
  6. To Add a 3 Column Footer to Blogger:
    Replace all the code located in Step 5 with the following

    <div id='footer-columns'>
    <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>

    To Add a 3 Column Footer with a Lower Footer Section:
    Replace all the code located in Step 5 with the following

    <div id='footer-columns'>
    <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    <p/>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>
    That's all. Now try your self. Enjoy...

[Please Comment Here for any Help]

No comments:

Post a Comment

!! COMMENT HERE FOR ANY PROBLEM !!

Featured post

WordPress yoast plugin remove date or article:published_time

Yoast is an essential plugin for WordPress SEO. It is one of the best SEO plugin for wordpress right now. But, after disabling date from ...