Arama motorlarından gelen kelimeleri renklendirmek
Google gibi arama motorlarını kullanarak hergün web sitemize yüzlerce, binlerce ziyaretçi geliyor. Öyleki web sitemize gelen ziyaretçilerin %60′ını ya da %70′ini arama motorları gönderebiliyor. Dolayısıyla bu özel ziyaretçi kitlesi için bizim de özel birşeyler yapmamız, onlara bazı konularda yardımcı olmamız gerekiyor. Örneğin arama motoruna yazdıkları kelimeler web sitemizde geçiyorsa, o kelimeleri renklendirerek işe başlayabiliriz 
Arama kelimelerini neden renklendirelim ki?
Arama motoruna bir kelime yazıyoruz ve çıkan sonuçlardan birisine tıklayarak bir web sayfasına giriyoruz. Daha sonra aratmış olduğumuz kelime o sayfa içerisinde geçiyor mu geçmiyor mu kontrol etmemiz gerekiyor. Eğer o web sayfasındaki yazılar bir de uzunsa, arattığımız kelimenin yazının neresinde geçtiğini bulmak zaman alabiliyor. Oysaki arattığımız o kelime otomatik olarak renklendirilmiş olsa herşey daha kolay olurdu. Alttaki iki ekran görüntüsü bu durumu özetlemek için yeterli sanırım.
Arama kelimeleri renksiz
Arama kelimeleri renklendirilmiş
Aranızdan bazıları “arama motorunun önbelleğine girdiğimiz zaman bu kelimeler zaten renklendiriliyor” diyebilir. Fakat herkesin önbelleği kullanacağını bekleyemeyiz. Zaten önbelleğe alınmış veriler güncel de olmayabiliyorlar. Ve ayrıca her web sayfasının da önbelleğe alınmadığını düşünürsek, bu işlemi webmaster olarak bizim yapmamız çok daha iyi ve pratik olacaktır.
Arama kelimelerini nasıl renklendiriyoruz?
Merak etmeyin bu işlem son derece basit. Web sayfamıza küçük bir javaScript dosyası ekleyeceğiz ve ekstra ayar yapmamıza bile gerek kalmadan bu özelliği web sitemize kazandırmış olacağız. Ben bu işlem için Search Engine Highlight adındaki javaScript dosyasını kullanıyorum. 3 KB boyutundaki bu javaScript dosyasının desteklediği arama motorları şöyle:
Bu arama motorlarına yazdıkları kelimelerle sizin web sayfanıza ulaşacak olanlar, bu kelimeleri otomatik olarak renklendirilmiş halde göreceklerdir. Şimdi de bu javaScript dosyasının kurulumuna geçelim.
Search Engine Highlight nasıl kuruluyor?
1. İlk önce bu bağlantıya tıklayarak sıkıştırılmış haldeki javascript dosyasını indirin.
2. İndirdiğiniz bu dosyayı web sayfanıza aşağıdaki gibi eklemeniz gerekmektedir.
<script type="text/javascript" src="se_hilite.js"></script>
3. Son adımda ise web sayfanızdaki css kodlarınızın arasına alttaki kodları ekleyin.
.hilite1 { background-color: yellow }
.hilite2 { background-color: green }
.hilite3 { background-color: blue }
Bundan böyle arama motorlarında online fotoğraf işleme kelimeleri aratılarak web sayfamıza girilirse online kelimesi sarı (yellow), fotoğraf kelimesi yeşil (green) ve işleme kelimesi de mavi (blue) olarak işaretlenecektir. Bu işlemi benim web sitem üzerinde test etmek isterseniz buraya tıklayabilirsiniz
Sonuç
Search Engine Highlight ile ilgili daha detaylı bilgiyi kendi web sayfasında bulabilirsiniz. Bu yazıyı hazırladıktan sonra ben de web sitemde bu javaScript dosyasını kullanmaya başladım.
Arama kelimelerini renklendiren başka uygulamalar da vardır mutlaka. Ben bu yazıyı hazırlarken Searchhi adında başka bir javaScript dosyasını daha inceledim. Fakat bu dosyanın sadece Google’a destek verdiğini ve arama kelimelerinin hepsini aynı renkte gösterdiğini vurgulamak isterim
WordPress kullanıcıları şuradaki eklentiden de faydalanabilir.
Link için teşekkürler Emre.
Açıklayıcı Bir yazı Olmuş, Sitedeki ufak değişikler ziyaretçiyi kazanmak demektir. Sağol..
Eline sağlık eburhan kardeşim. Yahu bu çok güzel bir özellik. Bunu sitemin yeni versiyonunda deneyeceğim. Eline sağlık…
Teşekkürler güzel bir şey kullanacagım
gerçekten güzel uygulama imiş
Ben kararsız kaldım:( Eklenti mi yoksa javascript ile mi uygulasam. Hangisi daha verimli olur?
@gevv
Eklenti daha hızlı çalışır tahminimce ama javaScript dosyasının da yavaş çalıştığını düşünmeyin. Ben eklenti yerine javaScript dosyası kullandım ve memnunum.
scrip olarak ekledim fakat yaşil ve mavi çok koyu göründü
css dosyasına eklenen kodlarda ufak bir degişiklikle çözülüyor
http://img213.imageshack.us/img213/3939/adszqd9.jpg renkleri kod olarak tanımlamak gerek
@gevy
ben konuyu anlatırken örnek olsun diye “yellow-green-blue” renklerini kullandım. Elbette renkleri istediğiniz gibi değiştirebilirsiniz. Zaten ben de yazıdaki renkleri kullanmıyorum
Bu gidişle programcılığı bırakacağım
@shapcy
Niye öyle düşündün ki dostum? Merak ettim doğrusu
Yahu site programlayacağım, bir bakıyorum işletmecilerin tabiriyle “outsourcing” yapsam hem daha hızlı, hem de proje süresince yapılabileceğinden daha kapsamlı bir proje hazırlayabilirim. Ama sevemiyorum bir türlü hazır şeyler kullanmayı… Bu yüzden devam
Gerçekten de süper ötesi bir özellik…Aslında müthişte diyebilirim. Zaten aklımda vardı ancak kıt kodlama bilgimle nasıl yapılacağını düşünüp duruyordum
Teşekkürler…
Güzel bir anlatım olmuş. Biraz html bilgisiyle kolaylıkla yapılabilir..
Hilite.search_engines = [
['google\\.', 'q'], // Google
['search\\.yahoo\\.', 'p'], // Yahoo
['search\\.msn\\.', 'q'], // MSN
['search\\.live\\.', 'query'], // MSN Live
['search\\.aol\\.', 'userQuery'], // AOL
['ask\\.com', 'q'], // Ask.com
['altavista\\.', 'q'], // AltaVista
['feedster\\.', 'q'], // Feedster
['search\\.lycos\\.', 'q'], // Lycos
['alltheweb\\.', 'q'], // AllTheWeb
['technorati\\.com/search/([^\\?/]+)’, 1], // Technorati
['dogpile\\.com/info\\.dogpl/search/web/([^\\?/]+)’, 1, true] // DogPile
];
Birazcık regExp desen bilgisi ile kendi sitenizin arama sonuçlarını da renklendirebilirsiniz.
ben “search hilite 1.9″ kullanıyorum ve oldukca memnunum.
Yalnız kullanıcılar bu özelliği kullanmak istemeyebilirler. Bu nedenle bir blokta “Google’da arama yaptığınız kelimeler renklendirilmiştir, renklendirmeyi kapatmak için buraya tıklayınız” seçeneği sunulmalı.
@Gökhan
Evet bahsettiğin kapatma özelliğinin sunulması iyi olur. Bunu yapmak ise o kadar da zor değil. Bir ara bu özelliği ekleyeceğim. Yorumun için teşekkürler
Rica ederim, bence kapatma özelliği olmadığı sürece eklenti kullanışsız kalıyor. Çünkü kullanıcı tercih edemiyor ve rahatsız olma olasılığı yüksek. Belki sen gereklli değişikliği yaparak başka bir eklenti olarak çıkartabilirsin
Gayet hoş bir paylaşım çok teşekkürler.Bunu yeni açtığım bloğumda deneyeceğim,tekrar teşekkürler.
sanırım artık çalışmıyor
se_hilite.js acaba güncellemeden dolayı mı ? wp 2.3.1 kurmuştum
@gevv
“se_hilite.js” dosyasının WordPress ile herhangi bir alâkası yok. Kurulumda bir hata yapmış olman lâzım. Web sitenin kaynak kodlarına baktım da “se_hilite.js” dosyası “style.css” dosyasının üstünde. Yerlerini değiştirmeyi deneyebilirsin.
çalışıyormuş garip bir kaç denemede çalışmayınca bir de yeni wp yüklemesine denk gelince sorun oldu sanmıştım
gayet güzel çalışıyor şuan
ustalar merhaba ben bu işi sadece html kodları ile yapmak mümkün mü? blogcu bloglarında şablona eklenebilir mi?
Bu işlem yalnızca HTML ile yapılamaz. Bunun için JavaScript gereklidir.
Blogcu bloglarında ise bu özelliği kullanabilirsin sanırım. “Şablonu düzenleyin” bölümünden şablonun kodlarını görüntüyerek “<head></head>” kodları arasına alttaki kodları ekle. Bir sorun olmazsa bu özelliği kullanabilirsin.
Ben blogger kullanıyorum. Yaptım güzel oldu sanki.
Teşekkürler.
güzel açıklama sağol
Selamlar, Wordpress’in şu anda kullanılan sürümünde bu aracı kullanmaya çalıştığımda renklerin çıkmadığını gördüm. Sizin verdiğiniz demo linkinde de google dan size geldiğimizde renkleri göremedim. Acaba sistem değişikliği yüzünden bu scriptte uygulanabilirliğini mi yitirdi?
@DincerDegre
En kısa zamanda yeniden uygulayacağım.
Temayı değiştirirken renklendirme işlemini unutmuşum. Hatırlatmış oldun, sağol
Aynı şeyi bende dicektim erhan, sitende verdiğin örnek çalışmıyor ayrıca 1 sene geçmiş daha sözünü yerine getirmemişin