Blogunuz İçin 2 Farklı Stilde Arama Kutusu

Yeni bir Blogger teması üzerinde çalışıyorum.Bu temada şık ve farklı bir stilde arama kutusu kullanmak istedim ve internette ufak bir araştırma yaptım.Arama kutusu stilleri araştırırken Design3Edge sitesinde bir psd paketine rastladım.Bunlardan iksi hoşuma gitti ve burada da paylaşmak istedim.

Resimde gördüğünüz stillerdeki arama kutularına ait kodlar aşağıda mevcut.Hangi stildeki arama kutusu kullanmak istiyorsanız o kodu HTML/JavaScript gadget’ı olarak blogunuza eklemeniz yeterli.

Blogunuz İçin 2 Farklı Stilde Arama Kutusu

1.Stildeki arama kutusunun kodları:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz33-bifcNTf60hdofr1aQ8ZGImisX2S9n-2tHVPSrmcq6hsqdDmCB4W0s3vTo4ZCu1d1eOIWNuRrUEPEH4_T3KY_TPT5LiZaYlKvQLqvqqASmivGtAHg-Yx_JWVQP6HQiRvTyMoUzsfGf/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/AVvXsEgqgJZsaVMKwQ5LNWhTklNfiuO3r5ukQSKZGM0lu6HGuwkTtwwu5SBQTjODKLVvAmFJlunM1tZHUTd10Zib072ufVbFWPkd3Q731Exk9NYTSIYN47EadgMxWRQ7fUOd8xYNRkNEmnuPaSvS/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>

19 yorum:

  1. tşk üsdat çok güzel paylaşım...

    YanıtlaSil
  2. yine yeni yeniden yararlı bir paylaşım serdar abi :)..

    Teşekkürler

    YanıtlaSil
  3. çubugu yaptımda aramıyo hiç bişi

    YanıtlaSil
  4. sizin arama kutusunu paylaştınızmı acaba hiç?

    YanıtlaSil
  5. @hayatdevamediyorizle
    Hayır ama isteyen olursa paylaşırım elbette.

    YanıtlaSil
  6. Sizin yaptığınız ve kullandığınız arama kutusunun arka plani turuncu deilde her renge uyum sağlayabilen png tarzı şekilde paylaşabilirmisiniz.Googleden arama kutusu die arşatırdmda hep aynı tür şeyler var.

    YanıtlaSil
  7. Acaba wordpress de kullanılabilir mi?
    Nasıl kullanılabilir?

    YanıtlaSil
  8. kutunun üstte ve sagda olması lazım ama saga götüremiyorum kodun içinde right felan yazan yerden yok kendim mi eklemem lazım

    YanıtlaSil
    Yanıtlar
    1. Table içine alıp istediğin yere koyabilirsiniz

      Sil
  9. Paylaşım için teşekkürler. Bu eklentiler hangi programda yapılıyor acaba bilginiz varmı.

    YanıtlaSil
  10. @deniz cem mutlu
    Blogger eklentileri programla değil, kod yazarak yapılır.

    YanıtlaSil
  11. Teşekkür ederim.

    YanıtlaSil
  12. Hızır hocam arka rengi siyah yerine başka renk ile değiştirmek istiyorum.Nasıl yapabilirim? Teşekkürler....

    YanıtlaSil
    Yanıtlar
    1. Kodları yanlış okumadiysam böyle birşeyi yapmak için kodda url si verilen resmi degistirmelisoniz çünkü arkaplan renk değil resim ile yapılmış

      Sil
  13. Sağolun tek çalışan kod bu oldu

    YanıtlaSil
  14. yalnız hiçbir şey aramıyor

    YanıtlaSil
  15. Merhaba çalışan bir iletişim formu ekleyebilir misiniz ?
    bloggerde iletişim sayfasına koymak için bana lazımdır .
    Eğer sizde varsa kod , kodu şu gmailime yollar mısınız ? Çok Acillll ....
    Gmailim => a.kadirkaya111@gmail.com .
    Saygılarımla Kadir Kaya :D

    YanıtlaSil

Blogger tarafından desteklenmektedir.