Add: Three column widget footer to your blog.

Posted by Faheem Mustafa

Want to Hack your Blog? Lick adding three column Widget Footer? You can download any template for you blog that already contains Three Column widget Footer, but if you liked a template that contains no Three Column Widget Footer, No Problem. upload it to your blog. and follow my instructions to add a three column widget to your blog.

FS-Advisor will guide you to add this 3 column widget footer to your blog. All that you need is to Login to your blogger account.
Layout > Edit HTML > 
1:   find  </b:skin> 
2:   Copy the following code and paste it before  </b:skin>  
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
3:   Save your Template and find the following code
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/> 
</div>
4:   Change the red code with the following code
<div id='footer-column-container'>

<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; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
5:   Now Save you Template and all is Done.

No go to Layout > Page Elements
look at the footer, there you will be able to see the Three Column Widget Footer.

blog comments powered by Disqus
Related Posts with Thumbnails