[How to] Add 3 column Footer to Blogger blog [Tutorial]

0
249
views

Hello My Blogger Friends,First of all i would like to apologize for posting so late actually i was busy in in arranging my templates of my Social-Update and Networking Help Blogs .vist their and pass comments for new template design.

(Your footer looks will be accoring to your teplate design)

Today i m gonna share something for those Bloggers which are using template which has no footer in it.I m gonna tel you how you can Add 3 footer to your blogger template.
SO the tutorial for How to Add a 3 column footer to blogger template.goes here

You need to go to your Blogger Dashboard.
Click on Design-> Edit HTML .
Here i would like to recommend you to backup your template.See Why and How  to backup.

Now you have to find this piece of code (Say Code A) in your template

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

If you are unable to find this code try out with pieces of code like footer,footer section ,id=footer and match with the provided code .

Now you have to Replace whole code A with the following code

<div id=”footer”>
<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;”/>
<p>
<hr align=”center” color=”#5d5d54″ width=”90%”/></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>

Thats it .Now you can Save your Template .See in page elements you can add gadgets to your footer in 3 columns.
Enjoyed the article ..share your comments with Us.

Leave a Reply