CSS İle Arama Kutularınızı Özelleştirin

CSS İle Arama Kutularınızı Özelleştirinİç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
Klasik bir arama formu

11 Mart 2012 Güncellemesi (WordPress’e Uyarlamak)

Yaptığımız arama kutusu şimdilik sadece anasayfada arama yapılmasına izin vermektedir. Tüm sayfalarda sorunsuz bir şekilde çalışması için ikinci satırı şu şekilde değiştiriniz:

<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
Ö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. (:

Özel bir arama formu - Anlatım 1
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:

Özel bir arama formu - Anlatım 2
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. (:

Yazar: | Kategori: CSS | Tarih: 25 Ocak 2012 | 8.458 Okunma
  • 26 Yorum
  • Bu Yazıyı Arkadaşlarınla Paylaş
    Konuyla İlgili Benzer Yazılar
    Arama Kelimeleri
    Sponsor Reklam
    Konuyla İlgili Yorumlar
    1. Blogumda arama kutusu sidebar’da bulunuyor. Fakat bu sitede olduğu gibi menü çubuğunun üzerinde bulunsun istiyorum.
      Yardım ltf..

    2. Hocam Çok teşekkürler Çok açıklayıcı ve net olmuş buradaki anlatımı resmi alarak kendi siteme göre düzenleyerek ekledim ve kullanıyorum

      Tekrar teşekkür ederim

      • Rica ederim. Sitenize eklerken farklı bir resim kullanırsanız daha iyi olabilir. Bu resim sanki biraz esnemiş gibi. :) Genel olarak sitenize yakışmış. İyi kullanımlar..

    3. Uğur hocam selam.

      Arama kutusuna bir kelime girdikten sonra karşımıza gelen “ARAMA SONUÇLARI” başlığını ve “filanca kelimeye ilişkin sonuç bulunamadı” yazılarının fontunu nereden değiştireceğiz? Klasik olarak style.css’den yapılmıyor galiba bu, her yerin fontu değişti, bunu beceremedim.

      • O sorun değil de, ben senin sitenin adresini yine unuttum. :D

        İstersen şöyle yapalım. Chrome kullanıyorsan; yazının üstüne gelince, sağ tıkla ve ardından “Öğeyi denetle” seçeneğini tıkla. Sonra o kısımdan yazının hangi div içinde olduğu bul ve stil dosyasından o dive müdahale et. :)

        İstersen de sitenin adresini buraya yaz. Ben bir bakayım. :)

        Görüşmek üzere..

    4. Bu arama motoru oluşturma CSS’de korkulu rüyamdı. Çok yararlı bir makale olmuş ellerinize sağlık.

        • kesinlikle katılıyorum css çok zevkli keyifli bir şey kurcalamaya başladınız mı ortaya çok güzel şeyler çıkabiliyor ve her öğrendiğiniz şeyde daha fazla uğraşma isteği geliyor.

    5. ara kısmına link veremedim. şöyleki link sadece bir satır halinde ve benim resmimim altında çıkıyor.nasıl düzeltebilirim

      • hocam hallettim eywallah güzel makale boyutlandırmada hata yapıyormuşum yorumumu yaınlamnıza ferek yok yine size kalmış tabi

    6. merhaba çok güzel bir çalışma ama mesela başka sayfaya geçiş yapınca tekrar mevcut sayfada arama yapıyorum arama bulunamadı diye sonuç veriyor. ANA sayfada arama yapınca sorun yok ok ama ziyaretçi diyelim bir yazıyı açtı okuyor orda arama yapmak istedi diyelim arama yapınca sonuç hüsran bunu nasıl halledebiliriz acaba

    Bir Cevap Yazın

    E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

    Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    CSS3 Transition Özelliği

    Sitemizdeki linklerin bir anda bir renkten diğer bir renge geçmesi yerine yavaş bir şekilde, güzel...

    Kapat
    Online Users