Another CSS3 Attractive Menu Bar For Blogger

Oleh Unknown

6 Eylül 2012 Perşembe

Bagikan :

Tweet

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

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.

Tag : CSS, HTML, Menu bar