0
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
making three column footer
<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