Membuat Memodifikasi Form Google Custom Search Engine Untuk Blog/Web Sendiri CSE

Satria Perwira    11/29/2014    Article , Trixs Blogging   

Rafi Orilya, selamat pagi sobat blogger gimana kabarnya? masih semangatkan hari ini? kemarin ada yang minta dibuatin posting tentang search engine dari google atau biasa dikenal Google CSE.

Tapi sebelumnya apa itu Google CSE (Custom Search Engine)?
Google Custom Search Engine adalah suatu widget search box yang dibuat oleh google yang dapat dipasang di blog/website anda dan berguna sebagai mesin pencarian pada blog anda. 

Perbedaan dengan search engine standar dengan buatan sendiri apa?
1. Tampilannya hasil pencarian seperti pencarian google sesungguhnya.
2. Hanya menampilkan link dari semua post di blog kita sendiri.
3. Dapat ditambahkan link web/blog lain dari hasil pencarian.
4. Pencarian yang relevan
dll cobain aja sendiri

TAHAP 1 adalah bagaimana pasang Google CSE itu?
#Login ke akun google anda terlebih dahulu#
1. Buka alamat Google CSE [KLIK DISINI]
2. Pilih Create a custom search engine
3. Nah di form "Situs yang akan ditelusuri" isikan NAMA BLOG/WEB ANDA

4. Klik BUAT

5. Pilih Get Code
#nah keluar scriptnya tuh..

Nah disini saya akan berikan 2 cara memasang widget ini di blog agar lebih menarik, sesuai dengan apa yang anda suka.

Cara pertama, cara memasang pada side bar di bagian side bar/widget tata letak.
1. Masuk ke blogger => Tata Letak => Add HTML/Javascript => Masukkan script tadi => SAVE

silahakan coba dan lihat hasilnya.
Jikalau anda suka berarti anda telah selesai memasang Google CSE.

____________________________________

Namun ada cara lain yaitu mengubah formnya sesuai dengan form search box kita sendiri,
namun hasilnya seperti Google CSE itu.
Berikut langkahnya :

BUAT LAMAN HASIL PENCARIAN
1. Masuk ke blogger => Laman => Tambah Laman => Pilih HTML (Bukan Compose)
2. Copy code ini :

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
table {
margin:-1 auto;
max-width: 100%;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '006869431243861080366:shstt_7wonw', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
     customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
    customSearchControl.draw('cse');
<?php $qu = (isset($_GET["q"]))?$_GET["q"]:'PHP'; ?> // php $_GET to capture the search keyword
    customSearchControl.execute('<?php echo $qu; ?>');
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }
    var urlParams = parseParamsFromUrl();
    var queryParamName = "q";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>
<script>
  (function() {
    var cx = '006869431243861080366:shstt_7wonw';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<style>
table {
margin:-3 auto;
max-width: 100%;
}
</style>
<br />
<div id="cse" style="margin-top: -140px; min-height: 300px; width: 100%;">
<gcse:search></gcse:search>
<br />
<center>
Please wait until show the results, thank's.. :)<br />
Searching script by ROG-TEAM 2014<br /><br />

* Ubah bagian code yang berwarna biru tebal, sesuai dengan script yang tadi didapat dari get code anda.

3. Simpan Laman

PENYETELAN KE FORM PENCARIAN

1. Masuk ke blogger => Template => Edit HTML
2. Cari html bagian search box anda.
3. lihat bagian code FORM. silahkan sesuaikan formarnya seperti berikut :

<form action='http://rafi-orilya.blogspot.com/p/pencarian-rafi-orilya.html' class='searchform' method='get'>
  <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' style='width: 86%;color: #369fcf;' type='text' value='Search here'/>
  <input class='searchsubmit' type='submit' value='Search'/>
</form>

link action diatas merupakan laman yang dibuat tadi sebagai hasil dari pencarian di searchboxnya.

4. Nah masih di script diatas perhatikan namenya, name script search box anda harus berisi huruf "q"
5. Yang lain ngga usah diubah. Inget cuma ubah bagian action, sama name.
6. Save template

Coba lihat hasilnya.
Semoga sukses, apabila ada error atau gagal silahkan kirimkan komentar kepada kami. Segera kami perbaiki..
Sampai disini dulu untuk postingan kali ini semoga bermanfaat.

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin