Attractive Css Blend Style Menu Bar For Blogger : Blogger Widgets

Blogger Widgets :  Attractive Blend Style Menu Bar For Blogger

In This article i will show you How To Add Blend Style Menu Bar In your Blogger.

Click Here To See Demo 

Note : Before Making Any Changes Save Your Template For Backup

Step 1:- Log in to blogger.com And Go to Design >> Edit HTML    

Step 2:- Now Click Expand Widget Templates Check Box

Step 3:- Find </head > Tag  by using Ctrl+F.

Step 5:-  Finally Paste below code Before </head>.

<style>
*{padding:0; border:0; margin:0;} 
#default a,
#example a{
x;
height:46px
display:block;
width:90
p;
margin-right:3px;
float:left;
blogspot.com/-Yp_sc6XfCFA/UB-FjMu08rI/AAAAAAAABDo/vrZojjTdJxg/s1600/nav-sprite.png);
background-repeat:no-repeat;
cur
background-image:url(http://1.bp
.sor:pointer;
text-indent:-9999px;} 
#example_home{background-position:0 0;}
#example_home:hover,#example_home.hover{background-position:0 -48px;}
tion:-180px 0;}
#example_demo:hover,#exampl
#example_blog{background-position:-90px 0;}
#example_blog:hover,#example_blog.hover{background-position:-90px -48px;}
#example_demo{background-pos
ie_demo.hover{background-position:-180px -48px;}
#example_about{background-position:-270px 0;}
#example_about:hover,#example_about.hover{background-position:-270px -48px;}
0px 0;}
#example_contact:hover,#example_contact.
#example_services{background-position:-360px 0;}
#example_services:hover,#example_services.hover{background-position:-360px -48px;}
#example_contact{background-position:-4
5hover{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>

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

Step 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_about">About</
<a href="#" id="example_demo">Demo</a>
a>
</a>
</div></div>

Note :-  Replace # With your URL

Note :- Replace Name with as your like.

Step 7:- Now save your template