Blogger'a Google Özel Arama Ekleme

Bazı sitelerin site içi arama özelliği olarak Google'ın özel aramasını kullandığını görmüşsünüzdür. Burada anlatacağım işlem klasik şekilde kodu al yapıştır olmayacak. Bir kaç hafta önce, forumdan birisi blogunda Google'ın arama kutusunu kullanmak istemediğini ve kendi arama kutusuna Google arama özelliğini nasıl entegre edebileceği, tarzı bir soru sormuştu. Bunun üzerine ben de bu konu üzerine biraz araştırma yapıp nasıl yapabileceğimi öğrenmiştim. Şimdi bu blog üzerinde yukarıdaki arama kutusuna Google arama özelliğini entegre edeceğiz.

Öncelikle bu adrese(https://cse.google.com/cse/all) gidelim. Add butonuna tıklayalım.

blog'a google arama kutusu ekleme

Arama yapılacak siteler kısmına site urlsini şekildeki gibi ekledikten sonra aşağıdaki Oluştur butonuna tıklayın.
blogger arama kutusu için blog adresi yazılması
Özel arama motorumuzu oluşturduk. Şimdi karşımıza çıkan bölümden Kodu Al butonuna tıklayarak kodu kopyalayın. Daha sonra ise Blogger paneline girin ve Sayfalar bölümünden Arama(isteğe bağlı) isminde yeni sayfa oluşturun. Aşağıda olduğu gibi HTML görünümünde olacak şekilde sayfaya kodu yapıştırın. Ancak kodda küçük bir değişiklik yapmalıyız. <;gcse:search>;<;/gcse:search>; yerine <;gcse:searchresults-only>;<;/gcse:searchresults-only>; kodunu yapıştırın ve sayfayı öyle yayınlayın.

google özel arama kutusunun sayfa eklenmesi

Buradaki işlemimiz bitti. Şimdi sıra geldi arama kutumuza Google aramayı entegre etmeye. Arama kutusu kodumun ilk hali aşağıdaki gibi.
<form action='/search' id='search-form' method='get' target='_top'>
 <input id='search-text' name='q' placeholder='Arama Yap' type='text'/>
 <button id='search-button' type='submit'>
  <i class="fa fa-search" aria-hidden="true"></i>
 </button>
</form>
Öncelikle action içerisine oluşturduğumuz arama sayfasının url adresini /p/arama.html olacak şekilde ekleyelim. Form etiketi içerisine ekleyeceğimiz kod ise aşağıdaki gibidir.
<input name='cx' type='hidden' value='arama motoru kimliği'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='UTF-8'/>
Arama motoru kimliği yerine size verilen koddaki bu kısmı kopyalayın yapıştırın.

arama motoru kimliği yerine verilen kodun eklenmesi
Gerekli eklemeleri yaptıktan sonra arama kutusu kodumun son hali:
<form action='/p/arama.html' id='search-form' method='get' target='_top'>
  <input name='cx' type='hidden' value='arama motoru kimliği'/>
  <input name='cof' type='hidden' value='FORID:10'/>
  <input name='ie' type='hidden' value='UTF-8'/>
  <input id='search-text' name='q' placeholder='Arama Yap' type='text'/>
  <button id='search-button' type='submit'>
   <i class="fa fa-search" aria-hidden="true"></i>
  </button>
</form>
Yukarıdaki kodu eski arama kutusu kodunun yerine yapıştırıp, kaydediyorum. Şimdi bir arama denemesi yapalım. Arama yapınca aşağıdaki gibi açılır bir pencerede arama sonucu çıktı karşımıza.
Ancak benim yapmak istediğim arama sonuçlarının arama sayfasına gömülü şekilde çıkması. Bunu yapmak için kodu aldığımız yere tekrar giriyoruz resimde yapıldığı gibi Görünüm ve tarz bölümüne girip İki sütun düzenini seçip kaydediyoruz.

google özel arama kutusu görünüm ayarları
Tekrar arama yaptığımızda istediğimiz şekilde arama sonucuna ulaşabiliyoruz.

google özel arama kutusunun blog üzerinde önizlemesi
Umarım yardımcı olmuşumdur. Eğer takıldığınız bir durum olursa yorum kısmından belirtmeyi unutmayın. Kolay gelsin.

2 yorum: