Colorful Tabs: A JQuery Menu For Blogger

colourful jquery menuAfter having published and designed over 100+ Navigation Menus for Blogger, both with horizontal and vertical list view, today we would like to share a beautiful menu that has remained the favorite choice of all MBT clients so far. This menu changes color for each tab on mouse hover. It uses simple JavaScript functions to produce neat and clean transition effects. Instead of displaying the sub menu items in traditional vertical drop down list, we aligned them with one another to fit into a single line. Unlike other menus, this widget would easily fit any BlogSpot template without design conflicts. It is positioned at the top most section of your blog to attract readers the most. The installation steps are fun to try and extremely easy. The Menu works fine on all major browsers i.e: IE7+, Safari, Chrome, Mozilla and Opera.  Lets add it to your blogs and get rid of any existing bulky menu that proved no less than a trouble.


Live Demo

If you are interested to learn how to create a menu from scratch and add Jquery effects to it then read the previous part of this series.
Navigation Menu Tutorials
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
6. Colorful Tabs: A JQuery Menu For Blogger

Add it to blogger

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search For <head> and just below it paste these scripts:
<script src='http://downloads.mybloggertricks.com/jquery-pack-colourful.js' type='text/javascript'></script>
    <script src='http://downloads.mybloggertricks.com/jcarousel-colourful.js' type='text/javascript'> </script>
    <script src='http://downloads.mybloggertricks.com/files/mt-colourful.js' type='text/javascript'></script>
    5.   Now search for the body class. i.e: Looks similar to this with some code inside it

body {
----
---
)

Inside this class paste the following values:

body { 
margin:0px
padding:0px;
---
---
       6.   Next search for this:
<body>
or this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
   
7.   Just below it paste the following compressed code:

<!--START OF COLOURFUL TABS BY MBT-->
<style>
/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaLlWTVT0hySM38O1_jtmxUIb4kxvff9cLD0OaWOV7FPyagPQdzGXjr2ylFsE9wXIefSxkWLAwpgv2j0mzkwEy6UM5GeXXlgr3WafJE26N9ATPu-1IFw8AgPbw9BKEcQKaGmHp4SRzz4/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
      margin: 0;  padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
    border-left: 1px solid #cfcfcf;
        border-right: 0px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaLlWTVT0hySM38O1_jtmxUIb4kxvff9cLD0OaWOV7FPyagPQdzGXjr2ylFsE9wXIefSxkWLAwpgv2j0mzkwEy6UM5GeXXlgr3WafJE26N9ATPu-1IFw8AgPbw9BKEcQKaGmHp4SRzz4/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
    font-size: 12px; font-family: helvetica, arial, sans-serif;
    list-style: none;  margin: 0 auto;  padding: 0;
    width: 960px;
}
#nav ul {
     margin: 0;
   
}
:focus {
    outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
    display: block;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 33px;
    padding: 0 13px 0 10px;
    color: #333;
    text-decoration: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhexelSNkZmPI8x3y-p6h1FPTYnXybQm-RRXlcelz5atyzoa6l8mgqjXmGdOb2clWovv4bvCNxKaF63vc0KvFGbFoiRe9IBs93EN5cVCqonqUSaJbUp5yHYCNKIxJQ_oPlcL-z62U3DYI0/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
    padding: 0 33px 0 10px;
    text-indent: -9999px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6WPxVb36EFKQGTGfrym9OP8ZTPmwD5-WS57FvjHRKxMgr1YywJ1aBER4jK72QJkeKl3ZxOX5hoS_WjWOfjiqqtn4RWI-d2G_8pqJpV-JRBl8FrVAqjdRJkvBXwCTc1CzOnBWVzV8jig/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6WPxVb36EFKQGTGfrym9OP8ZTPmwD5-WS57FvjHRKxMgr1YywJ1aBER4jK72QJkeKl3ZxOX5hoS_WjWOfjiqqtn4RWI-d2G_8pqJpV-JRBl8FrVAqjdRJkvBXwCTc1CzOnBWVzV8jig/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
    position: absolute;
    top: 33px;
    left: -1px;
    overflow: hidden;
    width: 960px;
    display: none;
    z-index: 999;
list-style: none;
  padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1VkIAUS8NC5wdPsVmL6U-JhCJOwOfEjIhuY0km4W0ar3S5Ni8pvEV2QoEbLAZlc1A184PooSWco6asusGgY6p7MAFvYkt2YprdxVtxmVmzz4s41KuivZME776XSHKHG8xy_Xp-neK38A/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPYmedLPS3wJ132EaA6a2aNzWbUjGgQY31ixksIVoTY_D1K3TKmHf_VkhL9wglxFVEIsEWknLu7h5tkmGPsqwJOGfNqvYebs8SMJ4hNv1YyZw1jLJS9paQiJtq8_D6zX9Ix9FDBo3XgA/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8FN-kBcd6x9kIWFii41iH6TDBvwqw2ShA95uc325lnCFUviFUKiUt9v99Sm_6QABY2ExbSJR1Nwc_7qJfY16sJUcaWWwoTfxJZjB5AdAm_YxleSOEAywtSh64-mzHM2ZhI-WNm3wMZk/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPvOc1Y-3OVHqGaf5wc9rmhtQAU84qyHfxANaPhE_f2TLss1SqlBZLc_kX85e5v408Dv2gIevXBKtfdpJAe0fQrQ1xSQI8dYdThQr8Mv6m6ac06qipa1uB46e477dBnkUdrRPU0oYfk8/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEy_t5g6GQoMiRxRJf1CJvCQ41x8ma8GceEVhgJvOS_64v1hE22-XHIxEH5yzdYdv7KI9svQnvw21h77h3i5i82k6OHv7B5G_rRbsXTm29XvDP5ielPIIVPnSDfOysQjaHZn2MNGztnss/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a {
    float: none;
    background: none;
    font-size: 11px;
    text-transform: none;
    color: #fff;
    line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
               
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

                <li class='top-link' id='mbt'><a href='#'>TAB 1</a>
                    <ul class='sub-nav'> 
                    <li><a href='#'>SUB TAB 1.1</a></li>
                    <li><a href='#'>SUB TAB 1.2</a></li>
                    <li><a href='#'>SUB TAB 1.3</a></li>
                    <li><a href='#'>SUB TAB 1.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 2.1</a></li>
                    <li><a href='#'>SUB TAB 2.2</a></li>
                    <li><a href='#'>SUB TAB 2.3</a></li>
                    <li><a href='#'>SUB TAB 2.4</a></li>
                    <li><a href='#'>SUB TAB 2.5</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='#'>TAB 3</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 3.1</a></li>
                    <li><a href='#'>SUB TAB 3.2</a></li>
                    <li><a href='#'>SUB TAB 3.3</a></li>
                    <li><a href='#'>SUB TAB 3.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='#'>TAB 4</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 4.1</a></li>
                    <li><a href='#'>SUB TAB 4.2</a></li>
                    <li><a href='#'>SUB TAB 4.3</a></li>
                    <li><a href='#'>SUB TAB 4.4</a></li>
                    <li><a href='#'>SUB TAB 4.5</a></li>
                    <li><a href='#'>SUB TAB 4.6</a></li>
                    <li><a href='#'>SUB TAB 4.7</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 5.1</a></li>
                    <li><a href='#'>SUB TAB 5.2</a></li>
                    <li><a href='#'>SUB TAB 5.3</a></li>
                    <li><a href='#'>SUB TAB 5.4</a></li>
                    <li><a href='#'>SUB TAB 5.5</a></li>
                    </ul>
                </li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->
               

                  <li style='clear: both;'/>
            </ul>
</div>
<!--END OF COLOURFUL TABS BY MBT-->

  8.  Hit Save and all done!

Visit your blogs to see a complete new change to the site layout. The menu will blend both light and dark themes. Have fun. :)

Customizations Guide:

The code is written in a neat way so that any one may easily change, add or delete the tabs.
  • Replace # with URL of the page and replace TAB names with Page Title
  • To change the width of the menu edit width: 960px
  • To create a new tab in any sub menu simple paste this code above </ul>
<li><a href='#'>SUB TAB</a></li>
  • Tab 7 to Tab 10 are disabled. If you want to activate any one of it then simply remove the comment tags across it. i.e <!-- before it and --> after it
  • For more customization tips, just post me a comment!

Is it SEO friendly?

Simple CSS and HTML menus are way better than flash menus because they use the hyperlink tag along with anchor text. Search engines crawl them better and they appear clearly in SITE LINKS. This menu has everything that robots would love. It has a Clear structure and uses no fancy Jquery functions which could lead to High load time.

Credits

The menu design is inspired from blogs.com, scripts and code structure is made compatible with blogger by MBT blog. You are most welcomed to redistribute the code as long as you attach attribution and credits back to this page.

Need help?

The code is self explanatory and would not trouble many of you. However if you want to further customize the menu then you are most welcomed to ask us for any help needed. Please always share your BLOG URL while posting. I hope this little effort may prove helpful for most of you. Thank you for taking time and reading this tutorial. Peace and blessings pals. :)

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

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Looks cool but if I am not wrong this can be done without jQuery, can't we?

    ReplyDelete
  2. Awesome!! I have a question though.

    Can we add this somewhere else instead of below head? like if it already exists a drop down menu on our Blog and we want to add also this one but somewhere else how we do it?

    Thanks!!

    ReplyDelete
  3. very informative post as usual bro. it really helps me a lot

    regards
    smartincomeguide.com

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

    ReplyDelete
  5. Nice menu..!!! :) http://gj37765.blogspot.com/

    ReplyDelete
  6. Only one word and it is 'Awesome'. Gr8 work.

    ReplyDelete
  7. As always, awesome Tabs :)

    E-mail reply awaiting :-)

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

    ReplyDelete
  9. NOTHing like mybloggertricks www.androidmud.com

    ReplyDelete
  10. Fabulous menu. But like others have mentioned, how can I move it so it sits below my blog header rather than at the top of the page? I've been experimenting but no luck so far.

    ReplyDelete
  11. @Fasil mohammed
    Try changing position: relative to position: fixed.

    .MBT-Nav-container {
    .
    .
    position: fixed;
    .
    .
    }

    In sandbox it works but not just in any template. Lemme know how it goes.

    ReplyDelete
  12. ERROR:

    Error parsing XML, line 778, column 35: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    PLEASE HELP BRO.

    ReplyDelete
  13. SOLVED...GREAT WORK DONE....KEEP IT UP....

    www.topfurtive.co.cc

    ReplyDelete
  14. SOLVED...GREAT WORK DONE...

    www.topfurtive.co.cc

    ReplyDelete
  15. @bhavesh

    We surely can. The java script will keep the selected sub menu open on any page that is visited. For some reasons I could not make it work with blogger due to lack of time but I will re look into this. :>

    @Andreas
    Sure you can. You can simple paste the code inside a HTML/JAVAScript widget instead of pasting it below the body tag. :)


    @haider

    Replied :)

    @Diets and Calories @M.M Alam

    Just copy the code in step#7 and paste it inside HTML Javascript widget. :)


    @Fasil

    Bhavesh is right. Simple replace the position property with fixed. and add left:0; and top:0; values also

    @Tanmay Kapse
    With CSS almost any style could be set. Objects and elements are easily controlled with CSS properties. so the fixed float property is just as easy buddy. :)

    ReplyDelete
  16. Thank you so much Mohammad!!!! It works very ok and im so happy for this man!! :)

    ReplyDelete
  17. @Tanmay Kapse

    @Bhavesh Pamecha , THanks it works. but When i scroll down the body of post covers it. And it has moved to lft side. How can i deal with it to get it fixed on the center without the covering by post body :)

    ReplyDelete
  18. @Tanmay Kapse

    @Bhavesh Pamecha , THanks it works. but When i scroll down the body of post covers it. And it has moved to lft side. How can i deal with it to get it fixed on the center without the covering by post body :)

    ReplyDelete
  19. @KRUNAL INTWALA
    Dear Musthafa, I didnot get those values. where to do that. can you explain please :)
    THanks it works but When i scroll down the body of post covers it. And it has moved to lft side. How can i deal with it to get it fixed on the center without the covering by post body :)

    ReplyDelete
  20. @Fasil
    No worries buddy. You need to add right: 0; and a z-index apart from top and left which Mohammad suggested. Do the following.

    .MBT-Nav-container {
    .
    .
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999;

    .
    .
    }

    z-index will keep the menu on top and will not go behind the post when scrolled down whereas the right and left will center the menu.

    Hope this helps :)
    Let us know if you need any further help :)

    ReplyDelete
  21. it will add on Top of the Blogger automatically ??

    ReplyDelete
  22. I have add these HTML code to my new blog with your cute box template. But it does not work. what's wrong going on with it? please do let me know.

    my blog address: http://icabtutorial.blogspot.com/

    ReplyDelete
  23. Nice Post Ahemad Thank u ....And How to Keep Hide comment box like ur comment box ... Thank u

    ReplyDelete
  24. Great work my brother, i use MBT church theme on my blog, if i want to replace the navbar with this one, how do i do that? thank you for this wonderful tips.

    ReplyDelete
  25. Hi,

    I have use it in my blog but then the menu bar background colour follows the template colour, can i get rid of it.

    I am putting it in header instead on the top.

    Thanks

    ReplyDelete
  26. Many thanks for your quick reply. It worked :)Brilliant menu.

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

    ReplyDelete
  28. Hi, Your tutorials are just awesome and really really helpful.Iam a newbie to blogger and my blog is on the construction pipeline and I would like to create it with a navigation bar with or w/o dropdowns and link the posts to label first and then link that Label to the menu item. Pls guide me through this.Another issue when I tried is that Iam not able to find the particular code you specify in the HTML editor, eg,body.Is there a shortcut to FIND like Ctrl+F or any other functions.Would greatly appreciate your help on this.

    ReplyDelete
  29. I am willing to use it to my new blog with your cute box template. Is it possible to use this colorful tabs with cute box. please do let me know.

    My blog address: http://icabtutorial.blogspot.com/

    ReplyDelete
  30. Hey thank u very much for this:-)
    my blog http://onlyfullsoft.blogspot.in/

    ReplyDelete
  31. realy helpful tips
    sir how can i add click here to comment box like in your blog...
    to my blog www.yomix.in

    ReplyDelete
  32. @Jithu
    That's not straight forward. It takes time as you need rework on the widget once again and I think Mohammad is working on it, don't know.

    ReplyDelete
  33. bom dia!

    Gosto de seus ensinamentos,
    e da forma como trata seu leitor/aprendiz!
    Fiz no meu blog e deu certo!

    Como vc descreve:
    que a gente pode blogar , porém linkar para tua fonte,
    fiz de acordo.
    Espero ter postado certo!
    Qualquer coisa, pode me avisar sobre o sim e o não poder compartilhar tao belo ensinamento!
    Fique na paz!

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

    ReplyDelete
  35. Hello,

    I Need a HELP! right now. This menu bar is Awesome and want it to bring down below my Title. Can you help me in this matter.

    This is my BLOg -----> http://techbayworld.blogspot.com/

    ReplyDelete
  36. thnks for your info,,,

    ReplyDelete
  37. its working perfectly.....no hard work needed..thanks much be blessed

    ReplyDelete
  38. Thanks http://www.mybloggertricks.com
    to give this menu

    My site: http://www.onsign.blogspot.com

    ReplyDelete
  39. I'd tried added the Menu in HTML and it works GREAT! But it look kinda small when I added the Menu using the Widget. Can u help?

    http://brosche-loo.blogspot.com/

    ReplyDelete
  40. Assalamualaikum, Mohammad. My name is Wan. I'm new blogger. I have problem with sub nav. When I view sub page, my blog background gone. How to fix it?
    This is my blog http://wankaze.blogspot.com/http://wankaze.blogspot.com/

    -Wan

    ReplyDelete
  41. It worked perfectly all this time but suddenly the sub menu is not appearing at all. Just letting you know Mohammad.

    I'm waiting perhaps for a fix.

    Thanks!

    ReplyDelete
  42. Yes,mohamad is must update all javascript in the site and move other host!

    ReplyDelete
  43. no longer working sub menus are not displaying you can check out in your demo also . any help please.........

    thankx in advance

    ReplyDelete
  44. Also this is only working in the google chrome!i hope mohamad will to fixed!

    ReplyDelete
  45. Note


    The JavaScript files are hosted at Google servers which is not responding since 48 hours for reasons unknown. At present I will wait one more day if nothing seems to work then I will host them at our Hostgator servers. Please bear with us till then. Apologies for the inconvenience caused buddies. Sometimes Google sucks big time.

    ReplyDelete
  46. thanks for responce, i hope u will do it

    ReplyDelete
  47. I have add the first code which is to added after

    ///<head

    but i cannot find //body{ code

    i keep searching no luck for me. can u help me over here

    ReplyDelete
  48. This coding is not run in my blog please help me..!
    my blog is http://www.ccolumns.com
    Please reply i am waiting...?
    Thanks

    ReplyDelete
  49. UPDATE

    I have transferred all files to our servers and it will fine now. All you need to do is to find the following link inside your templates:

    http://mybloggertricks.googlecode.com/files

    and replace it with this:

    http://downloads.mybloggertricks.com


    You will do this thrice because there are three links in step#4 that you need to update this way.

    Apologies for the inconvenience. You may now enjoy MBT direct links :)

    ReplyDelete
  50. Mohamad,today i check and add in the my blog,but again have problem,i sure!
    plz fixed this issue!
    Best Regard!

    ReplyDelete
  51. Hi, the floating aspect of my tabs has simply disappeared without me changing anything. One minute they were there, the next they totally disappeared. So now when you rest the cursor on the tabs, no subtabs appear. I checked through the code, and nothing seems to have changed. Any ideas?

    Thanks CD

    ReplyDelete
  52. @Creditum Debitum
    Yes,u must click the "Demo" and click right,view page source and copy correct java-script!
    ------------
    Bcoz mohamad is mistak this post but added correct java in the demo link!
    Goodluck!

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

    ReplyDelete
  54. pl look in to the matter it's not working. drop down menu are collapsed.

    ReplyDelete
  55. Assalam o Alaikum,
    http://blog.kentemplates.com/2012/11/colorful-tabs-jquery-menu-for-blogger.html
    bhaiapki puri post yahan copy hoe hai kindly notice!!

    ReplyDelete
  56. Thanks alot for the update, i was really worried about it....
    God Bless you...
    Thanks :)

    ReplyDelete
  57. Hello Mohammad. Suddenly is not working buddy. Check out your demo to see what i mean.

    ReplyDelete
  58. Ignore my previous message man it works very fine now! :D Have a GREAT holiday break and keep it up!

    ReplyDelete
  59. Hi Muhammad this is not working in my site, first it was working but not now, here is my site url can you please check!
    www.fvmasterz.com

    ReplyDelete
  60. i added above code as ur instruction but sub-menu is not appearing pls help me as urgent.

    ReplyDelete
  61. Thanks i used it..
    http://36-24-36-indian.blogspot.com/

    ReplyDelete
  62. For some reason, the drop down part isn´t working, it only changes colors when you hover but it doesn't show the sub-navs. Any idea as to why?
    http://blogdepruebamariano.blogspot.com.ar/

    ReplyDelete
    Replies
    1. hey man .. have u got tha answer coz i'm facing the same problem with it

      Delete
  63. Dear Musthafa,
    this has stopped working on my blog. What might be the reason?
    It is not droping down actually :p
    www.olivehomeopathy.in

    ReplyDelete
    Replies
    1. hey man .. have u got tha answer coz i'm facing the same problem with it

      Delete
  64. Hi. I can't find body {. Can you help me? Thanks.

    ReplyDelete
  65. The sub tab (2.1)(2.2)... doesnt work how do i activate that?
    thanks in advance..

    ReplyDelete
  66. Awesome! How would one change the code so that the tab is highlighted when the page with that tab link is selected?

    Thanks in advance!

    ReplyDelete
  67. i have applied it but my sub tabs are not visible, can you help me please.

    ReplyDelete
  68. Hi. :)
    I had this Script on my Blog (not which im posting from, but GooLoo.de) and it showed up. But the 2nd Level didn't show up. It was just the first Level with all Labels, but not the 2nd with the Links.

    ReplyDelete
  69. IF I DONT WANT TO ADD THE SUB MENUS THEN WHAT WILL I DO??

    ReplyDelete
  70. Thanks. looks great.
    one problem though, I can't find a way to activate the sub titles. I followed directions still can't see the subs (they dont work even without changing TABs). please help

    ReplyDelete
  71. Nice one mbt. just installed it and it was awesome. http://kriztek.blogspot.com

    ReplyDelete
  72. please help.....subtitles not working!

    ReplyDelete
  73. I tried to us this i my blog. Colorful tabs are successfully created. But drown down boxes could not be created.pleas guide

    ReplyDelete
    Replies
    1. Same here. Drop down menus dont work.

      Probably because the http://downloads.mybloggertricks.com/files/mt-colourful.js file is unavailable

      Delete
    2. The file is working just fine and so is the demo. Please make sure to place the jquery files at the right place. Make sure you are not using several js scripts on your page.

      Delete
  74. Hi admin, i'm not able to come up with any result, please help.

    ReplyDelete