Blogunuza/Sitenize Arama Kutusu Yapın

Blogunuza ekleyeceğiniz arama kutusuyla ziyaretçilerinizin blogunuzdaki yazılarınıza daha ulaşmalarını sağlayabilirsiniz. Hla blogunuzda arama kutunuz yoksa bu yazıda anlattıklarımı blogunuza uygulayabilirsiniz. Sitenize arama kutusu eklemek için bir çok yöntem mevcut. Şimdi Tam Bir Blog farkıyla sizlere hangi kodlarla arama kutusu yapılabileceğinizi anlatacağım.
Arama kutusu yaparken 3 farklı yöntemimiz var.

1. Yöntemin Kodları: Sade bir arama kutusu istiyorsanız tam size göre.

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Ara" type="submit"/></form>

Birinci Arama kutusunun görünümü

2 Yöntemin Kodları: Temanıza göre düzenleyebilceğiniz, biraz daha uyum arayanlar için.

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" type="text" style="background: #ccccff; border: 2px solid #000066"><input id="search-btn" value="Ara" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"></form>

Mavi kodlar arama kutusunun rengini ve stilini belirliyor. Renk kodlarıyla istediğiniz gibi değpiştirebilirsiniz.
background: #ccccff; border: 2px solid #000066 arama kutusnun içi ve çarçevesinin regini belirler.
background: #000066; border: 2px outset #ff0000; color: #ffffff Arama butonun ve arama butonu çerçevesinin rengini belirler. Renk kodları için bu sayfaya bakabilirsiniz.

İkinci Arama kutusunun görünümü

3. Yöntemin Kodları: Bu kod ise arama butonu yerine resim koymak isteyenler için ideal.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Blogumda Ara"><input id="search-btn" value="Search" type="image" src="http://img10.imageshack.us/img10/4905/searchpng.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Mavi Urlsdeki butonu ben yaptım. Siz kendi buton resminizle değiştirebilirsiniz.

Üçüncü Arama kutusunun görünümü:

Şimdi ise bu kodları nasıl yerleştirebileceğinizi gösterelim. Çok basit bir yöntemle arama kutusunu blogunuza yerleştirebilirsiniz. Yerleşim--->Sayfa Öğeleri---->Gadget Ekle---->HTML/JavaScript seçelim. Html/Javacript içine de uygulamak istediğiniz arama butonunun kodlarını yapıştırabilirsiniz.

Arama kutularını umarım beğenmişsinizdir...




kaynak: http://tambirblog.blogspot.com