Membuat Kotak Pencarian Blog Sederhana

Kotak pencarian atau search box menurut gue sangat diperlukan keberadaannya di sebuah site? Selain untuk mencari konten yang dicari juga untuk memperindah aksesoris atribut aturan maen yang cantik :D Koben kembali akan berbagi cara membuat kotak pencarian sederhana namun tetap full stylish :mrgreen:
DEMO...

Kode CSS

#search {
border: 1px solid #CCC;
background: #FFF;
height: 30px;
text-align: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#s {
color: #999;
border: 0;
padding: 4px;
margin: 3px 0 0 0;
float: left;
width: 93% !important;
}
.search-image {
border :0;
vertical-align: top;
float: right;
margin: 6px 8px 0 0;
}

Markup HTML

<div id='search'>
<form action='http://YOUR-BLOG.blogspot.com/search' method='get'>
<input id='s' name='q' type='text' placeholder='Search...'/>
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFUjrL_GuVjrsJIjSkyRqu5lEFGJ99ZjVgDyUUya-tNjE69Fuau7RCfWRswjHf96qurgq9pGWjS1EkYcWU_sP_QLgopBODCEwMAS1czVSLMN-DEIKdojQjWM5PV8LcIblAHXSd8sd0cWu/' alt='Search' type='image'/>
</form>
</div>