After 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.
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
- Go To Blogger > Template
- Backup your template
- Click Edit HTML > Proceed
- Search For <head> and just below it paste these scripts:
<script src='http://downloads.mybloggertricks.com/jquery-pack-colourful.js' type='text/javascript'></script>5. Now search for the body class. i.e: Looks similar to this with some code inside it
<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>
body {
----
---
)
Inside this class paste the following values:
body {6. Next search for this:
margin:0px
padding:0px;
---
---
}
<body>or this:
<body expr:class='"loading" + 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. :)
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
86 comments:
Cool One.. :)
Looks cool but if I am not wrong this can be done without jQuery, can't we?
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!!
very informative post as usual bro. it really helps me a lot
regards
smartincomeguide.com
After so many days I find something useful Thanks :)
PREMIUM BLOGGER MAGAZINE THEME
great job brother.
I am interested to using it in my blog.
Visit: My Blogger Club.
its so amazing ...
thnx man ...
<a href='http://pro-stats.blogspot.com/' rel='Dofollow'>tech and news</a>
thanx it works...
visit my blog : tech and news
It's so interesting dude.
It's so interesting dude.
topphotosblog.blogspot.in/2012/09/rare-photos-from-india-monuments-of.html
Woow Awesome!
It looks cool in my blog
Thanks
Tech Blog
a good information regarding j query. web design bangalore
Nice menu..!!! :) http://gj37765.blogspot.com/
Only one word and it is 'Awesome'. Gr8 work.
Good widget, My Recent post -
Get free recharge just by sending free sms online
As always, awesome Tabs :)
E-mail reply awaiting :-)
Just Awesome Bro
Pc Help And All Tips
NOTHing like mybloggertricks www.androidmud.com
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.
a good information regarding jQuery
Can i make it floating(Fixed) on upper side?? If possible can you tell me how to please???
olive homeopathy
@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
@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.
ERROR:
Error parsing XML, line 778, column 35: Element type "a" must be followed by either attribute specifications, ">" or "/>".
PLEASE HELP BRO.
SOLVED...GREAT WORK DONE....KEEP IT UP....
www.topfurtive.co.cc
SOLVED...GREAT WORK DONE...
www.topfurtive.co.cc
@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. :)
Thank you so much Mohammad!!!! It works very ok and im so happy for this man!! :)
@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
@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 :)
@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 :)
@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 :)
@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 :)
it will add on Top of the Blogger automatically ??
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/
Nice Post Ahemad Thank u ....And How to Keep Hide comment box like ur comment box ... Thank u
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.
Good post for Colorful tab.
Nizami bansri
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
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
Many thanks for your quick reply. It worked :)Brilliant menu.
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.
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
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/
Hey thank u very much for this:-)
my blog http://onlyfullsoft.blogspot.in/
realy helpful tips
sir how can i add click here to comment box like in your blog...
to my blog www.yomix.in
@Bhavesh Pamecha
How to add this without jQuery
@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.
but where is header logo??
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!
desculpa1
esqueci de escrever o nome de meu blog:
http://dicasdetemplates.blogspot.com.br/
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/
thnks for your info,,,
its working perfectly.....no hard work needed..thanks much be blessed
have a look on this example also
Jquery Tabs
Thanks http://www.mybloggertricks.com
to give this menu
My site: http://www.onsign.blogspot.com
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/
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
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!
Yes,mohamad is must update all javascript in the site and move other host!
no longer working sub menus are not displaying you can check out in your demo also . any help please.........
thankx in advance
Also this is only working in the google chrome!i hope mohamad will to fixed!
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.
thanks for responce, i hope u will do it
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
This coding is not run in my blog please help me..!
my blog is http://www.ccolumns.com
Please reply i am waiting...?
Thanks
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 :)
Thanks,mohamad for update!
Mohamad,today i check and add in the my blog,but again have problem,i sure!
plz fixed this issue!
Best Regard!
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
@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!
@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/
pl look in to the matter it's not working. drop down menu are collapsed.
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!!
Thanks alot for the update, i was really worried about it....
God Bless you...
Thanks :)
Hello Mohammad. Suddenly is not working buddy. Check out your demo to see what i mean.
Ignore my previous message man it works very fine now! :D Have a GREAT holiday break and keep it up!
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
Hi
The Code is not working For Me.I am Using it On IE.
Please Help.
http://www.facebook.com/downloadfreefullmovie
@Sear
o meu está!
i can't find ''body {''
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad