This tutorial will explain how to add cool drop down menubar for your blogger.Actually menubar is main thing of the blog.Because you can add main pages link with it, like contact us page,Privacy policy,Site-map, etc. So, you have to choose right menubar to your blog.Now i posted more quality menubars, you can add it as your like. Click below link to get all menubar tutorials.
Attractive menubar collection.
Demo
1. Log in to blogger account > Go to Design >> Page Element
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.
4. Save HTML/Javascript. you are done.
Attractive menubar collection.
Demo
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.
<script src='http://bloggertrix.googlecode.com/files/menu1.js' type='text/javascript'></script>
<style>
#menu *{
margin:0px; padding:0px; list-style-type:none; text-decoration:none}
div#menu{position:relative}
#menu ul.menu{ white-space:nowrap}#menu ul.menu li{ display:inline-block; height:57px; position:relative}#menu ul.menu li div{ position:absolute; top:55px; left:0px}#menu ul.menu li div div{ position:absolute; top:-6px; left:176px}#menu ul.menu li div ul li{ display:block; float:none; width:auto; height:auto}#menu ul.menu li a{ padding-left:15px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpGUaI7QiiaVBYHtCxZVvfzoQFGj4L06hrVT5Gvpyy9Y5JYYNBhC7b_ND8X2XyYBDjXmBnJDHSRHUmke5IwgpPWTiN8rJyZ8dLk9bUCUeTYGuv_BGUbxTXV6WALIUmtU9tMAUtvX8mVvK/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:left -1000px; display:inline-block; margin:6px 2px}#menu ul.menu li a span{ padding-right:15px; padding-left:0px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpGUaI7QiiaVBYHtCxZVvfzoQFGj4L06hrVT5Gvpyy9Y5JYYNBhC7b_ND8X2XyYBDjXmBnJDHSRHUmke5IwgpPWTiN8rJyZ8dLk9bUCUeTYGuv_BGUbxTXV6WALIUmtU9tMAUtvX8mVvK/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#menu ul.menu li:hover a{ background-position:left -90px}#menu ul.menu li:hover a span{ background-position:right -135px}#menu ul.menu li.active a{ background-position:left 0px}#menu ul.menu li.active a span{ background-position:right -45px}#menu ul.menu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#menu ul.menu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#menu ul.menu li div{ width:194px; padding-top:6px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZS1VSEs-b7d6NJUvVGDXko-X7CBgAohV0uwBgwU46ajmpiT-0ILhvC-jzgsPYD8cW6y9n3Nr4B4CIIQtci46KdTXBsSjtP5oEdDAn9kPwwMUqmRYhCjALCm_F3717u57xSkRJKRicdIT/s1600/submenu-top.png"); background-repeat:no-repeat; background-position:0px top}#menu ul.menu li div ul{ padding:9px; padding-top:0; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguaCqpVtq9B2H85kZq4zCaBz56lj7zhcQRd0QjkYiHfgWtUhtRYeADy-ot7uwNVNYpjbb6lXrV26Z2DDpC8F690fa5hLK9qlUvhY_4SsLp3n55ETaDvyBqu8ysjI6rlGL3Aydt-nqap3Am/s1600/submenu-bottom.png"); background-repeat:no-repeat; background-position:0px bottom}#menu ul.menu ul li:hover{ background-repeat:repeat-x; background-position:0% 100%; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_itIbb7poOvawF4srD2QygdDd82-P9wyv6shaov5QX7yHr4JwO7Zp80xrs4GxRupoAS59hVzaaZWxbtu-IhlfltXBYYKq3Ad1hUvToNHGnE5NjBC1i26IGTJwBeRSptXIn9OyuhNy2xD6/s1600/menu_level2_item_hover.png)}#menu ul.menu ul li:hover>a{ background-repeat:repeat-x; background-position:0% 0%; background-color:transparent; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_itIbb7poOvawF4srD2QygdDd82-P9wyv6shaov5QX7yHr4JwO7Zp80xrs4GxRupoAS59hVzaaZWxbtu-IhlfltXBYYKq3Ad1hUvToNHGnE5NjBC1i26IGTJwBeRSptXIn9OyuhNy2xD6/s1600/menu_level2_item_hover.png)}
#menu{ height:57px; padding-left:14px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTa3-oGdIWnN2e70ZQlX4llbn_x5o8dp4nzR97q5TKYbWPK1_LxE5RrCtV37jxkcHpR9dwPX-ThpHjniKnHGtpYq_LmVBFIE67RkP-TG3dhgFPMFp5dpzusj0ehhFUEgkpPbVLlAMIW0n/s1600/page_header_b.png) repeat-x;
-webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
#menu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#menu li:hover>a>span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#menu ul.menu li a span{ font-family:Arial; font-size:18px; font-weight:400}#menu ul.menu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#menu ul.menu li div ul{ padding-bottom:8px}#menu ul.menu li div ul li:first-child{ border-top-width:0px}#menu li>div{visibility:hidden}#menu li:hover>div{visibility:visible}/* */#menu ul.menu ul li:hover{ background-color:#393c45}#menu ul.menu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#menu ul.menu li{ *zoom:1; *display:inline}#menu ul.menu li a{ *zoom:1; *display:inline}#menu ul.menu li a span{ *zoom:1; *display:inline}#menu ul.menu li div ul li a{ *display:inline}#menu ul.menu ul li:hover{ *background-image:none}#menu ul.menu ul li:hover>a{ *background-image:none}/* IE6 */#menu ul.menu li a{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOO7w8-fgMOsqFqaXyu3Lh9e0vajmGODDlAeOrv9jWWiA7z5yNat1cDe2gZ_ho1RuEpQTHNWVoLyd406TJpk8CWcP4O__STUT0b1dDQ8Ug4tuXrFjqjNZDNmW-fFo4qedD23BS0cu-Lvh8/s1600/menu_level1_item.gif")}#menu ul.menu li a span{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOO7w8-fgMOsqFqaXyu3Lh9e0vajmGODDlAeOrv9jWWiA7z5yNat1cDe2gZ_ho1RuEpQTHNWVoLyd406TJpk8CWcP4O__STUT0b1dDQ8Ug4tuXrFjqjNZDNmW-fFo4qedD23BS0cu-Lvh8/s1600/menu_level1_item.gif")}#menu ul.menu li div{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Ch_Sphw5_ThLwQsnhCsgrpU56DMMhANdRg3u3sEL7DKuD_-1kuVYyfbxJEjA272-oksYIaEIqNBmNZ86XWoEQlXj7e6GUY45GoQAH6Gguarft-tQZB9YfMs2d73DE5dXtDkJNwJ9I9XD/s1600/submenu-top.gif");z-index:10}#menu ul.menu li div ul{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1hUDrEaBAbK8cY4-mlsLc5ussRJ5eteKAoPMa0ztj8NJUyz769FH4cmbaVngrPkx7eUovjrP8E7bXk8MuBjtj84DlBzLZCavdGFm20Q3U5sXnp6xG9gpmX31fUW9cVwcADYtKkE9U_WC/s1600/submenu-bottom.gif")}#menu ul.menu li a:hover{ _background-position:left -90px}#menu ul.menu li a:hover span{ _background-position:right -135px}#menu div{_display:none}#menu div li:hover div{_display:block}#menu div li:hover li:hover div{_display:block}#menu div li:hover li:hover li:hover div{_display:block}/* */
</style>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>LINK 1</span></a>
</li>
<li><a href="#" class="parent"><span>LINK 2</span></a>
<div><ul>
<li><a href="#" class="parent"><span>ITEM 1</span></a>
<div><ul>
<li><a href="#"><span>ITEM 1.1</span></a>
<div><ul>
<li><a href="#"><span>ITEM 1.1.1</span></a></li>
<li><a href="#"><span>ITEM 1.1.2</span></a></li>
<li><a href="#"><span>ITEM 1.1.3</span></a></li>
<li><a href="#"><span>ITEM 1.1.4</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>ITEM 1.2</span></a></li> <li><a href="#"><span>ITEM 1.3</span></a></li>
<li><a href="#"><span>ITEM 1.4</span></a></li>
<li><a href="#"><span>ITEM 1.5</span></a></li>
<li><a href="#"><span>ITEM 1.6</span></a></li>
<li><a href="#"><span>ITEM 1.7</span></a></li>
<li><a href="#"><span>ITEM 1.8</span></a></li>
<li><a href="#"><span>ITEM 1.9</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>ITEM 2</span></a>
</li>
<li><a href="#" class="parent"><span>ITEM 3</span></a>
</li>
<li><a href="#" class="parent"><span>ITEM 4</span></a>
</li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>LINK 3</span></a></li>
<li><a href="#" class="parent"><span>LINK 4</span></a></li>
<li><a href="#"><span>LINK 5</span>
<li class="last"><a href="#"><span>LINK 6</span></a></li>
<li class="last"><a href="#"><span>LINK 7</span></a></li></a></li>
<li class="last"><a href="http://www.bloggertrix.com/"><span>Addthis</span></a></li>
</ul>
</div>
4. Save HTML/Javascript. you are done.
Your blog is the best in the template menu.
ReplyDeleteThank u so much....
thank you it helped me a lot
ReplyDeletety so much, i need it, happy nice day
ReplyDeleteThanks, tricks on your blog really helped me
ReplyDeletewhen i click on Link 2, then list of items is not appearing. is there any error in code?
ReplyDeleteContact me, I will help you.
DeleteSuggest Me Good Template Like You Apply Here ! Easy Loading & With Drop Down Menu :)
ReplyDeleteFantastic Menu bar for blogger. Thanks for the Great Post.
ReplyDeleteI liked all menu bar widgets, which you have shared on your blog.
ReplyDeleteThanks a lot...
Hey thanks for such a nice share
ReplyDeleteThanks a lot
Organic SEO company UK
thenx bro.
ReplyDeletei am use it in technozodiac.blogspot.com
I don't see 'add gadget' in the page element. Do guide me. :-)
ReplyDeleteHelen
http://myworldmyhome2012.blogspot.in
Actually its for old interface.
DeleteJust go to layout, then you can see the add gadgets..
Hi,
ReplyDeleteI tried to apply this menu bar in the below mentioned blog.
Earlier it was working, but now its not showing the menu bar as expected.
Any reason ? Please guide me, thanks in advance.
http://perlexamples.blogspot.com/
Tutorial was simple and easy to follow. Great straight forward post. thanks
ReplyDeletehi friend
ReplyDeleteGOOD Morning
Ur post is nice, i need ur help i have problem with this template the sub-menu is hidden what i have to do please clarify asap thank u friend
My mail- 19kkarthik@gmail.com
check my blog kaviindia.com
check your inbox.
DeleteI liked your post. Wanted to implement it on my blogger blog: http://www.kolkatarestaurants.net
ReplyDeleteThe problems I am having are:
1) the sub-menu is hidden
2) my main menu items are in large font size, it becomes two rows and hence the display is becoming faulty.
Please Help me.
Contact me via contact us page.
DeleteI will help you...
Awesome Drop Down Menu. i like it.
ReplyDeleteThank you for this helpful post bro! Indeed it's very interesting. :)
ReplyDeleteit won't work anymore..
ReplyDeleteIts working well.
Deletenice menu.......thanks for Sharing
ReplyDeletekeep sharing such wonderful widgets
OEWAYS
Nice menu thnx Bro
ReplyDelete