Place Your Ads Here 460x68 ads

Cool CSS & JQuery Drop Down Menubar For Blogger

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 your 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(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.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(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.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='http://only4everyone.blogspot.com'>Menu 2</a>
<ul>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='http://only4everyone.blogspot.com'>Menu 3</a>
</li>
<li><a href='http://only4everyone.blogspot.com'>Menu 4</a>
<ul>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 6</a></li>
</ul>
</li>
<li><a href='http://only4everyone.blogspot.com'> Menu 5</a>
</li>
<li><a href='http://only4everyone.blogspot.com'>Menu 6</a>

</li>
<li><a href='http://only4everyone.blogspot.com'>Menu 7</a>
<ul>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://only4everyone.blogspot.com'>Sub Menu 6</a></li>
</ul>
</li>
</ul>
</div>
</div>


*Replace http://only4everyone.blogspot.com With your URL
*Replace Menu and sub menu with your any menu name

7. Now save your template
 you are done.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

loading...
Related Posts Plugin for WordPress, Blogger...