Membuat Costum Search Google (CSE) Overlay

nah pada topik kali ini kita akan membahas tentang Membuat Costum Search Google (CSE)  Overlay pada blo, tapi sebelumnya Gimana kabarnya pemalas? seperti biasakan baik-baik saja hahaha,
 cse atau costum search engine adalah form search yang bisa kita atur sendiri menurut tampilannya, nah disini kami akan mengajarkan bagaimana cara membuat costum search secara overlay, sebelumnya masih bnyak sebenarnya modelnya antara lain:

  1. Overlay  
  2. Two page
  3. Full width
  4. Two column 
  5. Compact
  6. Results only
  7. Google hosted

nah disini kami akan mencoba membantu kawan-kawan membuat costum google search ini tapi, kami di sini hanya mencoba membrikan anda sedikit cara membuat CSE Overlay

sebelumnya CSE Overlay itu adalah costum search enginge yang jika ada orang mencari dari search engine tersebut akan muncul  popup yang isinya hasil dari seach web yang anda masukkan sebelumnya

kalau yang bawaan google itu adalah Full Width jadi setelah kita search hasil pencarian keluar pada page tersebut

bagaimana cara membuat CSE Overlay?
 Tahap pertama adalah silahkan buka alamat ini dulu
 https://www.google.com/cse/
setelah anda membuka ini silahkan buat dulu search engine baru dengan mengeklik menu New search engine
setelah itu isikan from yang ada:
Sites to search - di isi alamat web anda tanpa https://
Language - pilih indonesia aja
Name - ini muncul kalau anda sudah memasukan alamat web
kemudian klik create
nah setelah itu  pilih  Modify your search engine - control panel << klik control pannel
di situ anda bisa mengedit search tersebut, mau di tampilkan disertai gambar atau tidak dll, kalau tidak mau mengedit dan ingin secara default maka langsung aja ke tahap berikutnya

pada pilihan Edit Search Engine pilih Look and feel nah jika sudah muncul seperti gambar di bawah ini klik overlay dan pilih save get code


 Costum Search Google (CSE)  Overlay
 Costum Search Google (CSE)  Overlay

nanti akan muncul sebuah code yang nanti bisa anda simpan di blog anda, jika anda merasa kebingungan codenya seperti apa maka saya akan mencontoh kan code tersebut, dan mungkin bisa anda salin, tapi dengan ketentuan id CSE nya nanti anda ganti sesuai id CSE anda


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

009281762943442366717:-pay_udzxk4 yang berwarna merah seperti code disamping bisa anda ganti dengan id anda, ini adalah id saya yang saya target kan ke google.com

Hasil nya?
untuk hasilnya seperti search engine yang ada pada bllog kami

0 comments:

Posting Komentar