Search Box For blog

Search Box

<div id="search">
<form method="get" id="searchform" name="searchform" action="http://www.google.com/search" target="_blank">
<input name="sitesearch" value="http://tutorial4us.com/" type="hidden" />
<input name="as_q" id="s" value="Search this site..." onfocus="if (this.value == &#39;Search this site...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Search this site...&#39;;}" type="text" />
<input value="FORID:11" name="cof" type="hidden" />
<input name="ie" value="ISO-8859-1" type="hidden" />
<input class="submit btn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYfY9xSJW3fX_Lp3HanVv-4izURH5UEAY4K5LwPvKETYCL9WvDKMYd_FvzBNTOIGKq9s5Fwtia7waa8IxTfiMY8QNHTkyzd-avCXUKp9thaQVMQ_DIIKYS7Exl-ize2gwjN5Zsl0MsuE/s15-no/icon-search.png" alt="Go" type="image" />
</form>
</div>

<style>

/*search fields*/

#search{ float:right;width:250px; height:35px; }

#search input.btn{

background:none;

border:none;

margin:9px 0px -4px -27px;

padding:0px;

width:auto;

}

#searchform #s {

width: 180px;

background: none repeat scroll 0% 0% rgb(238,238,238);

font: italic 105%/110% "Times New Roman", Times, serif;

color: #86856f;

padding: 3px 4px 3px 28px;

border: solid 1px #eee;

-webkit-border-radius: 13px;

-moz-border-radius: 13px;

border-radius: 13px;

-webkit-transition: .7s;

-moz-transition: .7s;

-o-transition: .7s;

transition: .7s;

}
#searchform #s:focus {
color: #000
//width: 210px;
background-color: #fff;
font-style: normal;
outline:none;
-moz-outline:none}
</style>

 Search Box

 

<form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Type Here & Press Enter !" />
<input id="submit" type="submit" value="Search" />
</form>
<p style="display:none;">Search Box by <a href="http://www.allbloggertricks.com">All Blogger Tricks</a></p>
<style>
#abt-css3-search{background:none;background-image:0;-moz-border-radius:6px;border-top-left-radius: 23px;border-top-right-radius: 3px;border-bottom-right-radius: 23px;border-bottom-left-radius: 3px;float: right;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-width:1px;padding:10px}

#search,#submit{float:left}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:#50B7DC;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:hover{background:#95d788;background-image:0}
#submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}
</style>

<form id="abt-css3-search" action="/search" method="get"> <input id="search" name="q" type="text" placeholder="Type Here & Press Enter !" /> <input id="submit" type="submit" value="Search" /> </form> <p style="display:none;">Search Box by <a href="http://www.allbloggertricks.com">All Blogger Tricks</a></p> <style> #abt-css3-search{background:none repeat scroll 0% 0% #AD64DA;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px} #search,#submit{float:left} #search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px} #submit{background:#6cbb6b;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0} #submit:hover{background:#95d788;background-image:0} #submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset} #submit::-moz-focus-inner{border:none} #search.placeholder{color:#9c9c9c!important;font-style:italic} #search:focus{background:#fff;outline:none;border-color:#8badb4} #search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic} </style>