Cara Kostum Search Box dengan Google Custom Search Engine

proBlogiz

Tutorial blog kali ini tentang Cara Kostum Google Custom Search Engine pada Blogger. Google Custom Search Engine pada Blogger sangat diperlukan tentunya, namun kadang kita ingin membuat Search Box Default atau search box bawaan template blogger berfungsi layaknya Google Custom Search Engine. Untuk membuat Search Box Default berintegrasi dengan Google Custom Search Engine, ada tip dan trik yang harus dilakukan.

Ada dua bagian untuk mengintegrasikan Google Custom Search Engine pada Search Box :

Membuat Halaman Hasil Pencarian

Buatlah sebuah halaman sebagai tempat untuk menampilkan hasil pencarian. Bisa berupa halaman artikel atau halaman statis (pada contoh artikel ini menggunakan halaman statis).

pertama

Buat Entri Baru >>>

Pindahkan mode editor pada mode HTML (bukan pada mode Compose).
Beri judul halaman, contoh "Hasil Pencarian" atau "Hasil Penulusuran"

kedua

Copy kode dibawah ini dan pastekan semua pada area artikel, di mode HTML

<div id="cse" style="width: 100%;">
Tunggu Sebentar...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("
<b style="font-family: arial, sans-serif; font-size: small; white-space: normal;">015339794194567659083:5wjqp8sy51k</b>
", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

Kode diatas bukan adalah kode bawaan Google Custom Search Engine, tapi kode yang sudah disesuaikan dengan karakter Blogger.

Selanjutnya ganti kode "015339794194567659083:5wjqp8sy51k " diatas, dengan Search engine unique ID ( kode mesin telusur ) yang sudah anda peroleh.

Pada waktu membuat atau mendaftar Google Custom Search Engine ( lih. artikel Membuat Google Custom Search Engine di Blogspot ), Anda dapat kode mesin telusur ini dari Google seperti contoh dibawah.

Search engine unique ID ( kode mesin telusur ) : "015339794194567659083:5wjqp8sy51k "

Anda bisa menemukan kode tersebut dengan masuk ke Google Custom Search Engine >>> Control Panel >>> Basic

ketiga

Setelah selesai mengcopy kode tersebut maka publiskan atau terbitkan artikel atau halaman statis ini. Jangan lupa catat alamat atau URL artikel atau halaman tersebut.

Membuat Search Input Form

Pada template blog Anda yang sudah terdapat Search Box atau form pencarian, carilah kode yang mirip dibawah ini :

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

atau.....

Caranya, cari kode diatas pada widget di template Anda :

Masuk Edit Template HTML >>> Expand Template Widget >>> Tekan F3 >>> Cari kode mirip ini :

</b:widget>
</b:section><div id='search'><form action=....

Hal yang harus diperhatikan adalah sebagai berikut:

pada code action="/p/pencarian.html" gantilah /p/pencarian.html dengan URL halaman yang sudah anda catat tadi (lihat langkah ketiga) "Jangan lupa catat alamat atau URL artikel atau halaman tersebut.

"name="q": jangan dirubah, karena mesin pencari akan menggunakan karakter unik "q" (query) untuk mengeksekusi kata kunci yang dimasukan pada input

type="submit": birkan saja karena berfungsi untuk mengirimkan kata kunci input pada halaman yang ada pada action

Sedangkan untuk atribut lainnya silahkan sesuaikan, cont : " Cari...." bisa diganti dengan " Search...."

Proses pencarian tersebut dilakukan kurang lebih seperti dibawah ini:

Jika seseorang memasukan kata kunci pada form input name="q", kemudian meng-klik tombol type="submit" maka kata kunci akan dikirim pada halaman action="/p/pencarian.html" untuk diproses. Dan halaman /p/pencarian.html akan memproses kata kunci tersebut untuk menampilkan hasil yang relevan dengan menggunakan Google Custom Search Engine.

Setelah Anda berhasil meng-Integrasi Google Custom Search Engine pada Search Box Default, contoh hasilnya bisa dilihat pada Search Box diblog ini yang telah kostum dengan Google Custom Search Engine.

hasil pencarian Google Custom Search Engine

Selamat mencoba sobat,......

Artkel tersebut dikutip sebagian dari modification-blog, sebuah blog yang penuh informasi dan menarik.

Saran Anda sangat membantu bila ada ide lain, silahkan berilah di form komentar dibawah.

Thanks..