@emreshepherd /ik sayfasından mı bahsediyorsun? 😄

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

Etiketler
CSS kategorisinde 655 okunma ve 26 yorum.
25 Ocak 2012 tarihinde tarafından eklendi.

Blog Yazarı Hakkında

Uğur Dalkıran

1996 doğumlu yazar, 2011 yılınında Kayseri'de ilk blog yazısını yazdı. Şimdi ise Muğla'nın Kötekli yerleşkesinde üniversite yolunda. Ayrıca: ugurdalkiran.com/ik

Bu Konu Hakkında Yorum Yapanlar

sencer
sencer, 3 yıl önce şöyle dedi: #

Bu Yararlı Bilgi İçin Teşekkürler.

yusuf satan
yusuf satan, 3 yıl önce şöyle dedi: #

Ellerine sağlık teşekkürler...

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

İşinize yaradıysa ne mutlu bana! :)

yusuf satan
yusuf satan, 3 yıl önce şöyle dedi: #

Yaramaz olurmu bilmediğimiz çok şey var yavaş yavaş öğreniyoruz güzel kaynaklar mevcut tekrar teşekkürler..

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

Rica ederim. :) İnanır mısınız, "Bu yazıyı iyiki yazmışım." diyorum. Sürekli karşıma çıkan form şablonlarını sürekli kendi blogumdan yaralanarak yapıyorum. :)

Onur
Onur, 3 yıl önce şöyle dedi: #

Blogumda arama kutusu sidebar'da bulunuyor. Fakat bu sitede olduğu gibi menü çubuğunun üzerinde bulunsun istiyorum.

Yardım ltf..

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

Sitenizin adı nedir?

Onur
Onur, 3 yıl önce şöyle dedi: #

Unutmuşum pardon :) Daha önceki gizlilik hassasiyetini tekrar rica edeceğim hocam, hatırlarsın: ***

Adresi yayınlamadan yardımcı olursan çok makbule geçer:)

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

Ya aslında istediğin şeyi buradan anlatamam. dlkrnugur@gmail.com adresine rastgele bir mail at oradan görüşelim.

Onur
Onur, 3 yıl önce şöyle dedi: #

Maili yolladım.

turgay
turgay, 3 yıl önce şöyle dedi: #

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

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

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..

Onur
Onur, 3 yıl önce şöyle dedi: #

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.

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

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..

Onur
Onur, 3 yıl önce şöyle dedi: #

Valla bu "öğeyi denetle" olayını bilmiyordum, acayip faydası oldu, hallettim ve de teşekkür ettim:)

Uğur Dalkıran
Uğur Dalkıran, 3 yıl önce şöyle dedi: #

Rica ederim. Tarayıcının sana sunduğu nimetlerden faydalanmalısın. ;) Hadi kolay gelsin. :)

Semih
Semih, 3 yıl önce şöyle dedi: #

Süpersin bilader çok işime yaradı arşivledim bile :)

Melih Mert Ünal
Melih Mert Ünal, 2 yıl önce şöyle dedi: #

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

Uğur Dalkıran
Uğur Dalkıran, 2 yıl önce şöyle dedi: #

CSS çok eğlencelidir, ondan korkmayın. :)

İşinize yaradıysa ne mutlu bana.

Eray
Eray, 1 yıl önce şöyle dedi: #

gerçekdende hoş bir arama kutusu bende bu tarz sade ve hoş bir şey arıyordum eline sağlık...

Eray
Eray, 1 yıl önce şöyle dedi: #

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.

ali haydar
ali haydar, 8 ay önce şöyle dedi: #

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

ali haydar
ali haydar, 8 ay önce şöyle dedi: #

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

murat
murat, 7 ay önce şöyle dedi: #

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

Uğur Dalkıran
Uğur Dalkıran, 7 ay önce şöyle dedi: #

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

Burayı okuyun. Burada sorunuza cevap var. :)

murat
murat, 7 ay önce şöyle dedi: #

hocam bulamadım :) kusura bakmayın nasıl yapıcam :(

Bu konu için 26 yorum yapılmış. Bir yorumda siz yazın!