Uğur Dalkıran

İçerik bakımından zengin olan websitelerinde en önemli kısım arama kutularıdır. Ziyaretçiler arama yaparak istedikleri içeriğe daha kolay ve daha hızlı bir şekilde ulaşabilirler. Arama kutuları bu yönden ziyaretçilerin hoşuna gider. (: Arama kutuları genellikle websitelerinin menü kısmının sağında veya hemen yan kısmın en üstünde bulunurlar. Ziyaretçiler bu alanlara alıştıktan sonra istedikleri arama sonucuna daha kolay bir şekilde ulaşırlar. Arama kutularımızı ziyaretçilerimize daha şık ve kendimize özel bir şekilde sunarak ziyaretçilerimizin ilgisini daha da çok çekebiliriz.

Basit Bir Arama Kutusu Oluşturmak

Öncelikle HTML kodlarımız şu şekilde olacaktır:

<div id="aramaFormu">
	<form action="" method="get">
		<input type="text" name="aranan" />
		<button type="submit">Ara</button>
	</form>
</div>

Böylelikle tüm işlemi sadece aramaFormu sınıfının içerisine alıyoruz. Bu kodları eklediğimiz zaman karşımıza çıkan ekran görüntüsü şu sekilde olacaktır:

Klasik bir arama formu

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">

Arama Kutusunu Özelleştirmek

Bu kısım için ister 2 adet resim ister tek bir resim üzerinden arama kutusunu oluşturabiliriz. Büyük ve tek bir resim üzerinden arama kutusunu oluşturmaya başlıyorum.

Özel bir arama formu

Yukarıdaki resim üzerine tanımlayacağım bir arama formu; input ve button stillerini taşımaları açısından style.css dosyamı oluşturmaya başlıyorum.
CSS Kodlarımız:

#aramaFormu{
	width:437px;       /*Büyük ve tek olan resmimin genişliği*/
	height:35px;       /*Büyük ve tek olan resmimin yüksekliği*/
	overflow:hidden;
	background-image:url(arama-formu-ozel.png);
}
#aramaFormu input{
	width:305px;        /*Arama yazısı yazılacak alanın genişliği*/
	height:19px;        /*Arama yazısı yazılacak alanın yüksekliği*/
	margin-left:40px;
	margin-top:7px;
	float:left;
	border:none;        /*Klasik arama formundaki border'ı kapatma*/
	background-color:transparent;            /*Açıklaması aşağıda #1#*/
	font-size:14px;
	font-family:Calibri, Tahoma, Arial, Sans-Serif;
	outline:none;                            /*Açıklaması aşağıda #2#*/
	color:#000;
}
#aramaFormu button{
	width:82px;
	height:35px;
	float:right;
	text-indent:-9999px;
	border:none;
	background-color:transparent;
	cursor:pointer;                        /*Açıklaması aşağıda #3#*/
}

background-color:transparent;

Bu kod dizilimini background-color:#000099; şu şekilde değiştirdiğim zaman karşıma aşağıdaki gibi yeni bir resim çıkıyor. (:

Background kodunu değiştirdiğim zaman

Klasik arama formunda arkaplan değeri otomatik olarak beyaz tanımlandığından, arkaplan değerini background-color:transparent; olarak değştiriyorum.

outline:none;

Yukarıdaki gibi bir anlatım oluşturursak; bu kod dizilimini tamamen CSS dosyamdan siliyorum. Sildikten sonraki görünümüm:

outline:none; kodunu sildiğim zaman

outline:none; kodu, arama kutusunun üzerine tıklandığı zaman, arama kutusu etrafında oluşan çizgileri kaldırmaya yaradığını resim üzerinden görebilirsiniz. (:

cursor:pointer;

button stiline bir link atamadık fakat, bir link gibi çalışmasını istediğimizden dolayı, “Ara” yazısının üzerine gelindiği zaman fare imlecim normal görünümünden, cursor görünümüne geçmesini istediğim için bu kod diziliminide CSS dosyama ekliyorum.

En son olarak arama kutusu üzerindeki yazıyı arama yaptıktan sonrada görünmesi için HTML kod düzenimi tekrar şu şekilde değiştiriyorum.

<div id="aramaFormu">
		<form action="" method="get">
		<input type="text" name="s" id="s" onblur="if (value =='') {value = 'Ne aramıştınız?'}" onfocus="if (value == 'Ne aramıştınız?') {value =''}" type="text" value="Ne aramıştınız?" />
		<button type="submit">Ara</button>

		</form>
</div>

Ve şimdi hızlı bir şekilde alıp sitenizde kullanmanız için, önizleme ve kaynak dosyaları sizlerle paylaşıyorum. (: