Subscribe to "TechnoSamrat" for FREE updates on Tech News, Mobile Tips, Software Reviews & Blogging Tips
Browsing » Home » Blogger / Blogspot, Blogging, Web 2.0 & Web Designing

Simple Steps to Add a Three Column Footer to Blogger Theme

Written By Samrat| 3 October 2008| 36 Comments

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 »

  • moserw said:

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

  • Anurag said:

    Nice Tutorial…
    Much Easy for Beginners Like Me…

    - Anurag R.C.
    http://www.pcdrome.com
    Latest Post:
    http://www.pcdrome.com/2008/09/hide-windows-using-anti-bosskey/

  • Samrat said:

    @moserw

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

    @Anurag

    I wrote this keeping beginners in my mind..

  • Dinh Trung said:

    Hi Samrat,

    Thanks for your useful post.
    By the way, pls kindly share the smart way for yr site which jump to PR4 in just 25 days !!!!

    Dinh Trung
    http://www.kienthucdulich.info

  • Ajith Edassery said:

    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

  • Aadil said:

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

  • exatteviamp said:

    Complimenti per l\idea della descrizione dell\appendicectomia. Davvero simpatico il sito!
    Bravo!
    www ibox it
    gambar pemerkosaan
    abbraccio la
    ape to

  • c3v3n said:

    thanks for your post..it’s worth to me…

  • manju said:

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

  • Samrat said:

    @manju

    Just modify the footer DIV and make it 100%…

  • linda said:

    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

  • linda said:

    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.. :D But I have tried and it wont work so I must do something wrong.

    greetings Linda

  • ankit said:

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

  • Samrat said:

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

  • Samrat said:

    @ankit

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

  • ankit said:

    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.

  • Samrat said:

    @ankit

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

  • ankit said:

    hi samrat

    here is my blog url

    http://www.latestinfo4u.blogspot.com

    thx..

  • Kevin said:

    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

  • Samrat said:

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

  • Samrat said:

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

  • ankit said:

    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

  • ankit said:

    thx………..

  • Samrat said:

    @ankit

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

  • Kevin said:

    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

  • Kevin said:

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

  • yimmy alba said:

    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/

  • jobsforbeginners said:

    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

  • ieychiey said:

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

  • Preetish said:

    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

  • Tea Jukić said:

    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!

  • Tea Jukić said:

    sorry, the code I cannot find is:

  • Amirul Syafiq said:

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

  • blackout said:

    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?

  • blackout said:

    By the way, this is the footer:

    [code]

    Original theme by WordPress themes
    Bloggerized by Free Premium Blogger Templates
    BloggerStyles.com

    [/code]

    How should i add the 3 column footer?

  • HP Answers said:

    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

Leave your response!




*