cant find whats we want.So, we have to customize
template by own.Sometime we cant find 3 column footer
blogger template. In this tutorial will explain how to adding
3 column footer to blogger.adding three column feature is easy.
its not hard like you think. Follow These steps to
add it to your blog.
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
3. Add check mark in Expand Widget Templates.
2. Find this code by using Ctrl + F <b:section class='footer' id='footer'/>
3. Replace <b:section class='footer' id='footer'/> With below 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>
4. Now Find this code by using Ctrl + F ]]></b:skin>
6. Paste below Before ]]></b:skin> code
/* Footer by www.bloggertrix.com */
#footer-column-container {clear:both;}
#footer-column-container h2{font-size:18px;text-align:left;color:#ddd;Times New Roman",Times,serif;
font:normal bold 18px Arial,Georgia,"text-transform:none}
.footer-column {padding: 10px;}
7. Now save your template.After go back page element and add widgets as your like.
Cheers

No comments:
Post a Comment