Color Navigation Menu For Blogger

Its awesome navigation menu made by me,Its hard to design it but after designing it make happy because hover effect in this navigation menu is awesome.It is having three effect hover,release,mouse-over.So if you want to add this awesome navigation menu to blogger then follow below steps-

Demo

Installing It To Blogger

To Add this navigation menu to blogger just copt the below code and paste it in Html/Javascript and save it.

<style>
#menu {
width: 1020px; height: 73px; padding: 16px 0 0 0; margin: 0 auto;
background: url(http://images2.layoutsparks.com/1/207676/vampire-freaks-dark-black.jpg);
}
#menu li {
list-style: none; float: left; margin: 0 12px;
}
#menu li:first-child {
margin-left: 19px;
}
#menu li a {
display: block; width: 176px; height: 37px; padding: 20px 0 0 0;
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Auto_Racing_Red.svg/800px-Auto_Racing_Red.svg.png) top no-repeat;
font: bold 18px Helvetica, Arial, Sans-serif; text-shadow: 0 -1px #1d1d1d;
color: #767676; text-align: center; text-decoration: none;
}
#menu li a:hover, #menu li a:focus {
color: #dcdcdc;
}
#menu li a:active {
background: url(http://www.iphoneretinawallpapers.com/images/fullsize/00028.jpg) bottom no-repeat;
color: #767676;
</style>
<ul id="menu">
<li><a href="####">Home</a></li>
<li><a href="####">About</a></li>
<li><a href="####">Contact</a></li>
        <li><a href="####">Blogger Templates</a></li>
<li><a href="####">Lord HTML</a></li>
</ul>

Customize

Now We need to add make it according to your style if you want to increase or decrease width then manually edit it i highlighted it with red color.

Replace #### with any link.

Comment is best way to say thanks....:)