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)

that code copy the given code

/* FOOTER */
#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( 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( left 10px no-repeat;border-bottom:1px solid #DEDEDE;}


5.Now find <div
OR <div
OR <footer>
OR <div
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



<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 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 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 style=’clear:both;’/>

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


That’s it.Enjoy………..
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


  3. sabin says:

    @Saturday UpdateYeh! it definitely works…… 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!


  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 *