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}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

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

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

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

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

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

</div>
<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 mustafa.stc @ 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 »

52 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. You should make a tutoral on how to add a multi tabbed widget above the comments section like bloggerstop.net, except better since that one has too many images and scripts.

    other than that, Nice tutorial!

    ReplyDelete
  2. My tab menu is better :P

    No offense ;d

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

    ReplyDelete
  4. Getting this error:

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

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

    ReplyDelete
  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


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

    @iTechplus

    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.

    @Sam
    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?

    @beben
    You welcomed beben :>

    @Anup
    Hey congrats and more power to you dear! :)

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

    @Anup
    My PR is 0 :( :(

    ReplyDelete
  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

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

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

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

    @Paul
    I am glad buddy it worked for you :)

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

    ReplyDelete
  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
    http://www.nagtechs.co.cc

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

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

    ReplyDelete
  16. @hassam
    ConGrats! :)

    @naveen
    Whats your blog URL?

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

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

    @shree

    Always welcomed :)

    @Ashish
    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?

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

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

    ReplyDelete
  21. Hello Mohamad,

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

    ReplyDelete
  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;}

    ReplyDelete
  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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">(/script)
    <style type="text/css" media="screen")

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

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

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

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

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

    ReplyDelete
  29. @Sudhir

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

    ReplyDelete
  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: http://www.sharegoodstuffs.com/ . please replay as soon as possible. my email id is kooorafsk@gmail.com

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

    ReplyDelete
  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:http://zai-labo.blogspot.com/. 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.

    ReplyDelete
  33. The widgets appear in front my blogger's page i want them somewhere between the blogspoit widget, like your widget's blog...
    Exemple:
    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)
    http://img231.imageshack.us/img231/8876/apngs.png

    ReplyDelete
  34. Can you please help me with this widget ? Visit my blog: http://www.designrshub.com ! 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.

    ReplyDelete
  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: http://ideal-knowledge.blogspot.com

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

    www.thyagu7.blogspot.com

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

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

    http://learnwebtips.blogspot.com/


    Pls pls pls help....

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

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

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

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

    ReplyDelete
  43. http://angsumanonline.blogspot.in/
    this is my blog url
    can you please help me how do i get this tab in the right panel of my blog...it 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...

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

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

    ReplyDelete
  46. hi
    I cant find the code in third step pleas help me
    my blog
    http://blogger-storm.blogspot.com/

    ReplyDelete
  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:
    http://www.hazara.edu.pk

    ReplyDelete
  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) - http://supportiveposts.blogspot.com/

    ReplyDelete
  49. Thank you!

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

    How to set that widet below the side bar?

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete