How To Add 3 Column Footer To Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

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",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