Add a Customized Three Column Footer Widget In Blogger


Three-Column-Footer You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

 

See a screenshot, Three-Column-Footer-Widget

Add This Three Column Widget Inside Your Blogger Templates

Follow these steps,

  1. Go To Blogger > Layout > Edit HTML
  2. Back Up your template
  3. Search for ]]></b:skin>
  4. Just before ]]></b:skin> paste this CSS code,

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;

#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
      
background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

 

 

    5.   Now Search For </body> and just above this code paste the code below,

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

 

 

 

6.  Save your template. done!

Now visit the page Layout > Page Elements and start adding widgets! :>>

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator

  • background:#333434;   Changing the six digit colour code will change the background colour of this widget.
  • width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
  • background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added.
  • color:#0084ce; This is the Colour of Title Headings
  • font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.
  • border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
  • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.

That’s All!

A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor!

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

98 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. hey mohammad

    one thing for you

    _ ________
    / / /----> thankyou.......................
    -(o)-----(o)

    a truck full of thankssssssss

    ReplyDelete
  2. I cant find Step:5 no code.
    How can I add this?

    ReplyDelete
  3. @saimoom

    Find this instead

    <div class='left'>

    And paste the code in step #5 just above/before it.

    ReplyDelete
  4. I can find it left div, but when I am going to save the templete it show (The string "--" is not permitted within comments.)

    please help me again.
    Thanks.

    ReplyDelete
  5. Update:-

    I have updated the code you guys can try again. It will surely work perfectly this time! :>>


    @saimoom
    Do as guided (In the comments) this time.

    ReplyDelete
  6. Nice code, but I cannot style widget fonts, particularly the headings. My sidebar widgets already use the h2 heading and I want to use the same properties for the footer widgets except for some color changes (because the footer color is different from the sidebar's). I've created a h5 heading that should work, to replace the .lowerbar h2 but it doesnt...Any suggestion?

    ReplyDelete
  7. hai MBT Here is one suggestion for
    i proudly tell u that u are a unique designer of blogger templates but while u r providing templates why dont u put an Image of the layout page so that readers can see the preview of the page elements for ur template.

    ReplyDelete
  8. @Saimoom,


    Send me your template. I will do it for you. You can email me your template at mustafa.stc@ G Mail

    @Steve

    You already have a three column widget at bottom! Did you share the right blog URL? :>


    @Fred
    To edit the font size, colour and style of the heading h2, edit this part of the CSS code,

    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    color:#0084ce;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    border-bottom:3px solid #0084ce;
    }


    To increase or decrease the font size, simple change the value 14px I have visited your blog and found that your Heading colour is #999 and the border colour is #ccc. Make your changes accordingly. For using a different colour code, use this tool -> Color Code Generator

    Feel free to ask anything still unclear :>


    @Chinna

    Thanks pal! I will do so in my future posts :>>

    ReplyDelete
  9. Muhamed di you receive my request I have no footer and need to add a footer widget to have the ability to add the custom widet to it?

    ReplyDelete
  10. @Remington

    Bro I really received no mail. Will be waiting to receive it soon :>


    @leathergloves

    Thanks for the love and encouragement. Highly appreciated it! :>>

    ReplyDelete
  11. I suggest using 31% instead of 32%. Your blog and my test blog http://blogger-templates-123.blogspot.com (for testing) looks warped i.e. 3rd widget comes down when I viewed in 800x600 resolution.

    Use the same color for the widgets as the background so that the different lengths of the widgets does not stand out.

    ReplyDelete
  12. This was a great post for blogspot bloggers. Thanks for sharing.

    ReplyDelete
  13. @LeatherGloves

    Yeh it will certainly shrunk in 800 by 600 screen resolution. Actually the widget is set to width 960px and this goes just fine with a screen resolution 1024 by 768.
    You can easily adjust the settings by changing the width to 800 or 750px. In your case reduce the 32% to something 20-25%. Keep playing with it until you get a well aligned widget. Hope that would help :>

    @Pavan Somo

    Thanks pal!

    @Easymovies

    Guess that one is not mine :P

    ReplyDelete
  14. HI Mohamed My issue is that I don't have a footer in my private Blogg. Can you show me the code to add a footer. I have added the 3 column footer to my main blogg but my training Blogg has no footer to be able to add widgets, and the code.
    Thanks I really appreciate what you do here I have learned alot.
    Regards,
    Mark

    ReplyDelete
  15. @Remington

    Well the widget can be added to any blog. I guess you are not able to find a certain code. Share your Blog url so that I could tell you which code to search for and where to add the three column widget code.

    ReplyDelete
  16. hi I can't find step 5 on my blog either and my blog url is www.fantagerocks.com or fantagerocks.blogspot.com

    ReplyDelete
  17. All of you kindly find this code instead,

    <div id='footer'>


    and add the widget code just above <div id='footer'>
    This will certainly work!

    ReplyDelete
  18. @Leathergloves

    Great work! :>


    @Shabnumahsan

    W/salam
    Dear paste the html code just above </body>


    @Sreejesh

    Instead of div credits find </body>
    and paste the html code just above </body>


    @Poras
    You can add the widget below Header by choosing the HTML/JavaScript widget. Simply copy and paste the HTML code inside the HTML/Javascript widget. That will work :>>

    ReplyDelete
  19. No i m saying i want to add the These three widget after the Header Section instead of bottom so if there is any way plz tell me.

    ReplyDelete
  20. @Poras

    I told you the same thing dude :| To add those three columns below your header simply copy-paste the html part of the code inside HTML/JAvaScript widget and drag this widget and drop it under your Blog HEader.

    Another method is a bit hectic but worth trying.
    1. Search for <div id='header-wrapper'>
    2. And just below <div id='header-wrapper'> your will find this code </b:section></div>
    3. Simply paste the HTML code below </b:section></div>
    4. Done!

    If you are confused what I mean by HTML code then here is the code as already shared in the post above,

    <div id='lower'>
    <div id='lower-wrapper'>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>
    <div style='clear: both;'/>
    </div> </div>

    ReplyDelete
  21. Those who can not find the code in step#5 may find the code below instead,

    </body>
    And paste the widget code just above </body>
    Things will work as it did for others!

    ReplyDelete
  22. thanks for tutorila ilike this, i tray your article and succses thanks ilike this

    ReplyDelete
  23. Hi Mohammad ! After I add 3 column footer in my template, sidebar and main are not same height! Why ? Please help me ! Thanks !

    ReplyDelete
  24. @Winoath

    Decrease the width size and make it equal to the size of your blog main body. Try 800px,

    #lower-wrapper {
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;

    }

    Hope this helps.

    @thanphong07

    Your question is not clear dear! The footer has to do nothing with sidebar widgets length or height. Please explain in detail so that I could suggest something.

    ReplyDelete
  25. i loved it... i had applied it as u said bt my background was not matching with it. i gues coding is poetry 4 u but not for a noob like me. hehe. can u give me sme more idea how can i add it my current background. i want it to have that same wallpaper effect through out!!!

    www.dudoism.blogspot.com

    ReplyDelete
  26. @Dudo

    You will surely be a master one day too. so chill!

    Dear simply replace,
    background:#333434;

    with this,
    background:#000000;

    and
    background:#fff;

    with this

    background:#666666;


    If you want to add your background image to it then do this,

    replace

    background:#333434;

    with
    background:url(Add-Image_link-here);

    and replace this

    background:#fff;

    with this,

    background:#000000;


    Hope this helps :>

    ReplyDelete
  27. oh well thx a lot buddy!!!!

    ReplyDelete
  28. Thank you ! You are great ! I completed the step just a minute only ! Impressive !

    ReplyDelete
  29. Hello Sir.
    My problem is 3 widget by your way should arrange like

    1 2 3

    But my widget have arranged like this type

    1
    2
    3

    How can I arrange it 1 2 3

    ReplyDelete
  30. sir showing
    1
    2
    3
    but when i add a gadget they auto change like 1 2 3

    ReplyDelete
  31. Assalam o Alaikum!

    Thank u so very much for sharing it.

    My Blog URL is : http:/deewanjee.blogspot.com

    Best Regards

    Muhammad Kamran Khan Deewan (Deewanjee)

    ReplyDelete
  32. Thanks! Great info, just what I was looking for! I would love to donate but I don't have money sorry... :(

    ReplyDelete
  33. my widget also showing
    1
    2
    3

    how can I do it 1 2 3 ? PLEASE HELP

    ReplyDelete
  34. greetings i want to have a only 1 box under the footer not 3 can you help me sir.? tnx..

    ReplyDelete
  35. Just wanted to say thank you for posting this awesome widget hack! I applied it to my blog without any problems. Awesome stuff!

    ReplyDelete
  36. Awesome! I ve tried many times and cant do that but this is realy simple. Just took my 45 sec... Thanks a lot

    ReplyDelete
  37. thank you for sharing this...With this tutorial, I can edit and customize some templates...Thanks

    ReplyDelete
  38. @Admin

    W.salam Brother!

    Dear simply reduce the percentage value in this part
    width: 32%;

    Make it 26% if still it remained the same then decrease it further. Hope this helps. :)

    ReplyDelete
  39. Excellent post! This footer makes my site look so much cleaner. Keep up the great work.

    ReplyDelete
  40. If someone already asked this, I apologize. Is there any way to add this underneath my posts? I don't have a footer on my template either. Right now, it's all squished at the bottom of my template and I can't tell what is what on the page elements...

    ReplyDelete
  41. Hello. I installed with no problems, however even though I modified the width to the same as my body width, the widget still viewed as full width of the blog. I believe there was another code placed in there for another widget of some sort that is preventing the three column code from being actively seen.
    DillyDallyandFlitter.com if anyone is still monitoring these replies, I'd love a little quick help!
    thanks much in advance
    Michelle

    ReplyDelete
  42. @Michelle

    My pleasure mam. There are actually two widths to be controlled. One is the width of the main container and second is the total width of the three columns each divided by 37%. In your case you will need to control the width of the container by editing this width,

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333434;
    }
    Reduce that 100% to 95 or 90 or 85 and keep adjusting until the widget fits perfectly in your template. Hope this helps. :>

    @Maximus
    I thank you brother for your kind words and needed feedback. Brother all steps are clearly mentioned. Just start from step one and keep going and where ever you faced a problem just post me a comment, I will reply the earliest possible. You will enjoy it more when you try to add it by your self. Also share your blog URL where you want to add it.
    I hope you will try it and give me the good news soon. :>

    ReplyDelete
  43. Dear Mohammad,
    i used this trick it work but the color of my text is #EAE31A
    and i have no option to change it can you tell me how i can change here's my site hackerrstips.tk

    ReplyDelete
  44. @Abhishek

    You mean you want to change those black titles to #EAE31A? IF yes then simple do this:

    1) Inside this part of the CSS code above, replace #0084ce with #EAE31A

    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    color:#0084ce;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    border-bottom:3px solid #0084ce;
    }

    2) Save and you are done!

    ReplyDelete
  45. Ty for this css lesson! I´ll follow your blog. xo from Brazil!

    ReplyDelete
  46. sir the on my case its perfect there are four columns but i need 1 footer below just like your site how to code this?

    ReplyDelete
  47. Legend. I have been looking for this code all afternoon as my custom template I have didn't have a footer. Thanks for making it so easy!

    ReplyDelete
  48. awesome post brother, very simple and usefull, be continue...thanks for the post..

    ReplyDelete
  49. Thank you so much for this awesome code!!!
    I'm also getting the
    1
    2
    3
    instead of the 1 2 3
    Could you please tell us how to fix this.

    ReplyDelete
  50. Never mind. Got it to work, just had to skip one gadget tab in between my widgets.

    ReplyDelete
  51. hi mohammad i find very cool and useful this site for trick you hav. i wanted to put this 3footer widget to my blog but it seems i hav the same problem with saimoom,

    your way 123,
    mine is 1
    2
    3.
    pls help.

    ReplyDelete
  52. My font stays in Times New Roman? Do you know why this might be happening? By the way, great article.

    Will

    ReplyDelete
  53. grt thought. keep it up www.dailyhacks.in

    ReplyDelete
  54. Thanks it's worked on my blog ^_^

    ReplyDelete
  55. Whoa really very very help ful dear thanks you so much for your nice article its really looking great on my blog.

    ReplyDelete
  56. Assalamualaikum...
    i tried this several time & taking hours but still the widget apears like this.

    1
    2
    3

    hahaha..someone help me...going crazy about this...

    ReplyDelete
  57. why it shows black space in my blog footer?
    premium-area.blogspot.com

    ReplyDelete
  58. in img your followers are 76 and now 726 !!! keep up the great wrk MBT!!!!

    ReplyDelete
  59. Thanks mohammad.Your CSS are as clear as glass.Thanks for it.I will surely use it in my Theme.I write every thing you know.Bye
    Green Bajgain

    ReplyDelete
  60. awesome.. it worked for me...
    thanks a ton...

    ReplyDelete
  61. Great post Mohammad. Keep it up.

    ReplyDelete
  62. Sir,i have certain Queries.I am a student. completed by 2nd year B.tech and even though i upload the same code that u've written i wish i could write it on my own.could u tell me is it possible if i learn HTML ..suggest means such that i can write my codes for customization of my blog.

    ReplyDelete
  63. Can You please solve this little one for me
    The Code worked but not in the way i wanted it...
    Instead of vertical it was like horizontal
    Please help or should i mail you my template?

    ReplyDelete
  64. Can You please solve this little one for me
    The Code worked but not in the way i wanted it...
    Instead of horizontal it was like vertical
    Please help or should i mail you my template?

    ReplyDelete
  65. Sir, may I ask how did you do to your footer credits. Can I request sir for a tutorial on how to customize the footer credit? Thanks and Stay Blessed :)

    ReplyDelete
  66. Very nice tip.Thanks Ahmed!
    Can you help me regarding this issue. I can't explain so please visit this page. I will be waiting for your kind response.
    Thanks

    ReplyDelete
  67. it is horizontal columns like

    1st column
    2nd column
    3rd column


    :( what should i do

    ReplyDelete
  68. It is horizontal columns. I need vertical column

    ReplyDelete
  69. thnx sir..realy awesome widget - www.yomix.in

    ReplyDelete
  70. This great tutorial...
    Thx Mohammad.

    ReplyDelete
  71. AMAZINGLY AWESOME BUDDY..THANX A LOTT!!

    ReplyDelete
  72. Excellent! thank you. A Smooth move for me for once!! :)

    ReplyDelete
  73. salam alikum Mr. Mohammed
    I added your code to my blog www.cooktodine.com but footer appears like
    1
    2
    3 not like 1 2 3

    I changed different width but still same problem would you please help me by providing a successful code.

    ReplyDelete
  74. Dear Mohammad,

    You mentioned the Font family. I would like to know how I could change just the font color before I hover. It appears to be gray before I hover.

    Where to add the code? Thank you.

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. Decrease the width size and make it equal to the size of your blog main body. Try 800px,

    Re: @Winoath

    #lower-wrapper {
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;

    }


    Perfect! That fixed it for me;) Thanks for this tutorial!

    ReplyDelete
  77. Thanks it works in my blog,.....
    www.bestlodge.blogspot.com

    ReplyDelete
  78. awesome mine worked without a sweat :) Thanks!

    ReplyDelete
  79. wow! im glad there is a way in putting this kind of widget at my footer section. I am excited to tranfer those widgets at my sidebar. god bless u sir!

    ReplyDelete
  80. Hi, how can I erase the lines that appear under the links in the text?

    And THANK YOU VERY MUCH for this code, it worked on my first try ;)

    ReplyDelete
  81. Assalam-u-Alaikum! Mustafa bhai kia meri ye problem solved krden gen?
    Can you solved my this problem? The string "--" is not permitted within comments

    ReplyDelete
  82. Thanks for the tutorial
    but How can i put the attribution widget below this 3 column footer?

    ReplyDelete
  83. how can i edit the content it's only appears 3 small squares :((

    ReplyDelete
  84. Thanks for this Mohammad!, it really helped me.
    Thanks

    ReplyDelete
  85. Bro Mohammad i sended You My Blogger Template plz Make my Image Footer

    ReplyDelete