New Multi Tabbed Widget For Blogger - Editable Tabs!


Just a new version release of a Menu Tabs widget for blogger, fully customizable and editable. This widget is an exact code copy of our Wordpress Menu Tab Widget that we created for blogger blogs. The only difference is the design this time and with a more easy tutorial. I just hope you like it. Lets get to work now!


Live Demo 1

Live Demo 2

Adding Menu Tabs Widget to New Blogger

Kindly follow these steps,

  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. And just above ]]></b:skin> paste this code,

/*----- MBT Multi Tabbed Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url( left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url( left -140px repeat-x;color:#EE5D06;text-decoration:none}


     6.   Now Carefully follow this step as it involves the position of the widget in your template. Since most templates have different coding so if you could not find a matching code below then don't worry and let me know by posting your blog URL in the Comments Form

Search for this code if you are using new blogger template designs,

 <div class='column-right-inner'>

or this if you using any other template,

<div id='sidebar-wrapper'>

and just below the code you find, paste the following code,

<div class='tabviewsection'>

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

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>


<div style='height:5px;clear:both;'/>


Please Replace About, Tags and Archive with your Widget Titles that you will be adding. Keep the title short.

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



    8.     And now comes the most difficult step... Start Adding Widgets! Have Fun =)

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. HAHA! You are a funny guy! Step 8! =D

  2. 1. how to make ''subscribe now'' box like that?? Wrapped beautifully! :)
    2. How to make ''blockquote'' just like yours? It's cool when showing codes!
    Thanks! Cool blog! Just bookmarked it!! :)

  3. I was expecting this to come, but I like the old one :)

  4. @Ahmad

    My pleasure brother =p

    For those tuts kindly read these posts,

    1- Make Wordpress Type Subscription Form for Blogger!
    2- 14 Amazing ways to Customize Blockquotes

    And you are always welcomed. :>

    I respect that brother. :>

  5. I add the above code after
    div id='sidebar'
    instead of
    div id='sidebar-wrapper'
    coz it is not present in my template.
    It is working fine.... :>

  6. @upa_kid

    Its still ok. Congratx for adding it succesfully! :>

  7. how to add 1 more tab ?
    could you tell me ?
    thanks :)

  8. not working man..that screeshot of tabs is not at all comin...

  9. and where i can change the colors?

  10. I'm also wondering how to adjust the colors, thanks!

  11. can I add 2 sets of tabview table on the same page?

  12. Great widget! I've been searching forever! I always got hung up on the new blogger vs. the old, and nothing ever worked, but now it works! I am with others on how to adjust colors to match my blogs thing, other wise, thanks!!

  13. Very nice blog.,

  14. I can't seem to open the MBT Menu Tabs JavaScript link code and add it to blogger ;(

  15. to be honest, I have no idea how to see the code ...

  16. Man you are awesome !!! Loved the Sidebar !!! makin me fall in loveee wid u lolzz
    Keep up the good work..

  17. I added the code and I love it! Two questions:
    1. How do I change the mouse over color from orange to something else
    2. I prefer to have it near the middle of my sidebar just below the about me. How do I do that?


  18. Could this be made as widget, so I can position it inside sidebar? For example, if I want to add one widget above tabs?

    Also, what about if I need two sets of tabs? One for tags/archives/recent posts and second for facebook/google/twitter?

  19. Hi Dear, You are great. Finally I added this widget in my blog too. Thanks a lot..

  20. how to add multi tab under add gadget? (footer)

  21. Hello, save me please and tell me how to change only the middle tab font color. Thank you very much!

  22. hello . can u please tell me about my widget problem . its whenever i click on any tab half of the content hide in right side and i can only see half content wheather its video or blog acrchives please please please help me i love my template so much dont want to change it i'll be waiting if anyone find solution

  23. @Nishit Jain
    Hey i jus came across this point.
    its very simple, follow the steps.
    1. search for "color:#EE5D06" in this code.
    2. Replace : #EE5D06 with what ever color code you wish to apply for your template.

    I hope this will solve your issue.

  24. salam mustafa I follow each step of your but now they don't seem to work they are visible on my blog but not working, please guide me to fix it my blog

  25. Please Help. All wrking fine till Blog. but it shows all the gadgets in my home page of blog not by tab. what should i do??

  26. Error parsing XML, line 918, column 3: The element type "b:skin" must be terminated by the matching end-tag "".
    this is what I get when I save template.

  27. This comment has been removed by the author.

  28. I am using this plugin in a proStyle Template but also using an automatic content slider ( But, when I add the slider code in the template, the tabbed widget doesn't work anymore...
    Do you know any solution for this?

  29. Mybe because of different versions of jquery? Is it possible to have more than two on the same page?

  30. This comment has been removed by the author.

  31. This is SO great, thank you so much for providing this! I just added these tabs to my blog, check it out here:

    I love the tabs! It makes my sidebar so much nicer and cleaner. If I want the tabs to show up UNDER my About section, where should I move this code? Is this possible? Thanks!

  32. Hi Mohammad, I added your code and it works fine on my homepage, but when I go into a post, it's broken - the widgets aren't within the tabbed section. Any idea on how to correct this?

  33. (div class='column-right-inner'>)

    (<div id='sidebar-wrapper'>)

    Dear Master,I couldn't find both of them,what i supossed to do???

  34. Not working. Please Help me
    Thats my blog

  35. How to add more than two multi tab widget in same blog??

  36. Hi not working in my template (on my test blog - not (I use template Picture Window in my test blog)

  37. This comment has been removed by the author.

  38. For Sameer Shamsudeen:
    Please search for

    <div class='column-right-inner'>

    and paste the code below it. This code has to be there as you are using blogger template design and not any custom 3rd party template.

  39. @Bhavesh Pamecha
    Thank You Very Much Brother,
    I Got it and added this widget to my blog, take a look, The left alignment of tabs not correct, please any advise for correcting this.

  40. @Sameer
    Search for

    .main-inner .column-center-inner .section {
    margin: 0 15px;

    And remove 15px from it.

  41. @Bhavesh Pamecha
    Friend, in my blog it looks
    margin: 0 $(main.section.margin);

    No px specified. can i replace that line with margin: 0; only.

  42. @Bhavesh Pamechafriend, I changed, but remain the same, Do you know what is tag.

  43. I don't know but I still see that the code is present. I have no idea why is it showing if you have replaced it to 0.

  44. "Tags" tab is empty...why its empty ?
    How to fix that ?

  45. I just used this method,
    And I used 2 tab, and multitab widget is a bit on the left, how fix it it in the center ?
    How can I change the orange highlight ?

  46. How to change the orange highlight to blue color ?

  47. I want to add some other widget on the top of this. Like its coming on the top of my sidebar. I want to make it second. Please help me do that.

  48. Your tab was working great, but not now. Its not working now. Please fix it.

  49. Thank you for this fabolous widget. So I don't want to show this at the top of my blog. I want to show it below the first publish content. My blog is

    Sorry for my english, i'm spanish :)

  50. Nice :D

    i can't wait to use this on my blog :D

  51. Something is not working well in this code...I can not seem to get rid of the About, Tags and Archive tabs...they appear as dots on my page elements section.


  52. i'm using template from software artister and i cannot find <div 'column-right-inner' or sidebar-wraper,, can you help me?

  53. Thank You Very Much Author for nice post, I like this widget and also add my Blog this.

  54. How do you change the hover color?

  55. Hi Mohammad,
    I want to know whether we can add amazon affiliate program widget and many more on blogger with adsense. I have seen some banners on your site showing adsense ads and banner ads also. Please let me know.

  56. @wilhelm john @skunk-anansie @Sara @Kristen {Savvy Deets Bridal} @Michael n Zellinea @Mohaiminul Islam @Krista Low

  57. There are no dots above "add a gadget"
    where is the problem? even though i copy and paste.
    will the arrangement of code or the spacing between line/spacing before the code affect the result?

  58. Mustafa! I have same problem as krista low

  59. sorry that's widget content width

  60. Thank you so much! I specially like the way how I can add a gadget easily with Blogspot tools~^^

    I''m wondering how I may change the position of the gadget though. It's now on the top of my left bar. Is it possible to move it down - maybe under some other gadgets?

    Many thanks~

  61. can i add this widget in blogger post like wordpress ...

  62. Hey, can i add this to a POST in blogger ? and if yes, how ?

  63. Very grateful for the enormous help given. I have tried many tutorials and this is the only one that works. My most sincere congratulations for the enormous work that this blog has. A greeting.