Cara Modifikasi Kotak Penelusuran Blog Dengan Google Custom Search Engine (CSE)

Bicara mengenai kotak penelusuran di blog, atau kotak pencarian, tentu itu sangat berguna untuk pengunjung blog agar pengunjung bisa dengan mudah mencari apa yg ingin dicarinya di blog yg dikunjunginya.

Bagi para blogger, sudah pasti masing-masing di blog nya sudah memiliki kotak penelusuran nya sendiri, tapi taukah anda, jika dari kotak penelusuran tersebut juga bisa mendapatkan penghasilan bagi pemilik blog?

Penghasilan tersebut terhitung dari setiap per pengunjung blog mencari apa yg ingin dicari di blog tersebut dengan menggunakan kotak penelusuran yg ada di blog yg dikunjunginya.

Di sini saya akan membagikan tutorial tentang Cara Modifikasi Kotak Penelusuran Blog Dengan Google Custom Search Engine (CSE)

Bagi yg memiliki blog, dan ingin memodifikasi kotak penelusuran blognya dengan google custom search engine, bisa ikuti langkah-langkah di bawah ini :

1. Buat Google Custom Search Engine nya terlebih dahulu di dashboard akun Adsense

2. Jika belum tau gimana cara buatnya, bisa lihat artikel saya yg sebelumnya tentang

Cara Membuat Google Custom Search Engine (CSE) di Blog

3. Jika Google Custom Search Engine sudah dibuat, maka akan diberikan kodenya, dimana kode tersebut dibagi menjadi 2 bagian yaitu, kode untuk kode kotak telusur & yg 1 lagi kode utk hasil penelusuran, kurang lebih seperti gambar di bawah ini

4. Copy & simpan terlebih dahulu kedua kode tersebut di file yg bisa dibuat di aplikasi File Manager

5. Buka dashboard blogger, lalu klik Halaman >> Halaman Baru

6. Setelah laman baru terbuka, copy kode yg utk hasil penelusuran tadi dan paste di bagian HTML ( Buka Compose)

7. Selanjutnya buat judul halaman nya, lalu klik Publikasikan

8. Setelah di publikasikan, klik Lihat agar bisa disalin alamat URL nya , dan simpan dulu salinan alamat URL halaman tersebut

9. Kembali ke dashboard blogger, klik Tema >>

Edit Tema

10. Copy kode di bawah ini, lalu Paste di atas atau sebelum </head>

<b:if cond='data:blog.url == &quot;https://www.ALAMATBLOG.com/p/SEARCH_CSE.html&quot;'>
<style type='text/css'>
.post-body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTnBezYR_EVLNfhSXuVItAFf5ptZc52MG4LrFW0zt-7YAyzQfCcxoIAxk_L-ntpYSX40bSpy2JV4oycV32SG-TxTOBrIwYyYsQWdyHPHnAKJ_8DLJUwHv0pMLVMH2jDlnKJX1-ZfrXyVI/s1600/d60eb1v-79212624-e842-4e55-8d58-4ac7514ca8e4.gif)50% 10% no-repeat!important;padding:60px;margin:0}
#gcse-searchresults-only{margin-top:-70px}
</style>
</b:if>

Ganti https://www.ALAMATBLOG.com/p/SEARCH_CSE.html dengan salinan alamat URL Halaman yg dibuat diawal tadi

10. Cari kode yg berhubungan dengan kotak penelusuran blog , biasanya ditandai dengan adanya kode "search" , kalau di template saya kodenya seperti ini

<form action='/search' id='search-form' method='get' role='search'>

Kemudian ganti '/search' nya menjadi alamat URL Halaman yg dibuat diawal tadi, maka jadinya akan seperti ini

<form action='https://www.ALAMATBLOG.com/p/search_CSE.html' id='search-form' method='get' role='search'>

11. Copy kode di bawah ini, lalu paste tepat di bawah nya, maka jadinya seperti ini

<form action='https://www.ALAMATBLOG.com/p/search_CSE.html' id='search-form' method='get' role='search'>>
<input type='hidden' name='cx' value='partner-pub-012345678901234:abcdefghijklm' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />

Ganti "012345678901234:abcdefghijklm" dengan ID Custom Search Engine, bisa juga dilihat dari kode Custom Search Engine yg dihalaman baru yg dibuat diawal tadi

12. Yg terakhir, klik Simpan Tema

Selesai.
Gimana?
Memang sedikit agak ribet, tapi saya rasa penjelasan saya tentang Cara Modifikasi Kotak Penelusuran Blog Dengan Google Custom Search Engine (CSE) sudah cukup jelas & mudah-mudahan bisa dimengerti.