Blogger’da arama kutusu ekleme

23 / Nisan / 2008 İsa Engiz    Blogger / Blogspot     arama butonu, blogger, blogspot 10 Yorum Yapilmis.

Aslında blogger her blogda varsayılan hizmet olarak sunuyor arama kutusu hizmetini, hemen üstte sol tarafta. Ancak bunun yeterince kullanışlı olmadığını söyleyebiliriz, hangi kullanıcının sol üst köşeyi gördüğünü iddia edebiliriz ki?

Bu durumda yapılabilecek çok basit bir şey var, blogumuza kendi hazırladığımız arama kutusunu entegre etmek! Hazırlayacağımız bu arama kutusu, sol üst kutu ile aynı işleve sahip olacak ama elimizdeki avataj ise arama kutusunu istediğimiz yere yerleştirebilmemiz olacak. (muhtemelen yanmenüye…)

HTML kodu

Yapmamız gereken ilk şey, çok basit, html kodları ile basit bir form hazırlamak:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Ara" type="submit"/>
</form>

İki önemli unsurdan birincisi, formun işleneceği dosya kısmı, action=”". Burada biz “/search” olarak belirtiyoruz.

İkinci önemli nokta ise, aranacak kelimenin girildiği yazı alanının ismini “q” olarak belirtiyoruz. Hepsi bu kadar!

Form sitilini değiştirmek

Bu kodu aynen bu şekilde kullanırsak, sadece basit bir form elde etmiş olacağız, halbuki çok ufak bir kaç kod ile görünüşü değiştirebiliriz.

İşe yazı alanını değiştirmekle başlayalım:

<input id="search-box" name="q" type="text" value="arama kelimesini buraya yazın..." style="width:250px; backround:#FFFFCC; border:2px solid #FFFF99"/>

Siz de renk değerlerini kendi isteğinize göre değiştirebilirsiniz.

Arama düğmesi’ni de biraz değiştirebiliriz:

<input id="search-btn" value="Search" type="submit" style="background:#000066; border:2px outset #ff0000; color:#ffffff;"/>

Renkleri yine isteğinize göre değiştirebilirsiniz.

Blog şablonumuza eklemek

Tüm bunları yaptıktıan sonra sıra kodları blog şablonunuza eklemeye geldi.

adım 1: Blog yönetim panelini açın ve şablonu değiştir kısmına tıklayın.
adım 2: Karşınıza, blogunuzun görünüşünü ifade eden bir sayfa gelir, bu bölümde, yan menü için “bir sayfa öğesi ekle” yazısına tıklayın.
adım 3: HTML / Javascript ekle’yi tıklayın.
adım 4: Kodu yapıştırın ve kaydet düğmesine tıklayın.
adım 5: işlem tamamlandı! blogunuza baktığınzda, şöyle bir arama kutucuğu görmeniz lazım:

Navbar’ı kaldırma

Artık blogumuza bir arama kutusu eklediğimize göre navbar’a ihtiyacımız kalmadı. Rahatlıkla kaldırabiliriz, bunun için aşağıdaki küçük kodu sayfamızın html kısmıan entegre etmeliyiz.

İlk önce blogger kontrol panelinden “şablonu değiştir” bağlantısına tıklıyoruz. Karşımıza gelen ekrandan “HTML’yi düzenle” kısmına geçiyoruz. Aşağıdaki kodu şablonuzun tahminen 10. satırına ekliyoruz:

#navbar-iframe {
 display: none !important;
}

İşte bu kadar.

Not:
Şu kaynaklara da göz atmayı isteyebilirsiniz.

http://blog.langersblog.com/2007/03/adding-search-to-blogger.html

http://www.bloggerbuster.com/2008/02/adding-style-to-search-forms.html

Bu yazıyı beğendiyseniz, paylaşabilirsiniz:

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!