How to Add 3 Column footer to Blogger Blog
February 22, 2009 by: Arshad1 year ago when i was just using blogger i always saw some blogs with 3 column footers and couldn’t find how to do that.I was a real amateur blogger.Today there are many blogger themes with 3 column footer but if your theme doesn’t have 3 column footer here how you can do it and make your blog with better design.
First please backup your blogger theme so if you cannot do it you can return upload your theme again.
Remove all your widgets from the footer.
In your theme codes find this code.
<div id=’footer-wrap’>
<b:section class=’footer’ id=’footer’/>
</div>
- Replace the code with the one present below
<div id=’footer-wrapper-container’>
<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>
Now give a style your footer with the below code
#footer-wrapper-container {
clear:both;
}.footer-col {
padding: 10px;
}
Related posts:
