Add WordPress Style Menu Tabs Widget To Blogger!

Menu-Tabs-Widget The widgets on a Wordpress Blogs surely are well designed and coded but they look even better when they are bloggerized and made compatible to work in Blogger.  Last year we created Advanced Multi Tabbed Widget that was well appreciated by everyone and today we have yet another but far improved multi tabbed widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.

Live Demo


How To Add this Multi Tabbed Widget To Blogger?

I have divided the tutorial in three parts which are,

  1. Adding the JQuery and JavaScript to your Blogger templates
  2. Adding the CSS
  3. Adding the HTML

1- Adding the JQuery and JavaScript to your Blogger templates
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Just below it paste the following code –> MBT Menu Tabs JavaScript
  5. Save your template
  6. Done!
2- Adding the CSS
  1. Inside your template search for ]]></b:skin> again
  2. Just above it paste the code below,

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}

Simply replace #A46F38 with the HexaDecimal Colour code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML
  1. Now Search for <div id='sidebar-wrapper'>
  2. Make sure the widgets box is unchecked.
  3. Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    var activeTab = $(this).attr(&quot;href&quot;);
                    return false;

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>

<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>

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


Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.

   4.  Now Go To Page Elements. You will see something like this,

Blogger-Page-Elements Menu tabsStart adding your widgets and after you have added all your widgets then simply view your blog to see it in action. Done! :-)

Note:- Most of you will ask me several questions here as usual =d Because every template is coded differently. People who are not very familiar with HTML often find it difficult to understand this part but no worries anymore if you are not able to pass this step then kindly email me your template at @ G Mail and I will tell you where should you paste the code. Plus I will also help you on how to add an extra Tab to your widget to make a total of four tabs. This help is for MBT subscribers only if you haven’t availed the opportunity of becoming a MBT reader then kindly subscribe here to avail unlimited resources.

Let me know how you find it?

I just hope this little contribution from our side will be of value to all of you. I would love to know about your precious views. Peace and blessings.

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 »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. You should make a tutoral on how to add a multi tabbed widget above the comments section like, except better since that one has too many images and scripts.

    other than that, Nice tutorial!

  2. My tab menu is better :P

    No offense ;d

  3. Two java script files.Thanks for share but I only use the widgets with no script.

  4. Getting this error:

    The template is invalid. Please make sure it is well-formed and complies to the Blogger Template Language Specifications.

  5. very clever, the whole widget enter into it (tab widget)...hohoho
    nice trick, keep spirit my friend :)

  6. @Anonymous

    Thanks dude. I will keep that in mind however even you can add this widget above comments by placing it above post-comments

    haha you mean the previous version? Of course I never will be ofended :D


    Using scripts have no disadvantages if your readers are above 16 years of age. Readers with know-how have often java installed in there browsers. Further almost every web has at least script in it. Its just a code like HTML if used correctly.

    Sorry sam I had to await you. Well I have checked your blog and congratulations it seems to work just perfect there. How it appears in page elements is not important. How it displays on your blog is of concern. Can you now add and remove widgets easily in it?

    You welcomed beben :>

    Hey congrats and more power to you dear! :)

  7. @Mohammad
    Yes I am able to add and remove widgets easily..:)

    My PR is 0 :( :(

  8. hey he just make another template for preview his widgets but that template is of some one he stole it and copy his content on his edited blog with out the permission of blog owner shameless.... im of the user of that blog

  9. @harooon
    About whom you are talking about...????

  10. @Haroon
    I would be more than happy if first you identify yourself and not comment with no links to your blog or authority and secondly If you are a reader of any blog please feel free to share the link. Your comments will not be deleted. Its MBT and we never fool readers with stolen copyrights.
    Though it sounds funny when people come up with accusations and fear to share even their blog links!

  11. @haroon
    Your blog with no name of yours on it. Impressive!
    Your comment is enough to showcase your level of maturity bro. Please lean to respect others and avoid blind accusations the way you did again. Though your link is totally a spam but as I promised your comments will not be deleted.
    Another further spam will not be tolerated. Your blog have been added to our spam list. Peace out!

    I am glad buddy it worked for you :)

  12. hmmm... nice.. ill try this on my blog tomorow

  13. sir
    i m not able to implenmenting this hack because i can't saw this
    sidebar-wrapper code in my template plz help me

  14. Hello Mohammad,
    it awesome i able to add it in my blog after making changes i have one query that there are three widget but i want to add 4 one so what should i do?

  15. I cant find "div id='sidebar-wrapper" in my edit HTML please help.

  16. @hassam
    ConGrats! :)

    Whats your blog URL?

  17. Hello Mohamad,

    I have managed to place the meny on the side bar however the script hide function doesn't work unlike SAM's site.

    I guess some tweaking of your script is required .

  18. @akarsh

    Friend there is a lot of blog load on me. Helping that way has been made premier at mbt. If you wish to add that widget to your blog through us then you will have to email us personally. We will let you know of the charges.


    Always welcomed :)

    I am glad it worked for you bro. :>

    @lasting rose

    Oh so glad you did it by yourself. I visited your blog and it works just fine. I hope you are using Mozilla?

  19. Hello Mohamed, Many thanks for checking. Though it is working I haven't a clue why it didn't initially. I have done two things. Get a clean copy of the script with actual quotation marks instead of "quote" from a working site (source instead of the one given by you above.
    The other was to remove some heavy (long) scripts I had previously added for other features like fading image etc from the html file as I noticed a long loading time.
    It is working on Firefox, IE and Crome which is my default browser.
    Thanks again for your help.

  20. @Lasting

    It indeed feels great when you succeed in tweaking your template by yourself. Keep going that way and you will surely start understanding coding and you surely can then create your own widgets. You are always welcomed here :>

  21. Hello Mohamad,

    Many thanks,
    Where do I change the background colour of the container to #A8D0CF from #333333, to suite more my template.

  22. @Lasting Rose

    Simply change
    .MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}

    with this

    .MBT-tabs li a{color:#fff;background:#A8D0CF;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}

  23. Thank you.
    Where do I adjust the width of the box ?

    I have another script fora scrolling RECENT posts within theRECENT tab. As you can see the text lines are getting truncated. I guess by reducing the width in the stle sheet of tat script will wrap the text but it doesn't
    So I guess I need to increase the width of the box but can't find where.

    BTW I found that second call to the J querry was creating the hiding issue. So Ihave commented out your version and use the following in the call in the main HTML which came with the scrolling script but also works for yours.

    (script src="" type="text/javascript">(/script)
    <style type="text/css" media="screen")

  24. @LAsting

    The widget is set by default to take the maximum space available. To increase its width you will have to increase the width of your right sidebar by editing it in your design section

    And thanks for that JQuery share. :>

  25. Dear M, can you hepl me? The tab is on the right top. How can I move it below another widget (i.e Search, Email submit)?

  26. @Da Lai
    Brother the widget can either be added at top or bottom but it can not be dragged and dropped between other widgets. You can see that even I have added it at the bottom of all widgets. doing that will require changing the code and I will try to publish that version too if time allowed.

  27. @Hassam Ahmad Awan

    i m also unable to find it.

    I try to find checked and on unchecked but cant able to find it what should i do ?

  28. I cant find "div id='sidebar-wrapper" in my edit HTML please help.

  29. @Sudhir

    Whats your blog URL? I will see the code and tell you.

  30. assalamu alaikum bro, i already got the tab by default by some blog templete and it worked fine too... but after adding the mgid widget (traffic exchange program) after the post, it works but all the tabs widget loads at the same time and when the tab is clicked, it scrolls to that widget instead of poping up... please have a look at my blog and solve the problem as soon as possible. my blog url: . please replay as soon as possible. my email id is

  31. i can't find div id='sidebar-wrapper'.. anyone can help me?

  32. Hello Mohammad i was wondering if you could help me find :div id='sidebar-wrapper'>. I made sure it was unchecked and i still couldn't find it. I was also wondering how you got the social icons on your live demo: I've been trying to figure that out for a while but had no luck. and also how do you make this website have only 1 background for all of:posts, widgets and tabs? I'm trying to make my blog look a little more like a website. would appreciate any suggestions.

  33. The widgets appear in front my blogger's page i want them somewhere between the blogspoit widget, like your widget's blog...
    I wanna first be "x" widget then "y" widget then the 3 widget created with your's tutorial, i hope you understand me if not see picture :(direct link)

  34. Can you please help me with this widget ? Visit my blog: ! you can see the alignment of the tabs. the 2nd and 3rd tabs are okay. but you will notice the difference in 1st tab. Pls.

  35. Hi admin,
    I didn't find the code you listed in step 2.
    can you help me by telling me another way to add this widget to my this site:

  36. hi mohd.. i want to place this wideget below my blog posts ,so what can i do ? pls help me

  37. thanks
    thats nice post.
    But I Have a problem to use it in my blog. I did not find the
    wrapper in my template.
    My Recent Blog is :

  38. Hi muhammad.. Rally great tutorial. I used to visit ur blog often. Great!!
    But i couldn't see any changes in my widget area after copy and paste these things. Can u pls help me..
    My blog url is.

    Pls pls pls help....

  39. i used this widget but actually it doesnt came good it just collaped so pls help me out .. i emailed u wit my template ..

  40. GOD help me :') i could.t find the sider bar wrapper

  41. any articles very useful for newbies bloggers, thank you

  42. this method is not working for new blog templates what to do??
    but the side bar is good.

    this is my blog url
    can you please help me how do i get this tab in the right panel of my is good but i could not match the code. hope you understand the situation, please can you give me the setps what to do..and how...

  44. hai Moh'd musthafa, I cant find <div id='sidebar-wrapper'> Plz help me .

  45. I cant find the code in third step...

  46. hi
    I cant find the code in third step pleas help me
    my blog

  47. Great Work Mohammad!!
    I have a problem with my blog. I want to remove blank space b/w first and second post on my website homepage. Plz tell me..
    My web url is:

  48. Hi Just added them on my blog - doing a bit of tweeking to them now. I made it 4 tabs not quite sure how many I want will decide and add more as and when I find the need :)

    I wasn't quite sure about the 3rd step. Took me half an hour to figure out where to place the code then I read the comments and saw Rose did the same thing :D

    Here's my blog (Started it yesterday) -

  49. Thank you!

    I am from Việt Nam, sorry but I write not invalid.

    How to set that widet below the side bar?

  50. hi, how can I add my adsense code on the top of menues, where there is a lond red line as given in the screenshot of the monop template

  51. hello, great and insightful post, i was wondering if i can send you my template because i can't seem to find the div id='sidebar-wrapper'. thanks