Stylish CSS3 Navigation Menu Bar For Blogger

Some Css bars looks more great.So this menubar also nice style with hover too. You can add to your blog and make it attractive.You can do it with easy steps. Follow these steps to add it your blog.
Menubar collection

DEMO

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

nav1  {
 display: block;
 width: 100%;
 overflow: hidden;
}

nav1 ul {
 margin: 80px 0 20px 0;
 padding: .7em;
 float: left;
 list-style: none;
 background: #444;
 background: rgba(0,0,0,.2);
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 border-radius: .5em;    
 -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}

nav1 li {
 float:left;
}

nav1 a {
 float:left;
 padding: .8em 1.5em;
 text-decoration: none;
 color: #555;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-width: 1px;
 border-style: solid;
 border-color: #fff #ccc #999 #eee;
 background: #c1c1c1;
 background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
 background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
 background: -o-linear-gradient(#f5f5f5, #c1c1c1);
 background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
 background: linear-gradient(#f5f5f5, #c1c1c1);            
 }
 
nav1 a:hover, nav a:focus {
 outline: 0;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0,0,0,.2);
 background: #fac754;
 background: -moz-linear-gradient(#fac754, #f8ac00);
 background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
 background: -webkit-linear-gradient(#fac754, #f8ac00);
 background: -o-linear-gradient(#fac754, #f8ac00);
 background: -ms-linear-gradient(#fac754, #f8ac00);
 background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
 -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
nav1 li:first-child a {
 border-left: 0;
 -moz-border-radius: 4px 0 0 4px;
 -webkit-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;            
}

nav1 li:last-child a {
 border-right: 0;
 -moz-border-radius: 0 4px 4px 0;
 -webkit-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;            
}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<nav1>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Categories</a></li>
        <li><a href="">About</a></li>    
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="http://www.bloggertrix.com/">Addthis</a></li>
    </ul>
</nav1>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.