11 Aralık 2011 Pazar

Blogunuz İçin 2 Farklı Stilde Arama Kutusu

14 yorum

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://lh5.googleusercontent.com/-SPyjXLt8ZbE/Tsec3sO757I/AAAAAAAABao/Cfzj_ewXAWI/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://lh4.googleusercontent.com/-Ctxe-wHYLb0/TseeOlH6wrI/AAAAAAAABaw/AeUH1U9NRbQ/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>

14 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
  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. Hızır hocam arka rengi siyah yerine başka renk ile değiştirmek istiyorum.Nasıl yapabilirim? Teşekkürler....

    YanıtlaSil

Picardes

LİNKLER