Blogging Ethics

MBT Tube

January 10, 2010

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!





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 »

168 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. salam,wow,it's very usefull as tricks thank you very much for sharing.
    http://webizland.blogspot.com/

    ReplyDelete
  2. hey mohammad

    one thing for you

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

    a truck full of thankssssssss

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

    ReplyDelete
  4. @saimoom

    Find this instead

    <div class='left'>

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

    ReplyDelete
  5. 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
  6. 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
  7. Will you help me to remove the Blog Title of my Blog


    Do u know about this type of Blog Page Navigator

    http://gamezine.info

    &

    http://gbestmovie.blogspot.com

    these both are using same type of Blog Page navigator

    ReplyDelete
  8. Hello Sir.
    This time I can add. But I am facing other new problem. 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


    My URL: http://saimoom.blogspot.com


    Thanks and Regard.

    ReplyDelete
  9. Hi Mohammed

    Same problem...step 5..heres the url to my blog

    http://www.santos-football-club.com/

    Many Thanks in advance

    ReplyDelete
  10. 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
  11. 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
  12. @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
  13. 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
  14. Added a link from my blog http://blogger-templates123.blogspot.com to your website.

    I always wanted to do this. I just need time to try this out.

    ReplyDelete
  15. @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
  16. 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
  17. This was a great post for blogspot bloggers. Thanks for sharing.

    ReplyDelete
  18. this is working on my blog
    thanks Mohammad

    http://esymovies.blogspot.com

    ReplyDelete
  19. @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
  20. 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
  21. @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
  22. Hi I Cannot Find The Step 5 Code in my Blog My Blog URL http://tysonporas.blogspot.com

    ReplyDelete
  23. HI Mohammad here is my URL I have sent you and added you into permissions so you can see it it is a private training blogg for my staff. the url is: http://remingtonkissimmeebayuptospeed.blogspot.com
    In the Layout I do not have a footer area to add widgets. I need to code to add a footer....

    ReplyDelete
  24. sorry i don't find div id='credits' !!!
    but i found div id='sidebar'
    div id='page'
    div id='backlinks-container'
    div id='header-inner'
    here is my blog link : http://walidplus.blogspot.com
    thank your for help

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

    ReplyDelete
  26. 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
  27. Checkout my implementation on
    http://firesfiresfires.blogspot.com

    I added a footer2 (CSS and widget) because I also wanted to add the long widgets before and after the 3-column widgets.

    Btw, 31% works fine on a 800x600.

    Super thanks.

    ReplyDelete
  28. www.hrithiks.blogspot.com how to do dis :(

    ReplyDelete
  29. assakam alaikum
    step 5 is not working for me also....plzz guide me what to do...here is the URL of my blogs

    http://bookshive.blogspot.com/

    http://styleuplife.blogspot.com/

    ReplyDelete
  30. I can't find div id='credits' in my page http://www.123tunestore.com/

    ReplyDelete
  31. I Want To Know Is There Any Way i can add this Widgets at the above instead of Bottom .

    See This Image
    http://i48.tinypic.com/15dizq.jpg

    Or

    Can i have a sidebars like your is ,In the upper 1 Big and after that 2 small.

    ReplyDelete
  32. @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
  33. 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
  34. @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
  35. i cant find the code in step 5. cn u help me? my blog is

    dhiburunu.blogspot.com

    ReplyDelete
  36. I can't find the div id='credits' code.

    http://shliches.blogspot.com/

    and by the way, may you have a link to some article about how to make roll over effect to the titles.

    the design is temporary...

    thank you,
    you have a great blog

    ReplyDelete
  37. Hi Mohammad,

    I also cannot find div id='credits' in my Blog. Thanks in advance!!

    http://28dayfastingexperiment.blogspot.com/

    ReplyDelete
  38. 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
  39. techie-soltuions.blogspot.com is my blog's url. I Really need it

    ReplyDelete
  40. I cant find code in step.5
    How can I add this?
    My blog is http://abhicomputech.blogspot.com/

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

    ReplyDelete
  42. hi man i cand find the step 5 code pls help me http://lockerzrro.blogspot.com/

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

    ReplyDelete
  44. cannot find div id='credits' my blog is http://www.guidegoods.blogspot.com

    ReplyDelete
  45. My blog also gets the form of
    1
    2
    3 instead of 1 2 3 ,tell me wht shuld i change

    http://c2w-answers.blogspot.com/

    ReplyDelete
  46. @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
  47. 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
  48. @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
  49. oh well thx a lot buddy!!!!

    ReplyDelete
  50. This is my template
    http://rapidshare.com/files/375226102/template-3441423694433125557.xml.html

    http://c2w-answers.blogspot.com/

    see what happens...now it dont go to the third column.Can u fix it and tell wht changes i have to make :)

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

    ReplyDelete
  52. Thanks... i have used the same in my blog http://www.tsmguide.co.cc... its look good.. thanks again sir

    ReplyDelete
  53. 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
  54. sir showing
    1
    2
    3
    but when i add a gadget they auto change like 1 2 3

    ReplyDelete
  55. 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
  56. Thanks! Great info, just what I was looking for! I would love to donate but I don't have money sorry... :(

    ReplyDelete
  57. my widget also showing
    1
    2
    3

    how can I do it 1 2 3 ? PLEASE HELP

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

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

    ReplyDelete
  60. Tnx Man It Really Works And also ur customize is awesome its soo simple....check my site @ http://Planetpc.in

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

    ReplyDelete
  62. add successfully but little problem the Blogger All Rights Location need change

    Now

    http://i54.tinypic.com/2a0cizo.jpg

    i want like this

    http://i55.tinypic.com/14vsr4j.jpg

    pls do the needful help

    http://gsr-gentle.blogspot.com/

    ReplyDelete
  63. hey...i don't have a footer column at all...i'm trying to add only one column to the footer so that i cand add a text widget for links...the adress is: http://www.watchtheboondocksonline.org/ ... do you think you cand help me out? 10x

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

    ReplyDelete
  65. Salam Alekum bro i really love ur articles .
    also ur footer gadget article .its working properly but in my template it's not looking gud please check this image of my blogg gedget http://2.bp.blogspot.com/_v4HMb_ZrJrE/TSxQgeK7hZI/AAAAAAAAAGo/7jwQ4blwSyc/s1600/Untitled.png
    How can i arrenge it please reply me erazwindow@gmail.com

    ReplyDelete
  66. @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
  67. thank you it's working in my blog look here : http://www.e-wikiblog.cz.cc/

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

    ReplyDelete
  69. Thank u mate.Helped me a lot,cause my gadgets was around,now with your help r in one column.Thanks again.
    STELIOS

    http://conferenceforthetruth-sma.blogspot.com/

    ReplyDelete
  70. 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
  71. This worked very well for me. Thank you for all your posts. My question is... I have the same font for the Titles at the bottom as the rest of my blog, but I can't find where to change the font of the content of the widgets I have placed in the three column footer. Do you know where I need to change the code?
    ~Kimberlee, www.TheSpunkyDiva.com

    ReplyDelete
  72. 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
  73. Dear Mohammad,
    Can't deny it I had become one of hundred of your admirer, seems pretty obvious my tiny brain has rusty, been trying to work it out but no luck so far..to implant your irresistible widget..please help me out below is my URL :
    http://orghospitalitysystem.webs.com/

    Nevertheless ; 2 thumbs UP !!!, bro

    ReplyDelete
  74. @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
  75. 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
  76. @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
  77. How can I add this 3 column footer above my existing footer? I currently have a single column footer that has my copyright info as well as disclosure policy. I'd like to keep that at the bottom of my blog and add the 3 column footer above it. Is that possible?
    <a href="http://www.greenmamaspad.com>www.greenmamaspad.com</a>

    ReplyDelete
  78. How to include them as if their part of the blog's body.. see my site. its like floating.. http://photoshopph.blogspot.com/

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

    ReplyDelete
  80. 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
  81. 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
  82. awesome post brother, very simple and usefull, be continue...thanks for the post..

    ReplyDelete
  83. 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
  84. Never mind. Got it to work, just had to skip one gadget tab in between my widgets.

    ReplyDelete
  85. Help,

    I've read all the questions and answer tot the
    1
    2
    3
    problem,
    but I can't get ti to become: 1 2 3

    I'm at http://www.hetmoederfront.nl

    ReplyDelete
  86. 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
  87. My font stays in Times New Roman? Do you know why this might be happening? By the way, great article.

    Will

    ReplyDelete
  88. Hey thanks a lot for this, i have three footer now, but i want to know how to put border between the three footer? Is this possible? My blog url is http://hotnigerianews.blogspot.com

    ReplyDelete
  89. @Mohammad,

    Bro , i want same format which you have used in your site template.
    Above code just showing simple heading, i wants like your site.

    Thanx in advance...

    Email id : niketan237@gmail.com
    Wild Hacker

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

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

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

    ReplyDelete
  93. Poderosos tus códigos gracias por todo, me sirve bastante para poder optimizar mi blog de ingenieria, verdaderamente Gracias

    ReplyDelete
  94. 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
  95. Nice post i added it to my site http://strongarticle.blogspot.com/

    ReplyDelete
  96. dear sir my lower columns are appearing like
    1
    2
    3
    4

    i want it 1234
    so please help me... my blog is http://hytenz.blogspot.com/

    ReplyDelete
  97. pls visit my blog & say me how to change my footer column matching to my template & also pls give me solution for the appearance of widgets in 123 order. http://hytenz.blogspot.com/

    ReplyDelete
  98. Great tips! I will put it on http://bizgreenglobe.blogspot.com

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

    ReplyDelete
  100. Thanks a million! I implemented this @ www.electronics001.blogspot.com and pow! it worked. You don't know how happy I am.

    ReplyDelete
  101. Its just below the copyrights. I want it to be placed above the copyright codes. What to do for that?

    ebookzdownloadz.blogspot.com

    ReplyDelete
  102. great very nice Muhammad bhai may God bless you for helping others in such a efficient way thnx
    http://www.softwareshackstipsandtricks.blogspot.com

    ReplyDelete
  103. how i can change the Colors 2 make it look good 4 my blog ,can you help me in that ,thanks bro this my blog http://semsam.blogspot.com/

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

    ReplyDelete
  105. Hi bro, i have a problem, after i apply three column footer widget code in my blog, the left side control panel page elements can't be click nor edit, can you please tell me how to solve this ? your help is really appreciated...tq bro

    Here is my blog : www.di-mobile.com

    ReplyDelete
  106. 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
  107. thanks for helping me with this widget bro....

    Now my blog yourcyberguide.blogspot.com or www.yourcyberguide.com looks awesome with your help

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

    ReplyDelete
  109. Thank you so much! Really helped! :)

    Vinod Pawar,
    http://tweaksforpc.blogspot.com

    ReplyDelete
  110. Omg i thought bloggerplugins is the best when it comes to blog widgets but i just find this site this is cool man keep it up the widget works on my blog
    http://pspskull.blogspot.com

    ReplyDelete
  111. Great post Mohammad. Keep it up.

    ReplyDelete
  112. Hi,
    again with the same problem.It`s not showing........

    Plz plz help.

    www.techtest.11.blogspot.com

    ReplyDelete
  113. 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
  114. Thanks Mohammad!
    Can you please also make a tutorial about this GIF image on your comment box. Thank you!

    http://theyellowbulb.blogspot.com

    ReplyDelete
  115. Fantastic Mohammad - just what i was looking for - you can see the result here: Garden Guests - once again, thanks heaps. Paul [Crash]

    ReplyDelete
  116. Assalam-O-Alaikum Brother I Am Using New Blogger Template I Want To Add Image As Background In My Blogger Footer H2.
    So Please Give Me Idea About This
    My Blog Is Syed Bahadur Shah 4u Thank And Regards...

    ReplyDelete
  117. 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
  118. 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
  119. 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
  120. Hello,

    I don't know specifically what changes I made to my template but the issue I mentioned before is no longer an issue o.O and ^_^.

    I have a question though. What if I only wanted to add two more footer columns instead of three? What changes to your code would I need to do? Thanks! And again awesome tutorial :)

    _____________

    Abacus

    ReplyDelete
  121. 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
  122. @Osama Zia
    http://tycoondesigns.blogspot.com/2012/09/the-dirty-dozen-front-print.html

    This is the link.

    ReplyDelete
  123. it is horizontal columns like

    1st column
    2nd column
    3rd column


    :( what should i do

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

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

    ReplyDelete
  126. This great tutorial...
    Thx Mohammad.

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

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

    ReplyDelete
  129. 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
  130. 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
  131. This comment has been removed by the author.

    ReplyDelete
  132. 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
  133. Thanks it works in my blog,.....
    www.bestlodge.blogspot.com

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

    ReplyDelete
  135. Mohammad bro,

    I cant find " ]]> " in the new templet for blogger. it says phrase not found.

    help me

    regards,
    .$!D
    www.siddz05.blogspot.com

    ReplyDelete

  136. We get good information from your blog.This is a very nice blog 3 bhk flats in noida

    ReplyDelete
  137. i cant add my windget inside the box.. please help me


    regards,
    .$!D
    www.siddz05.blogspot.com

    ReplyDelete
  138. Thank you very much i will try it on my blogs, www.entertainmentmode.blogspot.com, www.globalmaritimeacademy.blogspot.com, as soon as possible.

    ReplyDelete
  139. 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
  140. 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
  141. its working. !! very great post . Thanks admin :)
    http://onlinehottrend.blogspot.in/

    ReplyDelete
  142. 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
  143. Hi very nice tutorial, I need to know just one thing k how can we make the background color and all the colors match the background image?? I mean is there a way that I can make the footer's color transparent and it would show the background image instead of any solid color.
    here is my blog Kindly check it out and reply ASAP
    Thanks.
    http://cuonline--atd.blogspot.com/

    ReplyDelete
  144. Hii there i want a three column footer exactly like this site has , plz tell me how to get it ,

    my blog Technology

    some of my blog posts

    Reviews Of LikesAsap.com

    Let eBay Do Your Bidding for You In Auctions

    Value of comments in your blog

    Make a Clone of recycle bin

    ReplyDelete
  145. Thank you! this tutorial helped me a lot... =)

    Manga & Anime Compilation

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

    ReplyDelete
  147. © 2012 Designed by My Blogger Tricks


    how to change this link plzzzz halp me



    http://allsoftwareandgame.blogspot.com/

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

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

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup