June 6, 2011

Widgets

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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/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(http://2.bp.blogspot.com/-W_XatGRw65k/TeDn-AbzkMI/AAAAAAAAHLo/TijlQkRUbas/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 »

95 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. 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. Great widget. i have some trouble to add, but i will add later.

    by
    SEO news and tips

    ReplyDelete
  6. Thanks Dear for such a wonderful site........

    Check these these tricks & widgets on my sites;;;

    http://ebooks2000.blogspot.com/
    http://sevno.blogspot.com/
    http://downea.blogspot.com/

    ReplyDelete
  7. 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
  8. @upa_kid

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

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

    ReplyDelete
  10. it doesn't work on my blog
    check it please :)
    http://www.artclspot.us

    ReplyDelete
  11. @mUKHTAR

    To add another tab kindly use this code,

    <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>
    <li><a href='#widget-themater_tabs-1432447472-id4'>TAB-4</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 class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
    <b:section class='sidebar' id='sidebartab4' preferred='yes'>
    </b:section>
    </div>

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


    Where exactly are you facing problem brother?

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

    ReplyDelete
  13. and where i can change the colors?

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

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

    ReplyDelete
  16. 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
  17. Very nice blog. www.adari.tk, www.adari69.blogspot.com

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

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

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

    ReplyDelete
  21. 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
  22. Not working in http://b-bayu.blogspot.com

    ReplyDelete
  23. 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
  24. Hi Dear, You are great. Finally I added this widget in my blog too. Thanks a lot..

    ReplyDelete
  25. Sorry to ask Mohammad, I couldn't place any other widget after this multitab widget. Can you please help me. My blog is http://learnwebtips.blogspot.com/

    ReplyDelete
  26. thanks, i will surely use this on my blog, but i think it needs some more customization.please do check out my blog at Blogger Widgets for the updated design on this widget.....may be you like it..thanks though.

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

    ReplyDelete
  28. http://gowallpapers13.blogspot.com/

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

    ReplyDelete
  30. 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
  31. @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
  32. 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
  33. 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
  34. someone for help... :)
    i can conect all-themater_tabs, i want to put more tabs, and every tabs must be with difrent article.HELp
    for example
    http://emigrant-bg.blogspot.com/
    I HAVE TABS BUT I DONT KNOW HOW TO CONECT WITH DIFRENT ARTICLE

    ReplyDelete
  35. 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
  36. This comment has been removed by the author.

    ReplyDelete
  37. 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
  38. Mybe because of different versions of jquery? Is it possible to have more than two on the same page?

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

    ReplyDelete
  40. 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
  41. 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
  42. (div class='column-right-inner'>)

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


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

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

    ReplyDelete
  44. i cannot find the code in step 6 in my edit html template. my blog address is http://alexisfaris94.blogspot.com/ ... please help me

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

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

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

    ReplyDelete
  48. 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
  49. @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
  50. @Sameer
    Search for

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

    And remove 15px from it.

    ReplyDelete
  51. @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
  52. @Bhavesh Pamechafriend, I changed, but remain the same, Do you know what is tag.

    ReplyDelete
  53. 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
  54. Not use this
    www.samjhanakophool.blogspot.com see this Please Help me

    ReplyDelete
  55. Not working on this blog Plese contact me www.hotnewsnp.blogspot.com

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

    ReplyDelete
  57. 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
  58. How to change the orange highlight to blue color ?

    ReplyDelete
  59. Hi! i tried your widget on my website but it is not working - http://examstreet.blogspot.in/. Please have a glance and try to find the problem

    ReplyDelete
  60. 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
  61. Your tab was working great, but not now. Its not working now. Please fix it.

    ReplyDelete
  62. I want to use this Multi Tabbed Widget on my blog but it look like difficult. Please help me . my blog link is wordinvestor.blogspot.com

    ReplyDelete
  63. 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
  64. Nice :D

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

    ReplyDelete
  65. 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
  66. i'm using template from software artister and i cannot find <div 'column-right-inner' or sidebar-wraper,, can you help me?

    ReplyDelete
  67. It just bounces back when i click it.Can you give a way to deal with it? Can you also give some suggestions to match the color according to my site here. Need One touch.

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

    ReplyDelete
  69. Can you help me please? I followed your directions to put in the html code on my blog and I changed the text for my tabs, but when I go into Layout on blogger I don't have the add gadget option for each tab, they are just being added as normal gadgets... Thanks. Krista @ http://ahandfulofeverything.blogspot.com/

    ReplyDelete
    Replies
    1. I am having the same problem! How do I add the gadgets in the layout page? Thanks!

      Delete
  70. How do you change the hover color?

    ReplyDelete
  71. 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
  72. hey guys, I had the same problem with the color, I've searched the original html code: #EE5D06, but this one only changes the font color, not the color for the line below the font.... so I had to change the line's color with ps (a portable version)and then put it on the web.... here are four examples I made, hope it helps... good luck!
    http://3.bp.blogspot.com/-ThKlpm4IN0U/UZFEtV5oGxI/AAAAAAAAD54/xZel6hhwFCk/s1600/tabs-widget-bg2.png
    http://4.bp.blogspot.com/-K6FnZlodc7A/UZFFeITF3fI/AAAAAAAAD6A/W6RpBwhACus/s1600/tabs-widget-bg3.png
    http://3.bp.blogspot.com/-MIOnOYkzLto/UZFGaXZCm6I/AAAAAAAAD6M/7Psyjlf8XAw/s1600/tabs-widget-bg4.png
    http://3.bp.blogspot.com/--_wWsk4KTKA/UZFHQxTheBI/AAAAAAAAD6Y/TXBBZjm2nWw/s1600/tabs-widget-bg5.png
    http://4.bp.blogspot.com/-uPbZ2ETZ70E/UZFEEB_hW9I/AAAAAAAAD5w/aNoHhf0AUZc/s1600/tabs-widget-bg2.png

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

    ReplyDelete
  74. 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
  75. @Mohammad Mustafa Ahmedzai

    Step 6.
    plz help
    [url]http://torrentersss.blogspot.in[url]

    ReplyDelete
  76. thanks mohammad.. its working fine for me

    actually contacted you via the contact address but no response as this is almost 2wks now.

    kelvincleinwaver@gmail.com

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

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

    ReplyDelete
  79. There is only one problem with my blog that't widget content widget. if you will see my blog http://geekyshow.blogspot.in/ you will understand what am i talking about. I dont know how to increase widget content width so it will cover full sidebar area for my archive and popular post.

    ReplyDelete
  80. sorry that's widget content width

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

    ReplyDelete
  82. 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
  83. Thank You Very Much I Found This Widgets Very Help Full Keep it Up! Visit Down Download Latest Game here ::Thank You Very Much::

    ReplyDelete
  84. Thank bro,I just really love it.
    I used it on my blog magicbox4us.blogspot.com.

    ReplyDelete
  85. I am having trouble add the gadgets once I have edited the html. It is showing up in on my blog but I can't add the gadgets to the links. Thanks for your help!

    Blog:
    lovelogicandlaughter.com

    ReplyDelete
  86. Assalam O Alaikum! Bhai Jaan Apki site bohat hi achi aur informative hai. Bhai mujhe bhi help ki zarurat hai.
    Mein apne blog ki posts/pages mein Tabs add kerna chahta hon..Jis mai mein diferrent cheezen show krna chahta hon like specifications, user review, full review etc etc. Wordpress mein to is k liye plugins mojod hain but Blogger mein aisee koi option nahi hai so plzzz help me. Thanks in Advance :)

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |