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(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/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(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/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. :)

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 »

106 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. 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. After so many days I find something useful Thanks :)

    PREMIUM BLOGGER MAGAZINE THEME

    ReplyDelete

  5. great job brother.

    I am interested to using it in my blog.

    Visit: My Blogger Club.

    ReplyDelete
  6. its so amazing ...
    thnx man ...
    <a href='http://pro-stats.blogspot.com/' rel='Dofollow'>tech and news</a>

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

    ReplyDelete
  8. Woow Awesome!

    It looks cool in my blog

    Thanks
    Tech Blog

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

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

    ReplyDelete
  11. As always, awesome Tabs :)

    E-mail reply awaiting :-)

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

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

    ReplyDelete
  14. NOTHing like mybloggertricks www.androidmud.com

    ReplyDelete
  15. 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
  16. Can i make it floating(Fixed) on upper side?? If possible can you tell me how to please???

    olive homeopathy

    ReplyDelete
  17. @Fasil
    I don't think that could be possible.Float function would be very difficult to propagate in this one.

    MyBloggerTricks.com like Text Higlighter for your Blog

    ReplyDelete
  18. @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
  19. ERROR:

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

    PLEASE HELP BRO.

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

    www.topfurtive.co.cc

    ReplyDelete
  21. SOLVED...GREAT WORK DONE...

    www.topfurtive.co.cc

    ReplyDelete
  22. @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
  23. Thank you so much Mohammad!!!! It works very ok and im so happy for this man!! :)

    ReplyDelete
  24. @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 :)
    Dear Musthafa, I didnot get those values. where to do that. can you explain please :)

    thnx olive homeopathy

    ReplyDelete
  25. @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
  26. @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
  27. @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
  28. @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
  29. it will add on Top of the Blogger automatically ??

    ReplyDelete
  30. 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
  31. Nice Post Ahemad Thank u ....And How to Keep Hide comment box like ur comment box ... Thank u

    ReplyDelete
  32. 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
  33. Thats so coooool Mr.Bhavesh Pamecha
    I loved it. it worked. Thank you :)
    Have a lookolive homeopathy now. I was searching for this for a loooong time dear :)

    Thanks
    Dr. Fasil
    olive homeopathy

    ReplyDelete
  34. 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
  35. Many thanks for your quick reply. It worked :)Brilliant menu.

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

    ReplyDelete
  37. 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
  38. Now get your self Free and Paid Homeopathic Advice and Medicine from the best panel of doctors with tested results. This foundation works on no profit / loss basis and hence charges for your medicine only. Visitwww.homeopathiconline.org and get best and instant results. First Technology Solution Online. Emailadvice@homeopathiconline.org for more information

    ReplyDelete
  39. 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
  40. Hey thank u very much for this:-)
    my blog http://onlyfullsoft.blogspot.in/

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

    ReplyDelete
  42. @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
  43. 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
  44. This comment has been removed by the author.

    ReplyDelete
  45. 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
  46. its working perfectly.....no hard work needed..thanks much be blessed

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

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

    ReplyDelete
  48. 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
  49. 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
  50. 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
  51. Yes,mohamad is must update all javascript in the site and move other host!

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

    thankx in advance

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

    ReplyDelete
  54. 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
  55. thanks for responce, i hope u will do it

    ReplyDelete
  56. 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
  57. 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
  58. 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
  59. Mohamad,today i check and add in the my blog,but again have problem,i sure!
    plz fixed this issue!
    Best Regard!

    ReplyDelete
  60. 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
  61. @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
  62. This comment has been removed by the author.

    ReplyDelete
  63. @Mohammad Mustafa Ahmedzai

    hi. i updated the script source. but stil i cant configure out whats the problem.
    the sub tabs are not working for me.
    plz look out and tell me the appropriate solution? plz.
    i love this. jquery menu.much.
    here is my blog.
    http://www.numoviez.com/

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

    ReplyDelete
  65. 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
  66. Thanks alot for the update, i was really worried about it....
    God Bless you...
    Thanks :)

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

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

    ReplyDelete
  69. 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
  70. Hi

    The Code is not working For Me.I am Using it On IE.
    Please Help.

    http://www.facebook.com/downloadfreefullmovie

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

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

    ReplyDelete
  73. 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
  74. 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
  75. Hi. I can't find body {. Can you help me? Thanks.

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

    ReplyDelete
  77. 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
  78. i have applied it but my sub tabs are not visible, can you help me please.

    ReplyDelete
  79. 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
  80. IF I DONT WANT TO ADD THE SUB MENUS THEN WHAT WILL I DO??

    ReplyDelete
  81. 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
  82. Nice one mbt. just installed it and it was awesome. http://kriztek.blogspot.com

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

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

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

    ReplyDelete