New Multi Tabbed Widget For Blogger - Editable Tabs!

MULTI-TABS-WIDGET

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2Z1ZXYEdN4oGaWQzLG1_codqPSEM-RWlUn5s_rbI7_BAsp1SxyGEZFQEfK8iesGc3hpytWoyWJrTz86ZOLDaTbBMHvdXLCU4eF9-K0cLPH6vZNgzS9mHLaj-OvSKMJC-t4QJUPJ6m94/s1600/tabs-widget-bg.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2Z1ZXYEdN4oGaWQzLG1_codqPSEM-RWlUn5s_rbI7_BAsp1SxyGEZFQEfK8iesGc3hpytWoyWJrTz86ZOLDaTbBMHvdXLCU4eF9-K0cLPH6vZNgzS9mHLaj-OvSKMJC-t4QJUPJ6m94/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

 

     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'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&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;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<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>
</ul>

<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'>
</b:section>                                      
</div>                           
                               
<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'>
</b:section>                                        
</div>                           
                               
<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'>
</b:section>                                       
</div>

</div>

<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,

MENU-TABS-PAGE-ELEMENTS

 

    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 »

68 comments

PLEASE NOTE:
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

    ReplyDelete
  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!! :)

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

    ReplyDelete
  4. @Ahmad

    My pleasure brother =p

    @Anony
    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. :>

    @sam
    I respect that brother. :>

    ReplyDelete
  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.... :>

    ReplyDelete
  6. @upa_kid

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

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

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

    ReplyDelete
  9. and where i can change the colors?

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

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

    ReplyDelete
  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!!

    ReplyDelete
  13. Very nice blog. www.adari.tk, www.adari69.blogspot.com

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

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

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

    ReplyDelete
  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?

    Thanks!

    ReplyDelete
  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?

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

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

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

    ReplyDelete
  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

    ReplyDelete
  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.

    ReplyDelete
  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 http://amusing-n-funny.blogspot.com/

    ReplyDelete
  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??

    ReplyDelete
  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.

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

    ReplyDelete
  28. I am using this plugin in a proStyle Template but also using an automatic content slider (http://www.helperblogger.com/2012/04/automatic-recent-posts-slider-with.html). But, when I add the slider code in the template, the tabbed widget doesn't work anymore...
    Do you know any solution for this?

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

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

    ReplyDelete
  31. This is SO great, thank you so much for providing this! I just added these tabs to my blog, check it out here: http://www.w-t-fab.com/

    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!

    ReplyDelete
  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?

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

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


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

    ReplyDelete
  34. Not working. Please Help me
    Thats my blog atoz-music.blogspot.com

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

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

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

    ReplyDelete
  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.

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

    ReplyDelete
  40. @Sameer
    Search for

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

    And remove 15px from it.

    ReplyDelete
  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.

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

    ReplyDelete
  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.

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

    ReplyDelete
  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 ?

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

    ReplyDelete
  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.

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

    ReplyDelete
  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 http://ahoracriticoyo.blogspot.com.es/

    Sorry for my english, i'm spanish :)

    ReplyDelete
  50. Nice :D

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

    ReplyDelete
  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.

    Thankyou

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

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

    ReplyDelete
  54. How do you change the hover color?

    ReplyDelete
  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.

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

    ReplyDelete
  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?

    ReplyDelete
  58. Mustafa! I have same problem as krista low

    ReplyDelete
  59. sorry that's widget content width

    ReplyDelete
  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~

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

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

    ReplyDelete
  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.

    ReplyDelete