Google Custom Search Box dalam Fungsi Pencarian

Unknown

Tips & Trik Blog

Jumat, 18 Juli 2014

19 Komentar

Erikplus ~ Sebenarnya membuat google custom search box di blog sangatlah simple dan cukup gampang, hanya ketelitian kita saja. Tutorial ini saya dapat dari blog Tutornesia, klik tautan ini untuk melihat postingan TutorNesia.

01. Untuk memulai tentu anda harus masuk DISINI. setelah masuk anda akan melihat gambar dibawah ini. Silahkan klik add untuk membuat Google Custom Search Box

02. Silahkan isi url blog anda, pilih bahasa dan isi nama blog anda lalu klik buat.

 03. Setelah klik buat maka selanjutnya akan terlihat gambar seperti dibawah ini. Silahkan klik (edit mesin telusuri) dan bawahnya akan tampil menu (tampilan dan nuansa). silahkan klik tampilan dan nuansa.



04. Setelah klik tampilan dan nuansa, maka akan terlihat gambar seperti dibawah ini.

05. Silahkan pilih "hasil saja" dan klik simpan dan dapatkan kode, setelah dapatkan kode silahkan simpan dulu di notepad. kodenya akan berupa seperti bawah ini.

<script>
  (function() {
    var cx = '016542226447493825417:l_ogga9r89i';
    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:searchresults-only></gcse:searchresults-only>

Silahkan publish kode yang anda dapatkan tadi dibagian postingan statis page. Silahkan beri judul misalnya Search Result atau Hasil Pencarian. (pada mode HTML bukan pada Compose). kemudian publish postingan Anda dan catat URL postingan Search Result tersebut.

06. Setelah melakukan langkah diatas sekarang masuk ke Template >> Edit HTML >> cari kode HTML dari Search Box. Sebagai contoh Search Box blog maskolis, kode awalnya seperti ini:

<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUt8D4Z6VAA_oOvKfqMIuH8hSztAYrDUqqOT2ynI18iEd7f4xITFjg9i6GjjcezBHVywOwmOaucqyEph9tTsKP1mYAOSMO5wqgUJQlia1CNpfbZyqzKIRHKx7omgtwqWFVg8CM5V-qWI/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>

Yang perlu anda perhatikan adalah kode ini.

<form action='/search' class='searchform' method='get'>

Dan ganti dengan kode ini

<form action='MASUKAN URL LAMAN TADI' id='cse-search-box'>

Nah, pada template maskolis biasanya pada form akan ada class='searchform' ini adalah id mengatur search box, jika ada kode tersebut maka anda tinggal tambah saja pada bagian form action dan akan tampak seperti dibawah ini.

<form action='MASUKAN URL LAMAN TADI' class='searchform' id='cse-search-box'>

Kemudian tambahkan kode di bawah ini setelah kode diatas dan penampakan keseluruhan akan seperti dibawah ini.

<form action='MASUKAN URL LAMAN TADI' class='searchform' id='cse-search-box'>
<input type='hidden' name='cx' value='partner-pub-KODE SEARCH ENGINE' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />

Pada KODE SEARCH ENGINE silahkan lihat pada langkah kelima tadi yang saya beri garis bawah, itu adalah kode search engine atau buka notepad yang anda simpan dan lihat kodenya.

Saya akan memberi contoh, coba lihat kode asli search box dibawah ini.

<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUt8D4Z6VAA_oOvKfqMIuH8hSztAYrDUqqOT2ynI18iEd7f4xITFjg9i6GjjcezBHVywOwmOaucqyEph9tTsKP1mYAOSMO5wqgUJQlia1CNpfbZyqzKIRHKx7omgtwqWFVg8CM5V-qWI/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>

Dan jika ditambahkan kode Google Custom Search Box akan terlihat seperti ini.

<div class='menusearch'>
<form action='MASUKAN URL LAMAN TADI' class='searchform' id='cse-search-box'>
<input type='hidden' name='cx' value='partner-pub-KODE SEARCH ENGINE' />
<input type='hidden' name='cof' value='FORID:10' />
<input type='hidden' name='ie' value='ISO-8859-1' />
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUt8D4Z6VAA_oOvKfqMIuH8hSztAYrDUqqOT2ynI18iEd7f4xITFjg9i6GjjcezBHVywOwmOaucqyEph9tTsKP1mYAOSMO5wqgUJQlia1CNpfbZyqzKIRHKx7omgtwqWFVg8CM5V-qWI/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>

Kini anda tinggal simpan dan lihat hasilnya.

Terima kasih Kepada Tutornesia & Kompi Ajaib