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
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
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.
Read More
Menubar collection
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.
