0

making three column footer

now you can change your blogger templates to three column footer as your wish...get ready to make the html hard work! get release your mind,because it' carefully done.first,i have a request:-please save your templates html code in a notepad or wordpad.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>

<b:section class='footer' id='footer'/>
change the above hilighted code with as below codes

<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>

Now find the </b:skin> code in your template
Immediately before above code, add the below lines of the code

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Click on "Save Templates" and refresh your site

0 Responses to “making three column footer”

Subscribe