Stylish Menu Bar With Search Box For Blogger - Blogger tips | Blogger Tricks | Blogger Templates | SEO | Adsense Tips | Adsense Secrets

Stylish Menu Bar With Search Box For Blogger

This is a nice menubar for your blog.
But, it include with sear box. Its also
nice look and match for the menubar.
you can try it. its easy. check my earlier
search box and menubar below.

Menu bar collection
Search box collection


DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

#MenuBar{background:#333;display:block;font:18px;font-weight:400;height:32px;border-bottom:1px solid #ccc;min-width:960px;padding:5px 0}
#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px}
#Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none}
#Menu ul{height:30px;list-style:none;margin:0;padding:0}
#Menu li{height:30px;float:left;margin:0;padding:0}
#MSA{width:960px;margin:0 auto;}
#MSD{width:960px;}
#Menu{height:30px;width:700px;float:left;}
#SearchBox {height:35px;float:right;width:220px;}
#SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px}
#SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6.Paste below code.

<!--MenuBar Starts-->
<div id='MenuBar'>
<div id='MSA'>
<div id='MSD'>
<div id='Menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Write For Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='http://www.bloggertrix.com/'>Add This</a></li>
</ul>
</div>
<div id='SearchBox'>
<form action='/search' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/>
<input type='submit' value='Go'/>
</form>
</div>
</div>
</div>
</div>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...

Related Posts

***

0 comments

Comment form

© 2011-2012 Blogger Tips All rights reserved Powered by: Blogger Tips
back to top