10:11
0


How to add beautiful simple menu in blogger with a beautiful search box. This menu create a better impression on your reader and it make ease to search any thing in your blog.the menu look very simple and search box is looking very beautiful in it .

Like it,  Menu + Search box

STEPS
1. Goto your blogger dashboard 
2. Now click on Edit html and Find  ]]></b:skin>
3. Now paste the below code just above  ]]></b:skin>
#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. Now save the template 
5. Now goto page layout  and add a gadget 
6. Select html/JavaScript  and paste below code in it 
<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.haseebnet.blogspot.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--!>
7. Save it.

0 comments:

Post a Comment

Adz