How to add 3 columns footer to blogger (split the footer into 3 columns)??

­
Although the templates provided by blogger has the
feature of the 3 column footer but if you use the templates other than blogger
templates,It may not have footer column or may only contain one or two columns
footer template.
In this Tutorial I am going to share a trick about
splitting the blogger footer into 3 columns.For this simple tweak follow the
given steps below:
1.   Sign
in to blogger
2.   Go
to design>Edit HTML
3.   Find
the given tag (press ctrl + F to open the find box and copy the code to find
box for quick finding)

]]></b:skin>
    4.Above
that code copy the given code

/* FOOTER */
#footer-wrap{}
#footer{margin-top:10px}
#copyrights{color:#959595;text-align:center;padding:18px 0;background:#211C1C;text-shadow:0px 1px 0px #000;}
#copyrights a{color:#959595}
#copyrights a:hover{color:#fff;text-decoration:none}
#credits{color:#919191;text-align:center;font-size:11px;padding:10px 0;text-shadow:0px 1px 0px #000;}
#credits a{color:#919191;text-decoration:none}
#credits a:hover{text-decoration:none;color:#919191}
#footer-column-container {clear:both;padding:10px;background:#f4f4f4;color:#393838;}
#footer-column-container a{text-decoration:none;color: #393838;}
#footer-column-container a:hover{text-decoration:none;color:#C00302;}
#footer-column-container h2{color:#fff;background:url(http://3.bp.blogspot.com/-nmHwH4mynUQ/TYlNGIGj0LI/AAAAAAAAC84/yOTxHsekNbA/s1600/widget-title-bg.png) left top repeat-x;font-size:15px;line-height:15px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:8px 0 8px 10px;text-transform:uppercase;text-shadow:0 1px 0 #710000;}
#footer-column-container ul{list-style-type:none;margin:0px;padding:0px;}
#footer-column-container ul li{padding:6px 0 6px 14px;margin:0;background:url(http://3.bp.blogspot.com/-22xLwnnoI5Q/TYlNFgLFGEI/AAAAAAAAC8w/fTCBx8-xvZY/s1600/widget-list.png) left 10px no-repeat;border-bottom:1px solid #DEDEDE;}

 

5.Now find <div
id=’footer’>
OR <div
class=’footer’>
OR <footer>
OR <div
id=”wrapper”>
OR <div class=”wrapper”>and paste the
code just below the any of the code mentioned above.(Note:-You can also add the
below code above the credit or copy right section i.e above <DIV
id=’copyright’>
OR <DIV
class=’copyright’>
)

 

 

<DIV class=’span-24′>
<DIV id=’footer-column-container’>
<DIV id=’footer2′ style=’width: 33%; 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: 33%; 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: 32%; 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>
</DIV>

6.Save your template and go to Design>>Page
Elements.You can see your footer splited.

 

That’s it.Enjoy………..
Please
Comment regarding this post.Feel free to comment if you have any problem or
views regarding any post……

You may also like...

6 Responses

  1. Anonymous says:

    Thanks, this is what i wan. Good one. Thank you.

  2. Hello Mr. Sabin.

    I would like to ask if this works with any template. I have tried to do some instruction from other blogs but when i tried it, it just gives me error and i haven't saved my previous template. here is where i want to put it http://saturdayupdate.blogspot.com/

    Thanks.

  3. sabin says:

    @Saturday UpdateYeh! it definitely works……..you may try it….if you find any problem in implementing this tweak,you may leave your comment

  4. Hannah says:

    thanks so much! A few adjustments here and there and this went perfectly with my blog!

    -hannah

  5. surfme says:

    Thanks man, it worked for my blog. Keep up the good work!

  6. Alina says:

    Hello! I simply would like to offer you a huge thumbs up for the excellent information you have got here on this post.I am returning to your site for more soon.
    Check out my web blog ; Remove Background

Leave a Reply

Your email address will not be published. Required fields are marked *