Ads Top

Sitene Google Özel Arama Ekleme

Google Özel Arama

Merhaba arkadaşlar, bu dersimizde sizlere google özel aramasını (google custom search engine) wordpress sitemizde, ayrı bir sayfa açtırmadan ve google`ın sayfasını kullanmadan, direk olarak kendi sayfamızda ve kendi tasarımımıza uygun bir şekilde nasıl çalıştıracağızı anlatacağım.

Bu yazımıza geçmeden önce belirtmekistiyorum; bu yöntem oldukça kolay ama işlem olarak uzun ve biraz da kod bilgisi gerektirir. Daha basit bir şekilde google özel arama formunu sitenize eklemek isterseniz buradaki yazımı da incelemenizi tavsiye ederim.

Çoğu yabancı sitede görürüz bunu, ama nasıl yapıldığına dair pek detaylı bir anlatıma rastlamadım, ne yabancı sitelerde ne de Türkçe içeriğe sahip sitelerde.
Bu dersin sonunda sizde Wordpress sitenizde google özel arama sonuçlarını yayınlayabileceksiniz.

Paylaşımımıza geçecek olursak ilk önce gmail den bir hesabınızın olması şart, sanmıyorum gmail`den hesabı olmayan webmaster kalmasın ama hatırlatmakta fayda var sanırım.

1-) İlk önce http://www.google.com/coop/cse/ adresine giriyoruz ve resimdeki Özel Arama Motoru oluştur yazan yere tıklıyoruz.

2-) Karşımıza alttaki resimdeki gibi bir ekran çıkacak, ben kendi siteme göre gerekli yerleri doldurdum, sizde kendi sitenize göre gerekli ayarlamaları yapınız.



3-) Bu görüntünün hemen altında, arama yapılacak web sitesini resimdeki gibi giriniz. Yine burada kendi sitenize göre ayarlayınız. Sonuna * koymayı unutmayınız.



4-) Sürüm seçenekleri ve hizmet şartlarının kabul seçeneklerini de alttaki resimdeki gibi ayarlayınız ve sonraki kısma geçiniz.



5-) Karşınıza resimdeki gibi bir ekran çıkacak, burada bir kaç tane deneme yapıp, site adresimizi doğru girip girmediğinizi test ederseniz ileriki bölümlerde çıkacak bir sorunda en azından bu bölümü doğru geçtiğimizden emin olarak sorunu farklı yerlerde aramamıza yardımcı olacaktır.



6-) Resimdeki son yazan yere tıkladığımız zaman karşımıza aşşağıdaki resimdeki gibi bir ekran çıkacak. Sizin ekranınızda sadece bir sonuç gözükecektir. Burada kontrol paneli yazan yere tıklıyoruz.



7- ) Daha sonra karşımıza çıkan ekranda ilk önce görünüm ve izlenim yazan yere tıklıyoruz ve tasarımımıza uygun olan görünümü seçiyoruz.



8- ) Görünümümüzü ayarladıktan sonra sıra geldi kodları ayarlayıp sitemizin içine ilave etmeye. Aşağıdaki resimdeki gibi, ilk önce kod yazan yere tıklıyoruz ve sonrasını da aşağıdaki resimdeki gibi ayarlıyoruz.



9-) Daha sonra hemen alttaki Arama sonuçları ayrıntılarını resimdeki gibi ayarlıyoruz.



10-) Bunların hemen altında iki adet kod penceresi göreceksiniz. Bu pencerelerden aşağıdaki resimde de belirttiğim gibi Arama kutusu kodununu kopyalayıp, mevcut sitemizdeki arama kutusunun bulunduğu yere yapıştırıyoruz.



11-) Evet arkadaşlar sona yaklaştık. Bundan sonraki bölümler en can alıcı kısımlar olacak, acele etmeden dikkatlice devam ederseniz hiçbir sorun çıkacağını zannetmiyorum.

Arama sonuçları koduna geçmeden önce yapmamız gereken bir işlem var. Wordpress`de admin paneline giriş yapıyoruz ve Yeni Sayfa oluştur diyoruz. Burada dikkat ediniz, yeni yazı değil yeni sayfa oluşturmalısınız.

Şimdi google özel arama (google custom search) sayfasına geri dönüyoruz ve Arama sonuçları kodunu kopyalıyoruz.



12-) Arama sonuçları kodumuzu kopyaladıktan sonra aşağıdaki resimdeki gibi işlemlerimizi yapıyoruz. Kodumuzu yapıştırırken HTML kısmının seçili olduğundan emin olunuz, ayrıca kalıcı bağlantınızda resimdeki gibi gözükmeli, bu sayfayı arama isminde açmalısınız, çünkü daha önce ayarladığımız Arama sonuçları ayarlarında bu yolu göstermiştik.Sayfamızı resimdeki gibi ayarladıktan sonra kaydetmeyiniz, aşağıda nasıl kaydedeceğinizi göstereceğim.



13-) Şimdi geldi sayfamızı kaydetmeye.Sayfamızı normal olarak kaydediyoruz. Eğer menülerinizi otomatik olarak kullanıyorsanız menülerinizde Arama isminde link oluşacak. Bu durumda ziyaretçi bu Arama bağlantısına tıklarsa boş bir ekranla karşılaşacak. Bunu istemiyorsanız menülerinizi otomatik olarak değil de manuel oluşturmanız gerekir.

14-) Evet geldik son işlemimize ve en önemli işlemimize. Arama sonuçları şuan için içeriğimizin içinde çıkacaktır isterseniz deneyebilirsiniz, ama bir sorun olacaktır, eğer kullandığınız temanın yazı alanı benimki gibi fazla geniş değilse ve sidebar`ınız sağda ise ya sidebar`ın altına girecek ya da üstüne binecektir.

Bu sorunumuzu vereceğim CSS kodları ile halledeceğiz. İlk önce FTP`den temamızın klasörünü açıp style.css dosyasını düzenle diyoruz ve aşağıdaki kodları  #header bölümüne ait kodların bittiminden hemen sonra yapıştırınız.

    #cse-search-results iframe { margin:20px; width:520px; }


Burada width:520px dediğimiz alan yazılarınızın bulunduğu alanın genişliğidir, genelde #content alanıdır. Siz kendi temanızın yazı alanı genişliğine göre bu ayarlamayı yaparsınız. margin:20px ise yazı alanınız ve arama sonuçlarının arasında boşluk verecektir. Bu boşluk hem üstten, hem alttan, hem sağ hem de soldan olacaktır. İsterseniz kaldırabilirsiniz ama tasarımınızda daha güzel durması açısından faydalıdır.



Evet arkadaşlar bu paylaşımızın sonuna geldik, umarım işinize yaramıştır. Lütfen yorumlarınız ve yaşadığınız problemleri belirtiniz. Bir blogcunun en çok hoşuna giden kazandığı paradan ziyade, yazılarına aldığı yorumlardır.

Başka bir paylaşımda buluşmak dileğiyle.

10 yorum:

  1. süper hemen uygulayacam

    YanıtlaSil
  2. eyvallah hocam, fazla uğraşmadım googleda aradım direk sitene geldim hallettim

    YanıtlaSil
  3. yalnız header diye bir bölüm yok style.css içinde

    YanıtlaSil
  4. content bölümü de olabilir ya da post

    YanıtlaSil
  5. Aga Wordpress için bölümünü yaptım eyv.Fakat ben söyle düsünüoyorum.Bi index.html bi sonuc.html dediğin şeyleri bunlara uyarladığım zaman bembeyaz gözüküyor.İndex.html den aratıorum sonuc.html bembeyaz gözüküyor wordpress de ise sorun yok oluyor napmalıyım?

    YanıtlaSil
  6. eyvallah saolasında ben bunu ayrı 2 html sayfasına koyunca sonuc html sayfası boş gözüküyor nasıl ayarlıcaz bunu?

    YanıtlaSil
  7. Çok sağolasın. Emeğine Sağlık.

    YanıtlaSil
  8. Merhaba.. Teşekkürler. Çok faydalı bir paylaşım oldu. Uyguldık:)

    YanıtlaSil
  9. evet güzel anlatım sitemdee uyguladım eline sağlık

    YanıtlaSil
  10. muzaffer_senturk@mynet.com14 Şubat 2013 19:19

    çok güzel ellerinize sağlık, fakat sonuçlar sitenin içeriklerini arasa daha iyi olmazmı bu konuda yardımcı olabilecek kimse varmı acaba?

    kısaca sormak istediğim
    sayfamda arama yapabiliyorum ama google da ne çıkıyorsa aynı sonuçla karşılaşıyorum

    YanıtlaSil

Blogger tarafından desteklenmektedir.