Gelişmiş Arama Kutusu'nu Kişiselleştirin!

Yeni yine yineden...

Blogger'da bulunan sayfa ögelerinin bazılarını site şablonumuzdaki renklere uysun diye kişiselleştirebiliyoruz. Ancak bu özellik şu an için "Gelişmiş Arama Kutusu" sayfa ögesi için bulunmuyor.

Dünden beri bunu nasıl yapabileceğimi düşünüyordum, sonra aklıma sayfamın kaynak kodlarına bakmak geldi. İyiki de bakmışım, çünkü "Gelişmiş Arama Kutusu" sayfa ögesini hazırlayan AJAX Search API team, bizim için CSS kodları bırakmış :-)

Bende hemen kişiselleştirmeye başladım tabi. EEE en büyük misyonlarımızdan biri olarak "Bilgi paylaştıkça büyür" inancında olduğum için, yazımın devamında size nasıl yapacağınızı anlatacağım.

Not: Burada anlattıklarımı denemeden önce şablonun bir yedeğini mutlaka alın.

Bilgi: Renk kodlarında bulunan etiketler ( <data:visitedLinkColor/> gibi) şablonda önceden tanımlanmış renk kodlarına aittir. Böylece renkleri etiket ile çağırabiliyoruz.

1. Öncelikle sayfa kodlarımıza ulaşıyoruz (Widget şablonlarını genişlet'i seçmeyi unutmayın)
2. Sıra ilgili CSS kodlarını bulmaya geldi, bunu kolayca yapabilmek için tüm kodlarınız CTRL+A tuş kombinasyonu ile seçin ve CTRL+F ile arama kutusunu açın. Şimdi arama kutusuna "gsearch" diye yazıp aratın. İlk seçenekte <!-- override gsearch.css --> satırına ulaşacaksınız. İşte bu satır başlığımız, bundan sonraki kodlar ile kişiselleştirme yapacağız.

İlk olarak;

#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color: <data:linkColor/> ;
}

satırı ile karşılaşacaksınız. Bu satırda kırmızı ile belirttiğim yere istediğimiz yere renk kodunu yazarak arama sonuçlarının başlıklarını renklendirmiş olacağız. Burada ayrıca arama sonuçlarında çıkan "More Results" linkini de aynı renk ile kodlamış oluyoruz. Arzu ederseniz onu ayrıca renk kodu verebilirsiniz. Bunu yapmak için;

#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title * {
color: renk kodu;
}

#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color: renk kodu;
}

şeklinde ayırmanız gerekiyor.
Bundan sonraki tüm kodlarda aynı şekilde renk değiştirebiliyoruz. Ben hangi kodun neye ait olduğunu size söyleyeceğim.

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color: <data:visitedLinkColor/>;
}

bu koda dikkat ederseniz "result title" yani "sonuç başlıklarının" stillendirilmesinden sorumlu olduğunu göreceksiniz. Burada "a:visited", listelenen başlıklardan önceden ziyeret ettiklerinizi renklendirmek için kullanılıyor.

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/> ;
}

bu kod ise arama sonuçlarından blogunuzda bulunan sonuçaların altında bulunan tarih ibaresinin rengini stillendirmekle yükümlü.

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

bu kod ise arama sonuçlarınında listelenen başlıklara ait site adreslerinin renklerinin stillendirilmesinden sorumlu.

#uds-searchControl .gsc-results {
border-color: <data:borderColor/> ;
}

bu kod ise aradığınız terimin arama sonuçları içinde alacağı rengi stillendirmekle yükümlü. Burada koyu kalın şekilde yazılması kodlanmış. Siz kırmızı ile gösterdiğim kodu herhangi bir renk kodu ile değiştirebilirsiniz.

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

bu koda ise baktığımızda "tabhActive" ile arama kutusunda bulunan sekmelerden aktif olanını stillendirebileceğimiz anlaşılıyor.
-İlk renk kodu ile arama kutusu çerçevesinin rengini değiştirebilirsiniz.
-İkinci renk kodu ile sekmelerin başlıklarını vurgulamak için kullanılan çizgi başlıklarını renklendirebilirsiniz.
-Üçüncü renk kodu ile arama sonuçlarını görüntülendiği alanı renklendirebilirsiniz.
-Son olarakta dördüncü renk kodu ile sekme başlığının rengini değiştirebilirsiniz.

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent ;
color: <data:linkColor/>;
}

buda son kod yumağı. Burada da "tabhInactive" etiketinden anlaşılacağı üzere, arama sonuçlarında listelenen 4 sekmeden aktif olmayan 3'ünü stillendirebiliyoruz. Burada bir önceki kod yumağından farklı olarak, "background-color" var. Bu da aktif olmayan sekmelere arka plan rengi verebilmemizi sağlıyor. Burada arka plan transparan seçilmiş, siz buraya renk kodu da koyabilirsiniz.

Benden bukadar. Kolay gelsin...