Google Custom Search Engine di Blog

Google Custom Search Engine di Blog adalah widget kotak carian dalam sesebuah laman contohnya blog. Ianya membantu memudahkan para pengunjung blog atau website untuk mencari apa yang mereka perlukan dalam blog kita.

Sangat disarankan untuk menggunakan search box khusus Google di blog, kerana hasilnya akan lebih relevan dan lebih lengkap dibanding fungsi pencarian biasa. Lebih-lebih lagi jika korang merupakan Publisher Google AdSense. 

Cara Membuat Dan Memasang Widget Google Custom Search Engine Di Blog

Mendaftar Google Custom Search Engine 

1. Daftar Google Custom Search --> https://cse.google.com/cse/  ( ianya percuma )

2. Klik Create a custom search engine

  

3. Nanti akan keluar macam dibawah ni.

 

4. Korang isi lah URL Blog , Languange , Name of the search engine . Dah selesai isi semua tu, klik Create. Akan keluar macam kat bawah ni.

 

5. Korang klik Get code , kemudian copy semua code dalam kotak tu.

  <script>
  (function() {
    var cx = '010345145858163824997:zgawydl78ga';
    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:search></gcse:search>

6. Gantikan code yang di highlight tu dengan code bawah ni

Ini sesuai untuk semua layout, seperti <gcse:search>, <gcse:searchbox>, <gcse:searchresults>, atau <gcse:searchbox-only>

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

 7. Dan hasilnya, akan jadi macam kat bawah ni.

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

Oh ya, yang Zati bold kan tu pastikan korang tukar dengan korang punya ye. Boleh tengok dekat code yang mula-mula korang copy tu. Pastikan betul ye.

Cara Pasang Widget GCSE di Blog

1. Blogger -> Layout -> HTML/Javascript -> copy dan paste code yang korang dah siap ubah tadi. Kemudian save. 
2. Sesetengah template tak sesuai dengan code yang dah diubah ni. Kalau macam tu, korang just copy and paste original code tu okay , macam NO5 tu.
SELAMAT MENCUBA