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.
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.
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
ReplyDeleteYour Blog URL?
Delete