Blogger'da Arama Kutusu Yapımı

Arama kutusu yapımı. Örnek hem burada hemde sitemde mevcut.

Css:

<style>
/* Search Box
================================================== */
#search-box {
 width:280px;
 height:29px;
 float:left;
 padding:4px 3px 3px 3px;
 border-radius:3px;
 box-shadow:inset 1px 2px 2px #000;
 border:#0b0b0b solid 1px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicaQS7f7k97z1N1ylq50m1kIyZXXPZigHh9Lfh_TKBbuiFF2RSvCiYxlhqBO15G4RdDpc8giMzPoHRiagJ0CwKvQSN_d38n4BDmJ1lIZrO61p7ixaEijWYUxlhMbtNA4hB_mzcHC3glb6H/s320/black.png);
}
#search-box input.bar{
 float:left;
 width:175px;
 height:24px;
 line-height:24px;
 border:none;
 padding:2px 10px;
 font-size:11px;
 background:transparent;
 box-shadow:none;
 color:#fff;
}
#search-box button{
 border:none;
 height:29px;
 font-size:11px;
 text-shadow:none;
 float:right;
 color:#fff !important;
 padding:0px 10px 0px 25px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKx4lQcTaUxYbdPPYqZLVRN493GYzK-3neifNHezclk9pcZg_0hAT06S0ici5xbTtxGyt4-F3sg4H7UokMBv5W03aJPvkv1yL3XGPAITkDKqGyLj_2cn5E7lqCr_Nj0SaUVaZRHJm1Gv6/s320/mag.png) no-repeat 7px 9px #2b2b2b;
}
</style>

Htlm

<div id='search-box'>
                               <form action='/search' id='searchform' method='get'>   
                                    <input class='bar' id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Arama...'/>
                                    <button class='backcolr' id='searchsubmit' name=''>Ara</button>
                                </form>
                            </div>