Css Blend Style Menu Bar For Blogger

Oleh Unknown

6 Ağustos 2012 Pazartesi

Bagikan :

Tweet

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/AVvXsEjFDgYOhsfnVKu0rXGxt3M6Rs7muXDP_rCJuAJ-23jjLanb6okXWGsQBBthiL8794qpa1mm79SytOw05vD3iZmpXsx8zmRRD4JXnOH4gE6NFYUt-ID3bpVPNzHGnN-HUAjD0-JU-fahFvs/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.

Tag : CSS, HTML, Java Script, JQuery