INDEX ADBRITE

 

Add 3 column footer to blogger blogspot,how?

Posted by anonymous in on Wednesday, July 21, 2010

You might have observed that most of the Blogger blogspot Templates have only one column footer. It may restrict you adding more widgets to the footer section. With the 3-column Footer, you can add more widgets like Recent Posts, Recent Comments, Archives, Labels and even some Ads. It’s very simple to add a three column footer section to a blogger(blogspot) blog.
(NB:before doing any changes please backup your template first)
Do the following steps:
Please Move all your widgets from the Current Footer Section to sidebar or any other section

1.Go to Edit HTML page in the Blogger Layout Window and tic mark expand widget

2.Find the following Code:
<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

(Note:In some templates, instead of footer-wrapper you may find footer or footer-section)

3.Replace the entire code from starting <div> to </div> 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>

4.Then save the template

This entry was posted on Wednesday, July 21, 2010 at 11:17 AM and is filed under . You can follow any responses to this entry through the RSS 2.0. You can leave a response.