NOTE: I posted this article few years back when not much good 3-column footer blogger templates were available. But now you can find plenty of beautiful “3-column footer blogger themes” for free! I suggest you to use these new themes rather than altering your existing theme since there is a chance of error. Or of you badly need to tweak your theme, you can do the following steps!
- Go to Edit HTML page in the Blogger Layout Window
- Find the following Code:
<div id=’footer-wrapper’><b:section class=’footer’ id=’footer’/>
</div>
(Note:In some templates, instead of footer-wrapper you can find footer or footer-section)
- 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> - Then Save the Template.
