Artık kendimi biraz daha fazla vericem tasarımlara ve bunların bir kısmını sizlerlerle paylaşmayı düşüyorum. Bu arama kutusunun tasarım aşaması ve kodlama aşaması tamamen bana aittir. Ordan burdan alıntı yoktur.

Arama kutusu ie9, ie8, chrome, mozilla 3.6.18 gibi tarayıcılarda sorunsuz çalışmaktadır. XHTML ve CSS validator‘larda kontrol edilmiştir bir sorun yoktur.

Arama kutusunun Demo‘su için tıklayın.

-Bu resmi kaydedin images klasörü oluşturun yada varsa içine atın.

CSS Kodlarımız:

.arama{
background-image: url(images/ara.png);
width:320px;
height:50px;
}
#arama input {
width: 242px;
height: 38px;
border: none;
font: normal 21px Verdana;
color:#b1b0ae;
padding-left:15px;
margin-top:5px;
border:0;
outline:none;
background:none;}

.gonder{
cursor:pointer;
background:none;
height:34px;
width:53px;
border:none;
}

-Bu kodları CSS dosyanızın sonuna yapıştırın.

Sıra geldi form‘u oluşturmaya:

<div class="arama" id="arama"> <form action="#" method="get"> <input type="text" name="s" id="s" value="Kelimeyi yazınız..." onfocus="if (this.value == 'Kelimeyi yazınız...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Kelimeyi yazınız...';}" title="Kelimeyi yazınız" /> <button class="gonder" type="submit"></button> </form> </div>

-Bu koduda gereken yerleri düzenledikten sonra istediğiniz yere yapıştırınız. Eğer bunları yapmakla uğraşamam derseniz.

Burdan dosyayı indirebilirsiniz.