Ana içeriğe atla

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...

Yorumlar

  1. güzel bir makale olmuş...

    kendi bloguma koymayı şimdilik düşünmüyorum...
    ''search'' yerini ''ara'' ya bırakınca geçerim artık..

    bu arada e-posta'dan yanıt geldi mi?

    YanıtlaSil
  2. Teşekkür ederim.

    Valla ben görürü görmez koydum, gerçekten çok güzel düşünülmüş. Tabi "search" "ara" olunca daha iyi olur. Vaya biz özelleştirebilsek çok daha iyi olur :-)

    "E-posta'dan yanıt geldi mi" derken, bloga yazdığın cevaptan bahsediyorsan, evet geldi.

    YanıtlaSil
  3. Ben widget şablonlarını genişlette desemde gsearch diye bir ibare bulamadım.

    YanıtlaSil
  4. Mafiamax ben biraz kurcaladım hallettim biraz, aceleciyim hemen beleşe kaçtım :-)

    Önce Gagget eklemek gerekiyormuş... :-)

    YanıtlaSil
  5. Uyguladım hoca, süper bir eklenti oldu bizler için paylaştığın için teşekkurler.

    YanıtlaSil

Yorum Gönder

Küfür ve hakaret içeren yorumları sevmiyor, Türkçe'nin doğru kullanıldığı yorumları ise çok seviyoruz.

HTML: <b>, <i>, <a> gibi temel HTML etiketlerini kullanabilirsiniz.
Uyarı: URL adresi belirtirken lütfen başına http:// protokolünü koymayı unutmayın!

Bu blogdaki popüler yayınlar

Sabit Diskinizde 60 GB Yer Açmak İster misiniz?

Windows XP ile hayatımıza giren Sistem Geri Yükleme aracı bazı durumlarda hayat kurtarıcı olsa da kişisel deneyimlerimden yola çıkarak, fazla güvenmememiz gerektiğini öğrendiğim bu araç sabit diskinizin boyutuna bağlı olarak gerektiğinden fazla iştahlı olabiliyor.

Windows XP ve Windows 7 işletim sistemi kullanıyorsanız Sistem Geri Yükleme aracının sabit diskinizde kullanacağı boyutu belirleyebiliyorsunuz. İş Windows Vista'ya geldiğinde kullanıcı arayüzü ile bu işi halletmeye imkan yok. Komut satırı ile değişiklik yapak gerekiyor.

Sabit diskiniz zamanla biriken sistem geri yükleme noktaları sebebiyle her geçen gün kan kaybeder. İşte bu noktada, sabit disk boyutunuza bağlı olarak eski geri yükleme noktalarını silip 60 GB'tan fazla yer açmanız mümkün. Sistem Geri Yükleme aracı sabit diskinizin %15'i kadar yeri kendine tahsis edebiliyor. Günümüzde kullanılan sabit disk boyutlarını düşündüğümüzde de 500 GB'lık bir sabit diskte 75 GB yeri -bazen- gereksiz yere heba etmiş oluyo…

Blogger Şablonunu Düzenleme (Güncellendi)

Yeni, yine, yeniden...

Sanırım bu sloganın ne anlama geldiğini biliyorsunuzdur. Bilmeyenler için tekrarlarsam, bu sloganı Blogger İpuçları kategorisi altında yazdığım yazılarda başlangıç cümlemdir :-) Yaklaşık bir haftadır bir çok kişi bana "Yorum Gönder" butonunu nasıl değiştirdiğimi sorup durdu. Aslında cevabı çok basit; <img src=.../> etiketini kullanarak :-) İşlem bu kadar basit olmasına rağmen bir çok kişi bu ve bunun gibi basit işlemleri yapamıyor. Daha doğrusu sorun Blogger şablonunun XML olmasından kaynaklanıyor. Blogger şablonumuza baktığımızda herşeyin sunucularda barındırılan bir değişkene atandığını görüyoruz. Yani kimse şablununun kodları arasında "Yorum Gönder" ibaresini göremez! Onun yerine, <data:...> etiketi ile atanan değişkeni görür. Ancak değişken diyince akla garip garip ifadeler gelmesin, Google bu işi yaparken değişkenlere verdiği adlarda İngilizce anlamlarını verecek şekilde isimlendirme yapmış. Burda bahsi geçen "Yorum Gönde…