Saturday, June 16, 2012

How To Add 3 Column Footer To Blogger

When we searching blogger template, actually we
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.
Add 3 Column Footer To Blogger
1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this code by using Ctrl + F   <b:section class='footer' id='footer'/>

4. 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>




5. 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&quot;,Times,serif;
font:normal bold 18px Arial,Georgia,&quot;text-transform:none}
.footer-column {padding: 10px;}

7. Now save your template.After go back page element and add widgets as your like.
    Cheers

10 comments: