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/AVvXsEgBGdHGp1E0XHnVNX8iYLf16oJixLaeXF9lpq0fRa2-QxHPLFZ-_VYH-qvlYu-FRReoXv3MpRigGL8AwEAjXOJm0JqhR1b4Ou3eRG08PLe_utOF0vGBRYjFc5FC7RBMOHfwntT6gvrqFhZj/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/AVvXsEjUbXmS6Fx7haIKuLRZqJZAMxOe1Ayg-o9AjOa1RXi8495c8BQ1DeReV9VHwdZAeGF21lNiOjwCzf1P-_ByQY4alDu8yBle-yUZGsCPdoPXqOUa3MBBrzZXR6X58XqA_KCAqB_tPafqxT-s/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>