Stylish Menu Bar With Search Box For Blogger

Blogger Tips » blogger-tips-tricks , CSS , Menu-bar , Search Box » Stylish Menu Bar With Search Box For Blogger

Stylish Menu Bar With Search Box For Blogger

Posted by: .: Admin :. on 10:16 PM

0 comments

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...