Css Blend Style Menu Bar For Blogger

This is also nice hover style menubar, Its color like blend style. This menubar not include drop down feature,But this will more attractive for dark color blogger templates.Earlier also i  posted about css menubar its also similar to this. Attractive Css Drop Down Menu Bar For Blogger

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    </head>

4. Paste below code Before </head> tag

<style>
*{padding:0; border:0; margin:0;} 
#default a,
#example a{
display:block;
width:90px;
height:46px;
margin-right:3px;
float:left;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBDwNt39DWaWh7LEba8OdCS-hQVrWt3qvK-_z7nIkat7ftc74bvgzmQJoTdxFtPCCRgbXIQcQMpufVE9ZZB1u4TWrSQFyaPp-mCiUWLVuxZTX5uTAulgoZByT0ITYIKh65mQeaJqfMp4/s1600/nav-sprite.png);
background-repeat:no-repeat;
cursor:pointer;
text-indent:-9999px;} 
#example_home{background-position:0 0;}
#example_home:hover,#example_home.hover{background-position:0 -48px;}
#example_blog{background-position:-90px 0;}
#example_blog:hover,#example_blog.hover{background-position:-90px -48px;}
#example_demo{background-position:-180px 0;}
#example_demo:hover,#example_demo.hover{background-position:-180px -48px;}
#example_about{background-position:-270px 0;}
#example_about:hover,#example_about.hover{background-position:-270px -48px;}
#example_services{background-position:-360px 0;}
#example_services:hover,#example_services.hover{background-position:-360px -48px;}
#example_contact{background-position:-450px 0;}
#example_contact:hover,#example_contact.hover{background-position:-450px -48px;}
   
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
  <script src='jquery.blend.js'/>
  <script>
   $(document).ready(function(){
    $(&quot;#example a&quot;).blend();
    $(&quot;#example2 a&quot;).blend();
   });
  </script>

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='demo'>
<div id="example">
<a href="#" id="example_home">Home</a>
<a href="#" id="example_blog">Blog</a>
<a href="#" id="example_demo">Demo</a>
<a href="#" id="example_about">About</a>
<a href="#" id="example_services">Services</a>
<a href="http://www.bloggertrix.com/" id="example_contact">Add This</a>
</div></div>

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

7. Now save your template
 you are done.