Friday, December 2, 2016

Cara Mudah Memodifikasi Search Box Pada Templat 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
modif search box
GOOGLE SCE


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. 


SCREENSHOOTAN
GOOGLE SCE


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

4. jika berhasil, klik GET CODE 
membuat sce
membuat sce
5. lalu copy codenya, dan simpan dulu di notepad, nanti akan kita gunakan

membuat sce
membuat sce

Baca juga : Cara Mudah Memasang sistem Komentar Disqus pada blog


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 dibawah 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.
membuat sce
membuat sce

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

membuat sce
sce


6. selanjutnya TEMPLATE > Edit HTML > Cari script 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
membuat sce1
membuat sce

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
KOMENTAR DISINI GAN!!

5 komentar