Attractive Slate CSS Menu Menu Bar For Blogger

Earlier i posted about more menubars. Actually This is also great menu bar, This include 4 colors.
and nice hover style. Few days ago i posted about Stylish CSS3 Lavalamp Menu Bar For Blogger
With jQuery.Its also look like similar.But this not include jquery.you can add it as your like. Follow
these step well to add to your blog. Menubar Collection

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

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

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQjm31QDVNAR9IeLpkVMWdZ3oFTSLtS4b36tkzs9mfAkfJtg07lmrTCsYfhBbR_4uxYDqsj_c881C_pgKmvsh2OdC4fEuqeM7cLlZ0ml_-lwYcd0DjAVxATMSCv9tkbWSGuHZSnfQtXU/s1600/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnUAGF2EmSOILxuaBrLcztusF5t8q3H51lOsKpP0rsHzLpPTtTZ13WBXmg_57hNTntQoDdYf0ilrC8pq59QU7zHcvWdKm4SQv7IaP3eN8_SEyVLc1carvlgyH9ZG3ESairEuaYpqJriI/s1600/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */

/* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGCFJXRotgToQ3YZUgDefFiLiQAm_4kbKfamdhB1kqIWozNrhJS1S-gi2QKqFHsPrgXMfRbpY1moR-zeYixI3hm7Ro_Kx9wN5YDKwv6rNGpwppd0UTHP51DPfRwC2D0e4UHjqYw5Il70/s1600/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbE9DTNnqdvQkFqtnZc0IlMR2Hv5J4hygGI2KBUVixwNPYNDDISzwc5skBhyphenhyphenOUTBENTRDqrkHwrrENgb7YUE1Xsv9YGEoAQvO1K1qvaxzns9r8fSpZFI4NRoEL_xkIBpv8XYcocoZnQk8/s1600/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */

/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7I4-75dffha3HiaisMSob1Vr8YpT8_6hKtLoVUrVU7DeVO1nYkSwIJZ5xHB15f0Zni2iBs7ChmfziHiHH-CQ-aK9zMzEQBBabLW3mCicvWgEx0xBGuj4dCUWNL86zv5tOrB18vIIJvkU/s1600/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4txM_p8EnFXGOekNQ5fz46RSppD3GigTWxewNNRcbxwtnZt8VKZuyQP7D67bra5vOX-YQCEvUxMdXj-SKH6VgsuWoQ5Y8OqdaIOQORIN27AW88FwQoydWKXpXNHHNakrTtvwfEERklS8/s1600/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */

/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsucOfmcp2WXLsqpP_9FP83MJJFS8tqKSebll-f25qQO1i8EVDZC5OLxsSKRS-iz_oVQlDFfHQyERayhvtN9ojWMkAQWYIwqXC8UsRINwpdlK1RxP37Ma20pHAvyXUlpBjyXYwWSw0J-0/s1600/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMfQwtQHJSAcZRc3M2GkhwBk4hKcMCPlSgK7mT9jd9wh46q9F4WBHTkE2AO982cv35TPiitaO3T5ww4Or3x55p6by1YRG5hf7d6DrpGerZEKoxusb8qinjHDeGWpDoMelj-q6mdjdgjk/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */

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

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

<div class="blue">
 <div id="slatenav">
 <ul>
 <li><a href="http://www.bloggertrix.com/" title="css menus" class="current">Home</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">About Us</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Services</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Our Work</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Contact Us</a></li>
 <li><a href="http://www.bloggertrix.com/" title="css menus">Add This</a></li>
 </ul>
 </div>
 </div>