blogger için renkli arama çubuğu

Web sitelerinde gezinmeyi oldukça kolaylaştıran sitenize özel bir arama motoru kodu ve bazı görünüm iyileştirmeleri. Anlatımı 'Blogger' için yaptım, farklı platformlarda da benzer adımlarla aynı kolaylıkla uygulayabilirsiniz.

---

1. Öncelikle blogunuzun Yerleşim ısekmesini tıklayıp Sayfa Öğeleri kısmından Gadget Ekle seçeneğini tıklayın.
2. Açılan pencerede HTML/JavaScript adlı eklentiyi seçin, başka bir sayfa açılacaktır.
3. Başlığa istediğiniz herhangi bir şeyi yazın. (Ben hiçbir şey yazmadım)
4. İçerik yazan kısıma şu kodu yapıştırın. Kaydet'e tıklayın.
   

Bu adımdan sonra arama motoru sitenize eklenmiş olmalı. Bundan sonraki adımlarda arama motorunun görünümünde bazı değişiklikler yapacağız.

• Yine Yerleşim sekmesinde bulunan HTML'yi Düzenle sekmesine tıklayın. CTRL+F ile sayfada body etiketini aratın. body etiketinden sonra istediğiniz herhangi bir yere şu kodu yapıştırın.

Sayfanızı görüntülediğinizde arama motorunun renklerinde ve görünümünde farklılıklar göreceksiniz. Bunları sağlayan son kod hakkında istediğiniz değişiklikleri yapmanız için basit açıklamalar ekliyorum.

Son kodumuzun içeriği aşağıdaki gibidir.

searchtextarea: Arama yapmak istediğimiz kelimeleri girdiğimiz kısımın genel görünüşüdür.
searchtextarea:hover: Aynı kısımın fare üzerine geldiğinde uğrayacağı değişimleri gösterir.
searchbutton: Arama yapmak için tıkladığımız düğmenin genel görünüşüdür
searchbutton:hover: Aynı düğmenin fare üzerine geldiğinde uğrayacağı değişimleri gösterir.

border: Hangi bölümün altındaysa o bölümün etrafına çizgi çeker. medium çizgi kalınlığı (bunun yerine çizginin kalın olması için thick, ince olması thin, sizin belirleyeceğiniz bir değer olması için 3px gibi bir ifade kullanmalısınız.), solid çizginin görünüm özelliği (alternatifleri: dotted, dashed, double, groove, ridge, inset, outset), #fd5294 ifadesi ise çizginin rengini (değiştirmek için renk kodlarını bilmelisiniz. Şuraya tıklayarak yardım alabilirsiniz.) ayarlamanızı sağlar. Eğer o kısımın etrafında çizgi istemiyorsanız, border ifadesi ile başlayan satırı tamamen silmeniz gerekir.
background-color: Hangi bölümün altındaysa o bölümün arka plan rengini belirler. Silerseniz kendiliğinden beyaz olur. Değiştirmek için yine heksadesimal renk kodlarını değiştirmeniz gerekir.
font-family: Altında olduğu bölümün yazı tipini ayarlar. Her bilgisayarda standart olarak gelen yazı tipleriyle değiştirmenizi öneririm aksi halde sizin atadığınız yazı tipine sahip olmayan bilgisayarlarda sistem standart fontu olarak görüntülenecektir.
color: Altında olduğu bölümün yazı rengin belirler.

Daha kolay anlaşılması için son kodun kendisini de ekledim. Bu şekilde arama kutusunda hemen hemen istediğiniz her görsel değişikliği yapmanız mümkün.

.searchtextarea{
border: medium solid #fd5294;
background-color: #333333;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.searchtextarea:hover{
background-color: #fd5294;
border: medium solid #333333;

}

.searchbutton{
color: #fd5294;
background-color: #333333;
border: 3px solid #fd5294;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.searchbutton:hover {
color: #333333;
background-color: #fd5294;
border: medium solid #333333;
}