Thursday, September 6, 2012

Another CSS3 Attractive Menu Bar For Blogger

This is a simple menubar for your blog. Its not a bar. Buttons are keeping separately. But its looks great with nice hover style. So , you can add this  menu style within few steps. you can try. You can get Earlier menu bars from below link.
Menubar collection

css3+menu

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    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

nav{
 width: 960px;
 margin: 80px auto;
 text-align: center;
}
nav ul{
 margin: 0;
 padding: 0;
}
nav li{
 margin: 0 10px; /* Add some horizontal spacing */
 display: inline-block;
 *display: inline;  /* IE7 and below */
 zoom: 1;
}
nav a{
 display: inline-block;
 position: relative;
 padding: 8px 15px;
 border: 2px solid #fff;
 text-decoration: none;
 color: #999;
 font: bold 14px 'Lucida sans', Arial, Helvetica;
 background-color: #eaeaea;
 background-image: linear-gradient(top, #eaeaea, #fff);
 border-radius: 3px;
 box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
    0 0 1px 0 rgba(0, 0, 0, .2),
    0 2px 2px rgba(0, 0, 0, .3),
    0 10px 10px -5px rgba(0, 0, 0, .2);
}
nav a:hover{
 background-color: #eee;
 background-image: linear-gradient(top, #eee, #fff);  
} 
nav a:active{
        top: 1px; /* Simulate the push button effect */
 background: #f5f5f5;
 box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
    0 0 1px 0px rgba(0, 0, 0, .2),
    0 1px 2px rgba(0, 0, 0, .3);
}
nav a::before{
 content: '';
 position: absolute;
 top: -10px;
 right: -10px;
 bottom: -10px;
 left: -10px;
 z-index: -1;
 background-color: #e3e3e3;
 background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
 border-radius: 2px;
 box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;  
}

nav a:active::before{
 top: -11px; 
} 

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

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


<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Categories</a></li>
  <li><a href="#">About</a></li>    
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://www.bloggertrix.com/">Addthis</a></li>
 </ul>
</nav
* Tip:You can add it as  Gadget.
           Click Add Gadget and select 'HTML/Javascript' and paste above code..  

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

7. Now save your template
 you are done.

2 comments:

  1. i like this, the problem is I already have menu bar and what I want is to modify/change my existing menu bar (my blog is new). When I downloaded my template it already has menu bar. I think I need to erase the existing code but dunno which one to erase. Coz every time I try to put the above code it just wont fit. Can someone help me please I'm willing to share my blog account to let you do the changes. Thanks

    ReplyDelete