January 18, 2011

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.





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 »

85 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. Hey just sorted it out but its looking like this:

    http://img638.imageshack.us/img638/9928/wordpressmultitabbed.png

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

    ReplyDelete
  7. Hi guys,

    Google PR has been updated! My blog HackTutors got PR 3. Check yours!

    Thanks!
    Anup

    ReplyDelete
  8. @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
  9. @Mohammad
    Yes I am able to add and remove widgets easily..:)

    @Anup
    My PR is 0 :( :(

    ReplyDelete
  10. 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
  11. @harooon
    About whom you are talking about...????

    ReplyDelete
  12. @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
  13. hmm.....
    haroon seems to be over-smart.
    Well haroon,please show your template and prove yourself rather than being jealous.

    ReplyDelete
  14. i can prove but im not jealous by some one but i can prove is that the content he uses is copied from other b logs just it if u want to see my blog come on http://myfundoo-blog.blogspot.com/ it is operated by our team member alternatively ok

    ReplyDelete
  15. Thank you!!!!! it's 100% working in my blog...
    Paul Santosh

    ReplyDelete
  16. @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
  17. just mailed you my template plz check

    Thank You

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

    ReplyDelete
  19. it works for me,thax you very much

    http://www.bloggertrix.com/

    ReplyDelete
  20. 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
  21. Sir
    if i give my template code then will you iplement this hack in that code in my template

    ReplyDelete
  22. 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
  23. @Jeet


    Use this code instead,

    <div class='MBT-tabviewsection'>

    <script type='text/javascript'>
    jQueryundefineddocument).readyundefinedfunctionundefined$){
    $undefined&quot;.MBT-tabs-content-widget-MBT-id&quot;).hideundefined);
    $undefined&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClassundefined&quot;MBT-tabs-current&quot;).showundefined);
    $undefined&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).showundefined);
    $undefined&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).clickundefinedfunctionundefined) {
    $undefined&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClassundefined&quot;MBT-tabs-current a&quot;);
    $undefinedthis).addClassundefined&quot;MBT-tabs-current&quot;);
    $undefined&quot;.MBT-tabs-content-widget-MBT-id&quot;).hideundefined);
    var activeTab = $undefinedthis).attrundefined&quot;href&quot;);
    $undefinedactiveTab).fadeInundefined);
    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>
    <li><a href='#widget-MBT-id4'>Tab-4</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 style='clear:both;'/>
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id4'>
    <b:section class='sidebar' id='sidebartab4' preferred='yes'>
    </b:section>
    </div>

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

    Replace Tab-4 with your widget title

    ReplyDelete
  24. Omg thank you so much. It works gr8 at my BLog

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

    ReplyDelete
  26. @hassam
    ConGrats! :)

    @naveen
    Whats your blog URL?

    ReplyDelete
  27. Sir u have not give the reply of my query. I extreamly needed tab section in my blogger template plz help me
    my address is
    www.nagtechs.co.cc

    ReplyDelete
  28. omg thanks bro thanks thanks
    check out my site
    http://smahkin.blogspot.com/

    ReplyDelete
  29. Yeppiiii.....
    I was searching for this for long time. I found many multi tabbed widget but they were not suiting to my template. You can see my success on my blog( http://discoverdreamland.blogspot.com )
    Thanks for it..
    I had asked you one query on other post. Please solve that also.
    http://discoverdreamland.blogspot.com
    ashishhgaurav@ymail.com

    ReplyDelete
  30. Hi Mohammad, I have the same question as Naveen,

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

    I have done the first two steps with my Template
    images by Lokibaho. Powered by Blogger. http://lastingrose.blogspot.com/

    ReplyDelete
  31. Hello Ahamad

    I have added like this and you can see the result on site


    (div class='column-right-outer')
    (div class='column-right-inner')
    (!-- MBT TABS Start--)
    (div class='MBT-tabviewsection')

    ReplyDelete
  32. 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
  33. @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
  34. 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
  35. @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
  36. Hello Mohamad,

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

    ReplyDelete
  37. @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
  38. 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
  39. @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
  40. 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
  41. @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
  42. @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
  43. I cant find "div id='sidebar-wrapper" in my edit HTML please help.

    ReplyDelete
  44. @Sudhir

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

    ReplyDelete
  45. http://allmytutorials.blogspot.com/

    this is the url of my blog please check it bro if u fid any solution then tell me

    ReplyDelete
  46. 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
  47. Today there are a lot of internet marketing courses on offer and the majority of them are being marketed so well that you really do not know how to evaluate and what to search for.


    Landing Page Design

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

    ReplyDelete
  49. 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
  50. 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
  51. This comment has been removed by the author.

    ReplyDelete
  52. 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
  53. I do not find the 3rd HTML in my blog.
    My Blog Address: http://musicnightmare.blogspot.com

    ReplyDelete
  54. Where to get latest widget for blogger?
    http://jobsforkarachi.blogspot.com/

    ReplyDelete
  55. 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
  56. heloo my dear bro :)
    i want this tab widget to appear under my blog posts so please help me .
    kingthyag777@gmail.com

    ReplyDelete
  57. 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
  58. 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
  59. 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
  60. Thanks a lot dear... Working nicely for me.. See my blog.. http://learnwebtips.blogspot.com/

    ReplyDelete
  61. It was very interesting for me to read that blog. Thanks the author for it.
    I like such topics and everything that is connected to them.

    I would like to read more soon.

    ReplyDelete
  62. 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
  63. GOD help me :') i could.t find the sider bar wrapper

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

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

    my blog url:http://www.picmusiq.co.in/

    please kindly do it for me.. i am eagerly waiting for it.

    ReplyDelete
  66. Thanks for sharing this. It is a good idea to make a blogger blog looks like a wordpress one. I really enjoyed what my blog looked like when I used this. Great job!

    white label seo

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

    ReplyDelete
  68. 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
  69. Hai mohammed I cant find the code <div id='sidebar-wrapper'> . My blog is www.olivehomeopathy.blogspot.com Plz help

    ReplyDelete
  70. you havnt helped me... plz www.olivehomeopathy.blogspot.in

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

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

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

    ReplyDelete
  74. 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
  75. 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
  76. Thank you!

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

    How to set that widet below the side bar?

    ReplyDelete
  77. /*--- MBT Popular Posts --- */
    .popular-posts ul {
    padding-left: 0px;
    counter-reset: popcount;
    }
    .popular-posts ul li:before {
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    counter-increment: popcount;
    content: counter(popcount);
    font-size: 16px;
    background: #292D30;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font-family: georgia;
    float: left;
    border: 2px solid #dddddd;
    box-shadow: 1px 2px 9px #666666; }
    .popular-posts ul li {
    border-bottom: 1px dashed #dddddd;
    }
    .popular-posts ul li:hover {
    border-bottom: 1px dashed #696969;
    }
    .popular-posts ul li a {
    text-decoration:none; color:#5A5F63;
    }

    .popular-posts ul li a:hover {
    text-decoration:none;
    }

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