Blogging Ethics

MBT Tube

December 31, 2010

Multi Column Footer Widget For Blogger –The Hot!


Multi-Column-Footer Widget For Blogger

We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.

See the widget at the bottom of the following Demo blog,

Live Demo

 

How To Add the Multi Column Footer Widget To Blogger?

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

  1. Go To Blogger > Design > Edit HTML
  2. Backup Your Template
  3. Search for ]]></b:skin>
  4. Just above ]]></b:skin> paste the code below,

/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
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;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

 

       5.    Now search for </body> and paste the following code just above </body>

 

<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 id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


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

      6.   Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

image

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

1.  In order to reduce or increase the overall width of the widget simply change width: 960px;

2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.

After you have added the fifth column then remember to change width: 23%; with width: 17%; 

You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

 

That’s it! Enjoy :D

Wishing you all a Happy New Year 2011 full of love, joy and just Happiness. Peace and blessings :)





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 »

77 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. Thanks Mustafa for this widget but in my opinion the previously shared footer widget was far better than this. But nice looking widget and not me though someone surely like this.

    ReplyDelete
  2. Hi..

    I already have a four column footer so I just tried it for fun and it works perfect and HOT as in the in the title... :)

    Though I am not keeping it as I already have one pre-built, I still learnt one more thing on how to edit bottom footer widgets...

    And Vishal, I think in the previous were not albe to add extra columns whereas in this one we can...
    Correct me if I am wrong because I have not read that thoroughly...

    Thank You
    Samsexy98 :)

    ReplyDelete
  3. @Vishal
    Your openion is respect pal and I liked this one because the CSS effect is appealing! :)

    @Sam
    You are right I had not shared on how to add extra columns to the previous tutorial. Since usually the footer is kept black so this one makes a good combination of colours.

    ReplyDelete
  4. hello,
    i have a problem its coming in rows not in colums so plz help me..

    ReplyDelete
  5. @dhb
    Would you mind telling what kind of a problem you are facing buddy? Please explain a bit so that I could better understand and help.

    ReplyDelete
  6. The Widget is not working properly

    it appearing like this

    1
    2
    3
    4

    it should be like this

    1234

    See The Screen Shot

    http://i.imgur.com/kKEhE.png

    ReplyDelete
  7. Mustafa this is great as usual, maybe i will start another blog soon so i can give it a try with this 4 column footer, as up to now i am very satisfied with your MBT-Church theme which is one of my absolute favourite themes, you are really great, all the best for 2011 to you and your family

    http://theasianpunter.blogspot.com

    ReplyDelete
  8. Happy New Year 2011 to all of you... :)

    ReplyDelete
  9. @myWorld

    Dear this is because the width is small in your case. please reduce 23% to 20% and see if it works. Else play with width='960px' and width='23%' values

    @TAP
    hey thanks pal. And glad you liked the template. Wishing you and your family a great new life Ahead filled with just great wonders! :D

    @Lucky flaush and @sam
    Happy New year to you too guys. Yet another year ahead so let me wish you a life full of happiness and never ending joy... Peace and blessings on everyone and thank you for the great wishes. love ya all! :DD

    ReplyDelete
  10. Sir please check my blog

    http://www.pujian.co.cc/

    How to fix it?? thank you sir.

    ReplyDelete
  11. @Bambang
    In your Edit HTML find this code [div id='footer-wrapper'] and paste the HTML code above it instead on pasting it before [/body]

    Please replace '[' with '<' before searching the code..

    Hope your problem gets solved by this...

    Thank You
    Samsexy98

    ReplyDelete
  12. @samsexy98
    Thank you sir, below the demo

    http://shareblessing.blogspot.com/

    what should I do now? thanks before

    ReplyDelete
  13. @samsexy98

    thank you sir, I just find the way to fix it.
    once again thank you,,

    ReplyDelete
  14. @Bambang
    Now what...???

    Do you see something wrong..??
    What I see wrong is that you have messed up the codes...

    In first column (Ads) there is no code because that Ads code is gone into the next column (Say Hello To Friends) I think...

    Please check it...

    And please just call me Sam as I am too learning and trying to help as much as I can :P :)

    Thank You
    Samsexy98

    ReplyDelete
  15. HI Mohammad,

    Wishing you very happy new year, my site is www.princeysjagan.com
    now iam so much of impressed by your blogger tricks, i need your assistance to my site, how can i caontact you. my mail id is princeysjaganfans@gmail.com

    ReplyDelete
  16. @Sam

    Thanks for helping other fellow bloggers. Your instructions are plausible. :>

    @Anonymous

    Thank you and wishing the best of luck in 2011 too :)
    I am delighted that you liked MBT's tuts. Brother you can ask me for any help at my blog. I am active here and as well as at my facebook. So you can check me at both places.

    ReplyDelete
  17. @Mohammad
    No need to tell thanks Bro...:)

    I like to help people with whatever knowledge I have...
    I believe in "Sharing Knowledge Increases Your Knowledge"...

    Also another reason is that I will be learning more if I make any mistakes...:)

    So all in all its Win Win Win for everyone...:)


    @Bambang
    Where are you??
    Is your problem solved..??

    Thank You
    Samsexy98

    ReplyDelete
  18. Hi Mohammad,

    Actually im looking for a stunning, minblowing slideshow to my site, i was triedup with your previous Slideshows, but it was not workedout for me. this the one primary favour im looking from you. my site is www.princeysjagan.com in this site @the top im dispalying an image, instead of image, in the same lenght 760Px wide, now im lokking for a Slideshow. Could you kindly helpme out regarding this. . .Looking forward your Reply. .

    A TRUE FAN FOR MBT
    www.princeysjagan.com

    ReplyDelete
  19. @Sam
    Thank you sir. It's done well!
    Thanks

    ReplyDelete
  20. @sam

    I loved it! :)
    You surely will achieve it.

    @Prince
    Pal haven't your tried the other slideshow with navigation? I think the steps are pretty clearly mentioned. You just need to copy the code and adjust it in mbt html editor and paste it in your blog. Simple! where else do you want help? Would love to do.

    ReplyDelete
  21. Great widget ! I'm using it on my blog ! Thanks !

    ReplyDelete
  22. Hi Mustafa,
    I am using this Footer widget for my blog . But I am facing some problem in my "Label"(Categories) widget . In normal condition the Label Widget's text are in white color . But Now I need to change it in Cloud mode . When I changed it in cloud mode the text are not showing white !! It is turned into Red . I used the following code to override the style but I was failed :(

    .cloud-label-widget-content {color:#ffffff;}

    What code should I use to override the Label style ?? Plz help me ....

    Watch it in my demo blog ----
    http://demotodemo.blogspot.com

    ReplyDelete
  23. Every thing about your blog rocks except the blog header picture! You blog deserves to be much more professional! Thanks for your work muhammed. You really made blogging in blogger so cool! Free dofollow link to you man!

    ReplyDelete
  24. Hi, thanks for the great tips. Its really work but i got 1 problem.

    how to change widget layout because when i add Followers widget its look like the template layout. please visit my blog then u will understand.
    http://da-test.blogspot.com/

    really need your help.

    thanks

    ReplyDelete
  25. Since there is 3 column, how i will post a one widget that fills the 3 column, like on this site, you have your website credits on the below that fits the 3 column on the whole page.. how is that ? i want to put it before the 3column

    ReplyDelete
  26. Assalamu'alaikum...
    Thankyou Sir Muhammad

    ReplyDelete
  27. Thanks for all your brilliant articles and sharing!

    I would like to ask if you could help me:

    For the footers, is there any code that I can install to display the random posts titles by specific labels or categories?

    Thanks for any help in advance. :)

    ReplyDelete
  28. @Ayush
    Thank you buddy and look I finally changed the header layout! :> Extremely sorry that I read your cute comment just now!

    @Syeikh
    So sorry buddy that I am replying now. But if you ever read my comment please do read this tutorial for changing the layout of profile widget :
    Customize Author Profile

    @MAnuel
    Oh that is not included in the widget. It is a separate div section to create it simply do this,
    Paste the following code just above ]]></b:skin>


    #credits {
    background: #666 url();
    height: 30px;
    width: 960px;
    margin: 0;
    padding: 0;
    text-align: center;
    }
    #credits p {
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 9px 0 0;
    }
    #credits a, #footer a:visited {
    color: #FFF;
    text-decoration: none;
    }
    #credits a:hover {
    color: #FFF;
    text-decoration: underline;
    }


    and paste this code just above the 3 column,

    <div id='credits'>
    <p>WRITE WHAT EVER YOU WANT HERE</p>
    </div>

    THAT'S IT. :)

    @emy
    You are always welcomed pal. :>
    Yes there are serveral that you can find online. Just google for random post widget for blogger. or you can try the one provided by blogger but it the popular post widget

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

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

    ReplyDelete
  31. hey Friend This is not showing widget area as you tell this is showing one by one in next line
    1 add gadgets
    2 add gadgets
    .
    ...
    ...
    similar

    ReplyDelete
  32. I have same problem as @My World4Free

    The Widget is not working properly

    it appearing like this

    1
    2
    3
    4

    it should be like this

    1234

    See The Screen Shot

    http://i.imgur.com/kKEhE.png

    Please help me out this.

    ReplyDelete
    Replies
    1. @Varinder Pal Singh

      i find one working trick.
      don't worry appearance link
      1
      2
      3
      4

      just follow this trick
      add your gadget in 1st gadget box

      then

      DON'T add your gadget in 2nd gadget box

      and

      add your gadget in 3rd gadget box


      it looks---
      1
      2
      3
      4
      but it works--

      1234

      http://www.moviekranti.com/

      Delete
  33. I have same problem as above Mr.Varinder Pall Singh

    it appearing like this

    1
    2
    3
    4

    it should be like this

    1234

    ReplyDelete
  34. More than one section was found with id: lowerbar1. Section IDs should be unique. i am geting above error when i am ading to my blog

    ReplyDelete
  35. Sir i have the same problem:
    1
    2
    3
    4
    And one thing more please send me TANZANITE and CUTE BOX template. I have subscribed a few days ago. please send me as soon as possible. My email is ADIL1250@hotmail.com

    ReplyDelete
  36. Hi! BIG thanks for all your lessons!
    I've added a footer with five columns and am very happy with the results. However, I'd love to make the space between each column smaller. How to tweak? I tried Firebug analysis, trial and error, to no avail.
    TIA!
    www.socialenrichment.com

    ReplyDelete
  37. Its not working on my site... I am really having hard time..

    ReplyDelete
  38. Hi...
    Thanks for the post. i was searching this since my template does not have footer widgets. I have done as per instruction. I have one query about my footer widgets. The widget placed nicely but want to customize it. this is my footer widget screenshot and this is my template them screenshot the footer does not support title them color which is perrot green. When write title for my widget in footer there is not showing perrot green color for title. your help would be appreciate.

    ReplyDelete
  39. Very impressive blog.i have a very peculiar problem in my blog http://humourbook.blogspot.com - sometimes my posts and the sharing widget above it looses the alignment. please help

    ReplyDelete
  40. Hello,
    I applied this on my blog. It became messed and now i am not able to delete it. please help me please.
    http://nabloggertemplatesu.blogspot.com/
    Thank you

    ReplyDelete
  41. Today I look your website.its very grate website for Blogger.very nice.and I very like this website.and I want to your Email address.and Taday I join this website.

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

    ReplyDelete
  43. Hi mybloggertricks.com
    I am also having the same situation where these code not showing like it is suppose to be.

    It is appearing like this:

    1
    2
    3
    4

    It should be like this:

    1 2 3 4

    This is my blog name: http://previewmusik.blogspot.com/

    Thanks.

    ReplyDelete
  44. I am having same problem as above I already reduced it to 20% and no change?

    ReplyDelete
  45. Sir,
    as above many people mentioned,the gadgets are appearing as
    1
    2
    3
    4
    instead of 1,2,3,4
    i've tried reducing width to 18 and 20% but that doesnt help.
    Please help me!

    ReplyDelete
  46. Bro Sorry For Talking Off Topic but i need help.. i m creating a multi-coloum-footer but i need help...
    i m getting this type of fotter----
    http://2.bp.blogspot.com/-YpwZwHzQfX8/TzqFlkirLNI/AAAAAAAAADY/6nHQoQUOUeQ/s400/fot2.png

    But i want this type of---
    http://2.bp.blogspot.com/-fldsCb3wTMo/TzqFlfqgd2I/AAAAAAAAADM/ltsDBjP3sXI/s400/fot1.png

    plz help bro.... plz :P :p :P

    ReplyDelete
  47. how do I center the columns? and as I put down the posts? Thank you ^ ^

    ReplyDelete
  48. it creates 4 rows insted of 4 column

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

    ReplyDelete
  50. Less fuss. Go to:


    <macro:include id='footer-sections' name='sections'>
    <macro:param default='2' name='num' value='4'/>
    <macro:param default='footer' name='idPrefix'/>
    <macro:param default='foot' name='class'/>
    <macro:param default='false' name='includeBottom'/>
    </macro:include>


    Change the value of 'value' to as many columns as you need.

    ReplyDelete
  51. It isn't working for my blog:(

    ReplyDelete
  52. hehe ... I also had the same problem .. as mentioned above many people. view that there
    1
    2
    3
    4
    why can not 1 2 3 4
    hey .. muhammad where you are. you will you help me

    Learn Blog

    ReplyDelete
  53. hi muhammad .. I came back .. I've found where the fault lies .. was in default CSS off footer code that was wide to the fox. because previously only 460. txs muhammad ..

    ReplyDelete
  54. how to add images instead of the widget titles like what you had done in your site in case of recent post and recent coments...?

    ReplyDelete
  55. Hi! Nice Post, really.

    I've done and have the same bloody problem with the columns.

    I've tried to change the code's width to 1080 and nothing's happened. I've changed the tant per cent to 20% and nothing. I've finally cleaned the code so that I can see further instruction.

    Any help? Thanks!!

    ReplyDelete
  56. I want to put three columns in my blog then what should i do in the code....??? or can you send me code for 3 columns...???

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

    ReplyDelete
  58. I do not know what happened, I've been trying to change the css section

    #lowerbar-wrapper {
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 32%;
    text-align: justify;
    font-family:Arial, verdana;
    font-size: 13px;
    color: #ECECEC;
    line-height: 22px;
    line-height: 1.6em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    WITH

    #lowerbar-wrapper-1 {
    text-align: justify;
    font-family:Arial, verdana;
    font-size: 13px;
    color: #ECECEC;
    line-height: 22px;
    line-height: 1.6em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #lowerbar-wrapper-1 {
    width: 300px;
    float: left;
    margin: 0px;
    padding:0:px;
    )
    #lowerbar-wrapper-2 {
    width: 300px;
    float: left;
    margin: 0px;
    padding:0:px;
    )
    #lowerbar-wrapper-3 {
    width: 300px;
    float: left;
    margin: 0px;
    padding:0:px;
    )

    THEN SAVE AND I PUT IT BACK

    #lowerbar-wrapper {
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 32%;
    text-align: justify;
    font-family:Arial, verdana;
    font-size: 13px;
    color: #ECECEC;
    line-height: 22px;
    line-height: 1.6em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    and everything changed .... now looks
    123

    not
    1
    2
    3

    ReplyDelete
  59. Hello I added the footer to my site www.still11.blogspot.com Im tryin to make the footer width to take up the width of my site but when I change the width it dosent change. Can you please help?

    ReplyDelete
  60. It isn't working for my blog:( please check that and help me...
    my blog is http://motionnet.blogspot.com
    thank you...!

    ReplyDelete
  61. Hello brother, i added this 4 column footer widget everything is for for expect one thing only the 960px area is only black, i want a full black big footer. wat can i do? http://www.grandmax.net/ check it out.

    ReplyDelete
  62. @Moses Brose

    brose,

    its just empty widget by default mohammad has given black background.To blend with your blogs background change

    background:#333333;


    replace 333333 with your blog background to get those widgets blend with your blog.

    blogging tips and tricks and seo

    ReplyDelete
  63. Please check my blog. http://wordinvestor.blogspot.com I want to replace my previous footer and want to use this one. please help me that how can i remove previous footer and use it as default. also i don't want to remove GO TO TOP default button.

    ReplyDelete
  64. mine looked like this

    1
    2
    3
    4

    help!

    ReplyDelete
  65. Have the same problem.. its displaying like
    1
    2
    3
    4

    tried playing with the width.. didnt work for my template...
    will have to try again...

    arojoy

    ReplyDelete
  66. The most useful trick I am using, not only adding footer but also adding widget above or below the header. Thank you so much MBT!

    ReplyDelete
  67. In my blog, they are appearing vertically, one after the other, not horizontally..help out!!

    ReplyDelete
  68. Thanks for this great tip.
    I used your script it's fine on homepage only. It is not displaying on my post page. Any help please..

    ReplyDelete
  69. Hello dear sir i am getting problem while i paste the first code below ]]> its comes to in my website what i have pasted help plz

    ReplyDelete
  70. the same problem with the other commenters sir, please help us. tnx n advance...

    ReplyDelete
  71. Nice one thinking of adding it to my blog soonest

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup