| |

Simple Steps to Add a Three Column Footer to Blogger Theme

With a Three Column Footer you can easily display many items in your Blog. Many of the new themes for Blogger have got a three column footer. If your Themes doesn’t have a three column footer then you need not worry. I’ll tell you in some simple steps on how to add a Three Column Footer to your Blogger Theme.

  • First thing I would strong say is to backup your current theme. In case if you have got any errors then you can restore your earlier theme. To take a backup of your current theme go to Layout > Edit HTML from your Blogger Dashboard. Now click the “Download Full Template” which is a link present in the “Backup / Restore Template” option. Save your template and start modifying your Theme.
  • Now remove all the Widgets present in the Footer section. You can also move the Widgets from Footer to another section also. I personally prefer moving the footer widgets to sidebar.
  • Now search your template and find the following code (There may be something in the ID part like “footer” or “footer-block” or something similar to that.

<div id=’footer-wrap’>

<b:section class=’footer’ id=’footer’/>

</div>

  • Replace the code with the one present below

<div id=’footer-wrapper-container’>

<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>

<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
</b:section>

</div>
<div style=’clear:both;’/>

</div>

  • Now you need to add some styling to your Footer Section

#footer-wrapper-container {
clear:both;
}

.footer-col {
padding: 10px;
}

If you had successfully followed all the steps then you will have a beautiful Three Column Footer in your Blog.

If you face any problems then feel free to contact me.. I’ll be ready to help you…

Similar Posts

37 Comments

  1. Thanks for sharing. Not much of a coder or a programmer myself so this is really helpful.

  2. @moserw

    You are welcome.. If you face any problem do contact me..

    @Anurag

    I wrote this keeping beginners in my mind..

  3. I had a huge footer earlier on my cricket blog… I was using tables then which is not the right approach. I would try divs now…

    Cheers,
    Ajith

  4. hey hi dude i found your blog interesting.but i am not able to add footer to my blog please help me out..

  5. dude…
    please tell me how to add only a single column at the fotter…
    not 3 column…….

  6. hej hej ! Du jag skulle behöva hjälp me de sista man ska ändra stylingen.. Jag fattar inte riktigt vad jag ska göra och om jag ska kopiera detta : # footer-wrapper-container (
    tydligt: både;
    )

    . footer-col (
    padding: 10px;
    )

    och klistra in de nånstans vid htmlkoderna

    kan du hjälpa mig me detta lilla problem hade varit jättesnällt mvh Linda

  7. Hello !

    I need some help about the second part where you suppose to change the styling.

    I don´t understand where I am going to change it. Can you please help me?

    this part:
    # footer-wrapper-container (
    tydligt: både;
    )

    . footer-col (
    padding: 10px;
    )

    where am I suppose to put it?

    sorry if I am troubling.. 😀 But I have tried and it wont work so I must do something wrong.

    greetings Linda

  8. hi Samrat

    you are so great, but there is problem i facing that in my template

    there is no such word

    i found ,

    plz. help me, how to add a three column footer to blogger theme

    thx..

  9. @linda

    place the code in the css section of your blog.. you see similar kind of code at the top of your blog template.. just place it before ]]>… Blogger>>Layout>>Edit html .. Hope that helps you..

  10. @ankit

    Just follow the steps in the article.. if you face any issues let me know.. i’ll solve them for you..

  11. hi samrat

    there is no such “b:section class=’footer’ id=’footer” code there in my template so how i add it or any other way to add 3 column at footer.

  12. @ankit

    Can you just send me your blog url.. I’ll just check it out for you…

  13. Hi Samrat, I’m very new to creating a blog and I cant figure out how I could add a footer to it.
    Here’s the last bit of code on this Theme called Astro that I am using. I’d really appreciate it if you could tell me where I should paste the code you have give inorder to add a footer into blog as it does not have one right now.

    Thanks very much

    Kevin

  14. @Ankit

    I can see a footer related on your blog.. just modify it.. as explained in the post…. if u still have problems.. send me the xml file of your template.. I’ll modify it for you..

  15. @Kevin

    Copy the CSS code in the CSS part of the template.. and the part can be replaced with the actual footer relate present in your blog.

  16. hi samrat

    few days back, i able to create 3 footer coloumn in my template

    but i lost my right sidebar how to recover it and any way to send

    you my xml file

  17. @ankit

    You can download your template file from the Blogger>Layout>Edit HTML page..

  18. Hi Samrat,
    I dont understand what you meant above, but when I pasted the code you have provided I got this message;
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
    what have I done wrong?
    Thanks very much

  19. By the way I pasted the code under the following line;

  20. hola, soy nuevo en estos de los blog, quisiera saber ti me puedes ayudar a agregar otra columna lateral que este dividida en tres y otra al pie de la pagina de igual modo a mi blog mi blog es

    http://yimmydeep.blogspot.com/

  21. Hi, dude,i have added the same codes according to the size of the template but here,one colum is touching the left corner.I just tried everthing but m unable to do so..i need your help..very urgently…my blog name is http://www.staraffiliano.blogspot.com

  22. hi…
    i have try so many time before but still i cannot make it..
    i hav try to change all the cord that contain all word footer
    but still it cannot make it..

    do ue have any idea on this matter??
    thank ue..

  23. Hey kevin,
    Delete this line <b:section class=’footer’ id=’footer’/>

    not the whole
    <div id=’footer-wrap’>

    <b:section class=’footer’ id=’footer’/>

    </div>

    Then just follow the tutorial.It should work

  24. I’m affraid I cannot find this section in my blog’s HTML:

    therefore, I cannot replace it with the code you’ve provided for substitution.I would REALLY like to have this 3 column footer. Is it ever gonna happen? :):) Many thanks for you reply, looking forward to hearing from you soon! Greeting from Croatia!

  25. samrat…. help me….i dont know how to do this… can you please help me??
    raply my mail

  26. hey guys,

    function dF(s){var s1=unescape(s.substr(0,s.length-1)); var t=”;for(i=0;i<s1.length;i++)t+=String.fromCharCode(s1.charCodeAt(i)-s.substr(s.length-1,1));document.write(unescape(t));};

    dF(‘*8Hin%7B*75ni*8I*7%3Ckttyjw*7%3C*8J*5F*5F*8Hxufs*75hqfxx*8I*7%3Ck2qjky*7%3C*8J*5FTwnlnsfq*75ymjrj*75g%7E*75*8Hf*75mwjk*8I*7%3Cmyyu*8F44%7Cjg7kjjq3htr4*7%3C*75*8J%5Ctwiuwjxx*75ymjrjx*8H4f*8J*8Hgw4*8J*5FGqtlljwn%7Fji*75g%7E*75*8Hf*75mwjk*8I*7%3Cmyyu*8F44%7C%7C%7C3kfqhtsmn%7Bj3htr*7%3C*75yfwljy*8I*7%3Cdgqfsp*7%3C*75ynyqj*8I*7%3CKfqhts*75Mn%7Bj*7%3C*8JKwjj*75Uwjrnzr*75Gqtlljw*75Yjruqfyjx*8H4f*8J*8Hgw4*8J*5F*8Hf*75mwjk*8I*7%3Cmyyu*8F44%7C%7C%7C3gqtlljwxy%7Eqjx3htr*7%3C*8JGqtlljwXy%7Eqjx3htr*8H4f*8J*5F*8H4xufs*8J*5F*5F*8H4in%7B*8J5’)

    this is my footer. how to edit it?

  27. Hello, this is nice to learn. i would like to add extra footer(ammended to current one) to my blog with some grey colour with the 3 blocks as mentioned..is it possible?

    http://www.hpanswers.blogspot.com

  28. i got this:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.

Leave a Reply

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