Place Your Ads Here 460x68 ads

How To Add Cool Horizontal CSS Menu Bar For Blogger

This is nice menu bar to your blog,add it to your blog.


Demo here

1. Log in to your blogger account and Go to Design >>page Element

2.Click Add gadget and Select 'HTML/JavaScript'  

3. Now paste paste below code

<style>
#nav1 {
 margin: 0;
 padding: 6px 7px 0;
 height:37px;
 background: #7d7d7d url(http://4.bp.blogspot.com/-_i1yn5hxsz0/Tf8XoLEGesI/AAAAAAAAAhA/2zI_yCncnao/s320/image1.png) repeat-x 0 -110px;
 line-height: 100%;
 border-radius: 3em;
 -webkit-border-radius: 3em;
 -moz-border-radius: 3em;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}

/* main level link */
#nav1 a {
 font-weight: bold;
 color: #000000;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;
 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;
 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
 background: #000;
 color: #fff;
}
/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
 background: #666 url(http://4.bp.blogspot.com/-mJGtQvkk0uo/Tf8YeUI5bQI/AAAAAAAAAhI/_fmQ6Z3y234/s320/image1.png) repeat-x 0 -40px;
 color: #444;
 border-top: solid 1px #f8f8f8;
 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);
 text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav1 ul a:hover {
 background: #0078ff url(http://4.bp.blogspot.com/-mJGtQvkk0uo/Tf8YeUI5bQI/AAAAAAAAAhI/_fmQ6Z3y234/s320/image1.png) repeat-x 0 -100px !important;
 color: #fff !important;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav1 li:hover > ul {
 display: block;
}
/* level 2 list */
#nav1 ul {
 display: none;
 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 35px;
 left: 0;
 background: #ddd url(http://4.bp.blogspot.com/-_i1yn5hxsz0/Tf8XoLEGesI/AAAAAAAAAhA/2zI_yCncnao/s320/image1.png) repeat-x 0 0;
 border: solid 1px #b4b4b4;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
 float: none;
 margin: 0;
 padding: 0;
}
#nav1 ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 font-weight: bold;
 color: #000000;
}
/* level 3+ list */
#nav1 ul ul {
 left: 181px;
 top: -3px;
}
/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;
 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;
 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav1:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#nav1 {
 display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="3">level1</a>
<ul>
<li><a href="http://only4everyone.blogspot.com">Link 1</a></li>
<li><a href="http://only4everyone.blogspot.com">Link 2</a></li>
<li><a href="http://only4everyone.blogspot.com">Link 3</a></li>
<li><a href="http://only4everyone.blogspot.com">Link 4</a></li>
</ul>
</li>
<li><a href="http://only4everyone.blogspot.com">Multi-Levels</a>
<ul>
<li><a href="http://only4everyone.blogspot.com">Link 1</a></li>
<li><a href="http://only4everyone.blogspot.com">Link 2</a></li>
<li><a href="http://only4everyone.blogspot.com">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="http://only4everyone.blogspot.com">Link</a></li>
<li><a href="http://only4everyone.blogspot.com">Link</a></li>
</ul>


* Replace with http://only4everyone.blogspot.com your links.
* Replace with  link  your names.

4. Now save 'HTML/JavaScript'.  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...