Haseeb.Net: search box

Expandable search boxes with Hover effect

Today i,m going to tell you that how to add expandable search box with or without hover effect. these search boxes are very beautiful and cool to use . These search boxes are made for wordpress site i,m sure you seen them on one of the wordpress blog but you can add them to blogger . It makes your blog more beautiful and creative it is user friendly and it does not have any effect on your blogs speed .

You can watch live demo of these search boxes in my demo blog

Now we are going to add this in blogger Follow my steps.

Steps

1. Goto your blogger account

2. goto page elements and add a gadget

3. select html/javascript and paste below code in it .

For search box with hover effect

<style>
#apple #search {

}

#apple #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HYSgZHvIWLEmso58qaBf1id4gsaL3gWYsto_ETb6LuXjBmrSl7XZ9qDQi-LcwSWztDVEpMhSJMiqcYuV2N8pMsu8aWfUOfBEGt9jw__ih3UuXrPv0dR5nBa2Ve3vCI9-FN3FDFnizL0/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#apple #search input[type="text"]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nlMf81GlYpMM89GUGLD8fL1OCGWuqh7IfdMfp-RYLRGBNuwxLf_VFVFRLoi0S-50RnxlJW5A7kk0xyDS_O5SJIoC7xzoYsWIlr70sVzRoSWnEoFRUE4PaN5HC31j087PP8m2Fs1kkFA/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For Search box without hover effect (white)

<style>
#white #search {

}

#white #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HYSgZHvIWLEmso58qaBf1id4gsaL3gWYsto_ETb6LuXjBmrSl7XZ9qDQi-LcwSWztDVEpMhSJMiqcYuV2N8pMsu8aWfUOfBEGt9jw__ih3UuXrPv0dR5nBa2Ve3vCI9-FN3FDFnizL0/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#white #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="white">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For search box without hover effect(dark)

<style>
#dark #search {

}

#dark #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nlMf81GlYpMM89GUGLD8fL1OCGWuqh7IfdMfp-RYLRGBNuwxLf_VFVFRLoi0S-50RnxlJW5A7kk0xyDS_O5SJIoC7xzoYsWIlr70sVzRoSWnEoFRUE4PaN5HC31j087PP8m2Fs1kkFA/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#dark #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="dark">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

NoW save It and its done
please share it with others thank you

Add menu with search box in blogger

Today i,m going to tell you that 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 .

You can also check my previous posts about menu's and search box.

Watch Demo of this menu in my demo blog so you can easily understand about this menu

Now Follow my steps to add menu with search box in you blog.

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. Atlast save it

Note : i did not create this menu i find it on internet and i think that it is useful for you So, i share it with you Thanks

Please share it with your friends

.

Monday, 7 January 2013

expandable search box like wordpress for blogger

Steps

For search box with hover effect

For Search box without hover effect (white)

For search box without hover effect(dark)

Sunday, 6 January 2013

beautiful menu for blogger with search box

Steps