ARAMA BUTONU YAPMAK

ARAMA BUTONU OLUŞTURMAK
Sitelerde ve bloglarda olmazsa olmazlardan bir tanesi de arama butonlarıdır.Çok işlevli bu butonlar isteğe göre webde yada site içerisinde arama yapabilmektedir.Bu butonlar site ziyaretçisinin bir konuyu daha kolay bulmasını sağlar,arama butonları olmazsa ziyaretçi bir konuyu bulmak için linkler arasında dolaşıp durur, aradığını bulamamanın yanı sıra bu ziyaretçiye eziyet gibi gelir, tabiri caizse çin işkencesi olur.Bunun dışında bloğunuza yakışır bir arama butonu zitenizin daha güzel görünmesini sağlayacaktır.Bu bölümde nasıl arama butonu yapılacağını ve arama butonlarında CSS kodlarını nasıl kullanacağımızı öğreneceğiz.
Aşağıda üzerinde çalışacağımız bir arama butonu görülmektedir,bu butonu kendi sitemize göre şekillendireceğiz,bu haliyle buton yalın,çıplak haldedir,biz bunu CSS yardımı ile giyindireceğiz.

öncelikle formumuzu  " div id " etiketleri arasına alacağız,gördüğünüz gibi formumuza bazı yeni etiketler ekledik,bu etiketler yardımı ile butonumuza renk verdik,siz bu kodları CSS bilginiz ile kendi renginize boyayabilirsiniz
<br /> <div id='search'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' style='background: #ffffff; border: 2px solid #ffab06' type='text'/><input id='search-btn' style='background: #ffab06; border: 2px outset #ffab06; color: #ffffff; font-weight: bold;' type='submit' value='Search'/></form></div>
üzerinde değişiklik değişiklik yapığımız butonun yeni hali:

" div id " etiketleri arasında aldığımız butonu renklendirmek için aynı başlık altında CSS kodları açmalıyız
bakın butonumuz "
div id="search"
içerisinde CSS kod başlığı ise aynı isimde " #search "
<br /> /* The Search */<br /> #search {<br /> background:url();<br /> width:283px;<br /> padding:5px 0px ;<br /> margin:0px 0px 1px 0px;<br /> float:right;<br /> height:21px;<br /> display:inline;<br /> }<br />

Burada dikkate etmemiz noktalar: background:url(#);  kısmına bir URL  giriyoruz resim URL'si
width:rakamsal uzunlukpx; bir uzunluk belirleyin 283 idealdir
float:right;  bu etiket sayesinde butonun sağdamı soldamı olacağını belirliyoruz
height:21px; bu etiket sayesinde butonun yüksekliğini ayarlıyoruz
unutmayın butonumuzu CSS ile şekillendirmek için formuzu "div id" yada "div class" etiketleri arasına alıyoruz ve aynı isimde bir CSS kod grubu açıyoruz, daha sonra gereken düzenlemeleri yapıyoruz.

iyi bloglamalar
bu dersi beğendiyseniz lütfen paylaşın yada beğenin