Blogger Arama Kutusu Eklemek

     Geçen gün blog hocamda dolaşırken gözüme bir konu çarptı ve okumaya başladım.  Blogger Arama Kutuları ile ilgiliydi.. Arama Kutularının tasarımı gerçekten hoşuma gitmişti ve bende bunları burada sizinle paylaşmak istedim....

    Ayrıca buradan Blog Hocam ailesine selamlar. Sürekli onları takip ediyorum ve takip etmenizi de şiddetle tavsiye ediyorum...

     Gerçekten çok etkileyici ve 2 türde beğeneceğinizden eminim....

 

1.Stildeki arama kutusunun kodları:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLr34ag_lUPgZjPCso5LfvszACGrW0D8DoIOM_gYwMSDKbjNgGmrNYWf0qJZQjgQEiEudu48V2FvKy5trLW5ivBWIz-nW_ztrrIAkuyyW385jR74-NNPPMaZEMtkCKF9voD8qE9S408En/s307/arama-kutusu-psd1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Ara..." onfocus='if (this.value == "Ara...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Ara...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

2.Stildeki arama kutusunun kodları:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYHmE_wa6mZKbaZuIUjq8NoI7XYymJLPPxbwvj553gOwXBYxFMPGKjaQTCiBuqWAb7hhpbs6jICNpD9dO18rUPelkuYhw2DCo8ChOdDKmDk1ZLicPhhN_p-TSDo0f8bwQdwVL4sta4nhgS/s307/arama-kutusu-psd2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>