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…

36 Comments

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

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

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

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

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

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

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

  8. @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.

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

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

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

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

  13. 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!

  14. 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?

Leave a Reply

Your email address will not be published.


*



*