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.
<b:section class='footer' id='footer'/>
change the above hilighted code with as below codes
Now find the </b:skin> code in your template
Immediately before above code, add the below lines of the code
Click on "Save Templates" and refresh your site
<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
Subscribe to:
Post Comments (Atom)
0 Responses to “making three column footer”
Write your valuable comments