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



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

15 komentar

  1. Custom search engine memang bagus sob , widgetnya ringan dan berguna sekali untuk mempermudah pengunjung yang mencari info yang relevan dengan isi web kita. . .

    BalasHapus
  2. kalo pake search dari google apa mudah pageone??

    BalasHapus
    Balasan
    1. Iya gan, bisa jadi ini salah satu cara biar page one :D

      Hapus
  3. asik, Saya Praktekin ah
    Lumayan Form Google nya, Terima Kasih atas Post nya
    Saya Jadi Tau :D

    BalasHapus
    Balasan
    1. IYa gan, silahkan praktekkin, kalo ada masalah monggo komentar :)

      Hapus
  4. di blog saya sudah ada gan, terimakasih atas infonya,,
    silahkan bisa berkunjung: http://oneszaccess.blogspot.com/

    BalasHapus
    Balasan
    1. Iya gan, bagus kalo gitu :D thank's sudah mampir dimari..
      Pasti saya kunjugi ko.

      Hapus
  5. Balasan
    1. iya gan monggo silahkan dicoba :) semoga berhasil.

      Hapus
  6. pesan ini kenapa Gan >>> Your HTML cannot be accepted: Tag is not closed: CENTER Dismiss

    www.almunauwarah.blogspot.com

    www.al-mishri.blogspot.com

    www.spiritpemuda.blogspot.com

    BalasHapus
  7. Kalo coding seprti bikin mumet kepala hehe

    Oya biar CSE memebntuk kolom panjang gimana agar tampak keren ?

    Jilbab

    BalasHapus
    Balasan
    1. Bisa diedit bagian formnya mas, edit CSSnya saja bisa mas diatur jadi kolom panjang :)

      Hapus
  8. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon