How to Add Three Columns in The Footer
Of Course! to overcome this problem we just need to add some columns in the footer. How to do it?
1. Login to your blogger account.
2. Click the layout option >> Edit HTML
3. Find code
]]></b:skin> |
4. And then put the codes below above the
]]></b:skin> |
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
5. N Then find code below:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
6. So put the codes below under the codes in number 5 (above)
<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>
7. Save your Template.
To see the result of your work, click layout option. You ll see:
BEFORE:
AFTER:
gOOD LucK
Tags: Add three columns in the footer, how to add three columns in the footer, trick to adding three columns, editing template to be three columns in footer