Cara Mengintegrasikan Kotak Pencarian Dengan Hasil Pencarian dari Google Custom Search

Santos el Salam

3 Februari 2020

Setiap fitur kelengkapan pada blog tentunya mempunyai fungsi penting nan diperlukan sehingga mesti diperhatikan keberadaannya. Kotak pencarian atau penelusuran (Search Box) adalah satu di antaranya. Mesin untuk mencari sesuatu di dalam isi blog ini memang cukup penting keberadaannya, karena fungsinya untuk memudahkan pengunjung jika hendak mencari suatu bahasan, baik itu berhubungan dengan artikel yang sebelumnya dia baca atau ingin mengetahui lebih lanjut bahasan apa saja yang ada di blog kita dengan melihat beberapa konten isi blog kita. 

Banyak tutorial cara membuat kotak pencarian untuk bisa dipasang di blog dengan berbagai bentuk tampilan disesuaikan dengan selera anda. Atau mungkin bagi anda pemakai template blog tertentu, sudah tersedia fitur pencarian ini sehingga anda tidak perlu repot-repot membuatnya secara mandiri.

Namun selain kotak pencarian hasil buatan dimana banyak dibagikan tutorialnya, ada satu fitur penelusuran dari Google yang bisa dipasang di blog kita yakni Google Custom Search (GCS) atau Google Custom Search Engine (CSE). 

Dengan beberapa kelebihannya, banyak blogger menyarankan penggunaan fitur google pencarian khusus ini. Di antara beberapa kelebihannya yaitu karena hasil pencarian lebih relevan dan lebih lengkap dibanding fungsi dari pencarian biasa.

Terlebih lagi bagi Publisher Google AdSense, anda juga dapat dengan mudah memonetasi blog anda dengan kotak penelusuran khusus ini. Nantinya, iklan AdSense akan ditampilkan di halaman hasil pencarian saat terbuka. Jika anda tertarik hendak membuat GCS ini, silahkan anda bisa kunjungi di https://cse.google.com/cse/. 

Bagi yang sudah membuatnya, mungkin ada yang kurang sreg dengan tampilan kotak penelusuran GCS saat telah dipasang. Entah itu berhubungan dengan template atau karena hal lain, biasanya tampilannya tidak rapi sehingga kurang sedap dipandang. Di sisi lain, kita mempunyai kotak penelusuran lain dari template atau buatan dengan tampilan keren tapi hasil pencariannya terlalu singkat, monoton dan biasa saja.

Oleh karenanya, pada postingan kali ini saya akan berbagi pengetahuan dari apa yang baru saja saya praktekkan yaitu cara mengintegrasikan Kotak Pencarian dengan Hasil Pencarian dari Google Custom Search (GCS). 

Untuk mengikuti tutorial ini, saya asumsikan bahwa anda sudah membuat dan memasang widget Google Custom Search Engine (CSE) di Blog anda. Sebetulnya memang telah tersedia mesin pencari dengan tampilan standar tertentu dari kita mendaftar GCS ini. Namun jika anda tidak begitu menyukai tampilan kotak penelusuran dari GCS ini, anda bisa mengintegrasikannya dengan kotak pencarian lain di template blog anda atau widget kotak penelusuran anda.

Jika sudah terintegrasi, anda bisa menghapus widget (kotak telusur) dari Google Custom Search yang terpasang sebelumnya karena fungsinya sudah tergantikan oleh kotak pencarian yang sudah terintegrasi.

Sebagai buktinya, anda bisa melihat kotak penelusuran di blog saya. Kotak penelusuran pada blog saya ini memang murni bawaan template, tapi ketika anda mengetikkan keyword pencarian di fitur tersebut, hasil pencarian akan beralih kepada hasil pencarian dari Google Custom Search.

Hasil pencariannya pun menjadi lebih lengkap, bisa dimonetisasi, dan kotak pencarian tetap terlihat keren karena sesuai dengan keinginan. Hal ini juga berlaku bagi kotak pencarian dari tutorial yang ada. Bagaimana cara mengintegrasikan atau dengan kata lain menambahkan fungsi Google Custom Search pada Search box?, ikuti langkah-langkah berikut ini: 

1. Buka akun blogger anda. 

2. Pilih tema klik edit html. 

3. Untuk jaga-jaga kalau error silahkan backup terlebih dulu template. 

4. Cari kode html dari kotak penelusuran untuk diintegrasikan dengan hasil pencarian dari GCS. 

5. Jika sudah ketemu, langkah berikutnya yaitu mengeditnya. 

Masing-masing kode untuk search box ini memang berbeda-beda, tetapi susunan kode pembuatannya hampir sama sehingga bisa dipahami dengan mudah untuk mengeditnya. Sebagai contoh saya tampilkan punya saya berikut ini. 

Beberapa kode untuk search box ini mungkin ada yang lebih panjang, namun fungsi utamanya sama sehingga anda tidak perlu bingung dibuatnya. Perhatikan kode pada template saya di bawah ini

<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></form></div>

• Perhatikan yang ditandai warna merah "<form action='/search?q='>", atau kode sejenis pada blog anda mungkin seperti ini:

<form action='http://www.google.com/search' method='get' target='_blank'>

  

Ganti kode tersebut dengan kode berikut ini:

<form action='URL postingan Search Results' id='cse-search-box'>

Keterangan: Ganti tulisan berwarna merah dengan URL postingan hasil pencarian (pada halaman statis) dari Google CSE yang sudah terpasang di blog anda. 

• Setelah itu, tambahkan lagi tepat di bawahnya kode berikut ini:

<input type='hidden' name='cx' value='partner-pub-008XXXXXXXXXXXXXXXXXX:xxxxxxxxxx' />

<input type='hidden' name='cof' value='FORID:10' />

<input type='hidden' name='ie' value='ISO-8859-1' />

Keterangan: ganti tulisan ditandai warna merah dengan Search engine unique ID (GCS) anda. Untuk mencarinya buka kembali https://cse.google.com/cse/ dan lihat pada pilihan dasar-dasar:

• Sehingga setelah semua ditambahkan, hasil lengkapnya menjadi berikut ini:

<div class='serching'><form action='https://bloganda.com/p/hasil-pencarian_65.html' id='searchform' target='_blank'>

<input name='cx' type='hidden' value='008XXXXXXXXXXXXXXXXXX:xxxxxxxxxx'/>

<input name='cof' type='hidden' value='FORID:10'/>

<input name='ie' type='hidden' value='ISO-8859-1'/><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></form></div>

6. Silahkan simpan kembali template anda. 

Sekarang kita bisa lihat hasilnya dengan mengetesnya pada kotak pencarian. Hasil pencarian pun telah terintegrasi dengan hasil pencarian dari Google Custom Search.

Oya karena fungsinya sudah tergantikan, anda bisa hapus saja widget search box dari GCS yang sebelumnya terpasang di blog anda. Demikian. Selamat mencoba. 

Labels: Blogging

Thanks for reading Cara Mengintegrasikan Kotak Pencarian Dengan Hasil Pencarian dari Google Custom Search. Please share...!

Facebook

Twitter