Add Three (3) column footer to Blogger

Advertisements

Adding Three (3) column footer to Blogger blogspot blogs has been made extremely easy by new feature of Template Designer of Blogger.Three (3) column footer make your blog more flexible to place important Gadget near top and to place less important things at bottom of your blog like About me , Blog Directories etc .

Also Read : Blogger Tips

 

Add Three (3) Column Footer To Blogger By using Template Designer

To add 3 column footer to your blog just follow these simple steps. before following these  steps store your existing footer data so you can restore it at later stages.

1. Log in to your Blogger Account.
2. Go to Design Tab of your blog in Dashboard and click Template Designer.

 

3. Click on Layout,Footer Layout and than select 3 column footer if you want to add 3 column footer.

4. And then click on Apply to Blog.

5. Click on Back to Blogger button and now you can see in the Page Elements that 3 column footer has been added.

If Designer Template Give you message that your template do not support this feature then you have to manually add 3 column footer by editing your Template which has been explained as under.

 

Add Three (3) Footer to Blogger by Editing Template

1. Go to Design < Edit HTML Section

2. Download your Template so in case of trouble you can restore it.

3. Now Look for following code in template html.

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

4.Replace this with the following code.

<div id='footer-columns'>
<div id='footer1' 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='footer2' 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='footer3' 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>

Save the Template and go to page element to add gadgets to your newly added 3 column footer in your Blogger Blogspot blog.

Advertisements

Share it