Cara Memodifikasi Search Box Pada Template Dengan Menambahkan Fungsi Custom Search Engine

Kembali lagi dengan saya, kali ini saya akan membagi tutorial bagaimana Cara Mudah Memodifikasi Search Box Pada Templat Dengan Menambahkan Fungsi Custom Search Engine.

untuk kalian yang pusing pusing gimana cara nya memodifikasi custom search engine di tutorial lainnya, semoga sobat bisa mengikuti langkah langkah yang saya beri hehe. selain menambah ke-profesionalitas seorang blogger dalam mengelola blog, search engine google juga bisa lebih cepat dan lebih akurat mencari keyword yang sedang dicarinya, haha pusing ya :D langsung saja kita ke tkp

1. kunjungi dulu google custom search https://cse.google.com/cse/create/new

2. jika belum login ke google, pilih Create a Custom Search Engine. 

3. isi url blog kalian, pilih bahasa, jika sudah tekan CREATE

4. jika berhasil, klik GET CODE 

5. lalu copy codenya, dan simpan dulu di notepad, nanti akan kita gunakan

lalu ganti kode yang diwarnai dibawah ini dengan <<gcse:searchresults-only></gcse:searchresults-only>

<script> (function() { var cx = '014108320991409433125:evpwluugoug'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchresults-only></gcse:searchresults-only>

lalu tambahkan kode ini diatas kode yang sudah kalian dapat di CSE tadi

<div id="gcsengine"> </div> <script> var gcseDiv = document.getElementById('gcsengine'); gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>' </script>

dan hasilnya akan seperti ini

<div id="gcsengine"></div> <script> var gcseDiv = document.getElementById('gcsengine'); gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>' </script> <script> (function() { var cx = '014108320991409433125:evpwluugoug'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchresults-only></gcse:searchresults-only>

lalu buat laman pada blog caranya, LOGIN BLOGGER > PILIH LAMAN > BUAT LAMAN BARU > PILIH MODE HTML DAN PASTE KODE DIATAS, LALU PUBLIKASIKAN.

Catatan : laman kasih dengan judul "pencarian" maka url laman akan menjadi bloganda.com/p/pencarian.html  

kembali lagi ke basic, klik Search Engine ID. copy dan simpan dulu di Notepad.

lalu pilih menu ADVANCE dan ganti Search Engine Encoding nya ke Wes European latin 1. jika sudah, klik UPDATE untuk save.

6. selanjutnya TEMPLATE > Edit HTML > Cari HTML Dari search box agan. biasanya diawali dengan <form action='

lalu tambahkan kode dibawah ini di dalam kode html search box sobat,
catatan : kode berwarna merah ganti dengan id CSE yang sudah sobat copas di Notepad tadi,

<input type='hidden' name='cx' value='partner-pub-004846510630198233812:gmb5qovgjko' /> <input type='hidden' name='cof' value='FORID:10' /> <input type='hidden' name='ie' value='ISO-8859-1' />

dan hasil nya akan seperti ini pada blog saya

perhatikan kode berikut pada blog anda

<form action='/search' class='searchform' method='get'>

kode warna merah ganti dengan url post blog anda tadi bloganda.com/p/pencarian.html

hasilnya seperti ini

<form action='bloganda.com/p/pencarian.html' class='searchform'>

untuk LIVE DEMO nya silahkan Search artikel yang sobat cari blog ini, search box nya ada disamping kanan sejajar dengan menu drop down :D


nah itu dia tutorial memasang custom search engine pada blog. Jika sobat masih bingung? ingin ada yang ditanyakan? silahkan sematkan pertanyaan sobat di kolom komentar, secepatnya akan saya balas :D

ayo ngeblog :D