Search Box for Blogger

This Search box is useful to search all data on your site.

Feature

Eye catching
Light weight
Fast loading
Awesome look
Search all data for that site

<style>
#search
{
float:right;
width:220px; // width of search box
height:15px; // height of search box
margin-top:5px;
}

#search input[type="text"]
{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6xlxX5RrSpggyiek5AV4TRdKVgGnwAXwpIYt9VMtyHemZaEO6EL1YDeE1EzKMqVJY1rkQluDevJ54i8gwA92CaVr7UMYY8BQT2B5ecyjQ5bxIbhpjm9xdJOdaIeYQLIhc4tW6N7O2BiR/s1600/icon-search.png") no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font-family: Georgia,Helvetica,sans-serif;
font-size:11px;
color: #000;
width: 166px;
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 1.7s ease 0s;
}

#search input[type="text"]:focus
{
width: 300px; // Hover width for search box
}
</style>

<div id="search">
<form method="get" id="search" name="searchform" action="http://www.google.com/search" target="_blank">
<input name="sitesearch" value="www.sites18.com" type="hidden" />
<input name="q" id="search" value="Search on sites18..." onfocus="if (this.value == 'Search on sites18...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search on sites18...';}" type="text" />
</form>
</div>