My blog template doesnt have any bootom section so i am now about to place three column at the blog bottom place. So the steps are as folow
1. Log in blogger account
2. Go to layout then edit HTML
3. Now (Ctrl + F) Search for below codes,
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
4. The we need to replace the red line 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;'/>
<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. Find </b:skin> and place the below codes before it
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
6. And save Your Template.
Now Go to Page elements you can see three column created in your footer above your main footer.
0 Response to 'How to add three column at the bottom'
Post a Comment