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..
Read More
Learn more about URL formatting.
