Menu bar is also main thing of blog, because we can add main
category on there.Other thing is, you can add beautiful menu
bar for your blog to make your blog attractive. This is a cool
horizontal menu bar for your blogger. you can try it.
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
*Replace URL With your URL
*Replace Menu and sub menu with your any menu name
7. Now save your template
you are done.
category on there.Other thing is, you can add beautiful menu
bar for your blog to make your blog attractive. This is a cool
horizontal menu bar for your blogger. you can try it.
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
#NavbarMenu { width: 1000px; height: 35px; background:#cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HYeeQw0jpE3SaxsuzXZQN-WKlpOaT43KLnvB9LfYH26x5VM9eX3Jt9f8Nk1zBHIGLFnx1jJuHgsrUU_S5ULql18MjlVgUmW_Mxub5X30XQovvgWLyZP9aFAZ5kQLJbu6b-6qvbvHE4c/s1600/white+to+black.png) repeat-x top; color: #cdaa7d margin: 0 auto 0; padding: 0; font: normal 12px Arial, Tahoma, Verdana; border-top: 1px solid #855e42; border-bottom: 1px solid #855e42; margin-top:-45px; } #NavbarMenuleft { width: 1000px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ff0000; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: bold 12px Arial, Tahoma, Verdana; } #nav li a:hover, #nav li a:active { background:#ffffff; color: #8b5a00; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #cdaa7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HYeeQw0jpE3SaxsuzXZQN-WKlpOaT43KLnvB9LfYH26x5VM9eX3Jt9f8Nk1zBHIGLFnx1jJuHgsrUU_S5ULql18MjlVgUmW_Mxub5X30XQovvgWLyZP9aFAZ5kQLJbu6b-6qvbvHE4c/s1600/white+to+black.png) repeat-x top; width: 140px; color: #fff; text-transform: capitalize; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #855e42; border-left: 1px solid #855e42; border-right: 1px solid #855e42; font: normal 12px Arial, Tahoma, Verdana; } #nav li li a:hover, #nav li li a:active { background: #ffffff; color: #8b5a00; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='URL'>Menu 1</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> <li><a href='URL'>Sub Menu 4</a></li> <li><a href='URL'>Sub Menu 6</a></li> </ul> </li> <li><a href='URL'>Menu 2</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> <li><a href='URL'>Sub Menu 4</a></li> <li><a href='URL'>Sub Menu 6</a></li> </ul> </li> <li><a href='URL'>Menu 3</a> </li> <li><a href='URL'>Menu 4</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> <li><a href='URL'>Sub Menu 4</a></li> <li><a href='URL'>Sub Menu 6</a></li> </ul> </li> <li><a href='URL'> Menu 5</a> </li> <li><a href='URL'>Menu 6</a> </li> <li><a href='URL'>Menu 7</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> <li><a href='URL'>Sub Menu 4</a></li> <li><a href='URL'>Sub Menu 6</a></li> </ul> </li> </ul> </div> </div>
*Replace URL With your URL
*Replace Menu and sub menu with your any menu name
7. Now save your template
you are done.
thanks for your post. nice one
ReplyDeleteCool post man....could u post tutorial on "how to add tabs and add pages in blogger"
ReplyDeletegreat post. really helps for me.
ReplyDeleteplease add more style in dropdown?
ReplyDeleteand use the demo :)
cool. thanks man
ReplyDeletethanks http://tunesadda.blogspot.com
ReplyDeletei could not find fifth step
ReplyDelete@AbC
ReplyDeletelet me know your site address.
working nicely
ReplyDeletecheckout my blog
freshersjob11.blogspot.com
for new templates
don't search for
di v id='content-wrapper'
instead of this paste your coding after first
/b:section-code- /di v
see my blog how it is used.
Thanks a lot Bloggertrix
Hi, pls i wish to use this menu bar but cannot find the code in line 5 in my template, i am using the awesome template and my blog is www.100percentghdiva.blogspot.com pls help thanx
ReplyDeleteIf, anyone cant find the 5th code, you can try to add it as "HTML/Javascript" gadget.
ReplyDeleteOn dashboard select Layout
Click Add Gadget and select 'HTML/Javascript"
Paste 6th code. It will work as same...