Bismillah. Alhamdulillah. Google memberikan keleluasaan kepada para penggunanya untuk melakukan berbagai modifikasi script, fungsi dan fasilitas yang tersedia secara gratis. Salah satu fasilitas yang cukup bagus adalah Google Custom Search Engine. Fasilitas ini disediakan bagi mereka yang ingin membuat sendiri mesin pencari sesuai dengan keinginan penggunanya. Kita bisa membuat mesin pencari layaknya Google Search untuk meng-index artikel atau informasi dari situs yang bisa kita tentukan sendiri atau dari kumpulan situs favorit kita. Bagi para blogger, banyak pula yang menggunakan Google Custom Search Engine ini sebagai mesin pencari blog sendiri yang khusus meng-index artikel pada blog yang dikelolanya. Bagaimana caranya?
Membuat Akun Google Custom Search Engine
Untuk membuat Google Custom Search Engine, maka syarat utamanya kita harus memiliki akun Google atau GMail. Jika sudah memiliki akun, ikuti langkah dibawah ini:
Langkah 1Login ke Google dan masuk ke Halaman "Google Penelusuran Khusus"
Langkah 2
Jika anda sudah Login maka akan dihadapkan pada formulir dibawah ini:
- Nama: Isilah dengan dengan Google Custom Search Engine (rekomendasi; sesuaikan dengan nama blog anda)
- Deskripsi: Isi deskripsi mengenai fungsi mesin telusur yang anda buat, karena mesin telusur ini bersifat publik yang siapapun bisa menggunakannnya
- Bahasa: Pilihlah bahasa yang sesuai dengan kemampuan anda (sayangnya tidak ada bahasa Jawa. #LOL)
- Situs yang akan ditelusuri: Masukan alamat URL (tanpa http://) yang akan ditelusuri pada hasil pencarian. Jika khusus untuk blog pribadi, masukan satu URL alamat blog anda saja.
- Edisi: Jika punya uang, beli saja yang $100 per tahun. Kalau seperti saya, tidak ada pilihan lain kecuali Edisi Standar GRATIS!. Perbedaannya antara limited dan unlimited konfigurasi. Silahkan temukan sendiri perbedaannya.
- Jangan lupa checklist "Saya telah membaca dan menyetujui Persyaratan Layanan"
Klik tombol "Lanjut"
Langkah 4
Lewati langkah ke 2 ini dengan klik tombol "Lanjut"
Langkah 5
Catat kode mesin telusur anda
Integrasi Google Custom Search Engine pada Blogger
Ada dua bagian untuk mengintegrasikan Google Custom Search Engine pada Blogger, yaitu:
A. 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).
Langkah 1Pindahkan mode editor pada mode HTML (Jangan pada mode Compose!). Jangan lupa beri judul halaman.
Langkah 2
Masukan (copy paste) kode dibawah ini pada area artikel:
<div id="cse" style="width: 100%;">Tunggu Sebentar...</div>Perhatian!
<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("012345678901234567890:mdrcctmncrt", {});
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 adalah kode yang sudah disesuaikan dengan karakter Blogger, namun anda bisa saja menggunakan kode bawaan Google Custom Search Engine.
Jangan lupa ganti kode dibawah ini:012345678901234567890:mdrcctmncrtdengan kode mesin telusur yang sudah anda peroleh.
Langkah 3
Terbitkan artikel atau halaman dan catat URL artikel atau halaman ini. Lanjutkan ke langkah berikutnya...
B. Form Input Keyword (Kata Kunci)
Jika pada blog anda sudah tersedia form pencarian, biasanya memiliki kode mirip seperti dibawah ini:
<form id="searchform" action="/p/pencarian.html">Carilah kode diatas pada widget atau template dan hal yang harus diperhatikan adalah sebagai berikut:
<input id="searchq" name="q" type="search" placeholder="Cari..."/>
<input class="searchbutton" name="sa" type="submit" value="Go" />
</form>
- action="/p/pencarian.html": ganti /p/pencarian.html dengan URL halaman yang sudah anda buat tadi (lihat A. Halaman Hasil Pencarian)
- name="q": ini tidak bisa di tawar, karena mesin pencari akan menggunakan karakter unik "q" (query) untuk mengeksekusi kata kunci yang dimasukan pada input
- type="submit": ini juga tidak bisa di tawar (bagi yang belum paham form) karena berfungsi untuk mengirimkan kata kunci input pada halaman yang ada pada action
- Sedangkan untuk atribut lainnya silahkan sesuaikan
Proses pencarian ini 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.
Template CSS Google Custom Search Engine
Jika anda kurang suka dengan perpaduan warna bawaan Google Custom Search Engine, silahkan lakukan modifikasi pada kode CSS-nya. Namun sebelum melakukan modifikasi pada kode CSS, buanglah kode dibawah ini:
style : google.loader.themes.V2_DEFAULT
dari kode Google Custom Search Engine (lihat A. Halaman Hasil Pencarian), kemudian tambahkan dan lakukan modifikasi pada kode CSS dibawah ini:
.gsc-control-cse {
font-family: Arial, sans-serif;
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-control-cse .gsc-table-result {
font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #802020;
background-color: #660000;
background-image: none;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #CCCCCC;
background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #CCCCCC;
border-bottom-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-tabsArea {
border-color: #CCCCCC;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #EEEEEE;
background-color: #F9F9F9;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #802020;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #802020;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #802020;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #802020;
}
.gsc-cursor-page {
color: #802020;
}
a.gsc-trailing-more-results:link {
color: #802020;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #000000;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-promotion div.gs-visibleUrl-short {
display: block;
}
.gs-promotion div.gs-visibleUrl-long {
display: none;
}
.gsc-cursor-box {
border-color: #FFFFFF;
}
.gsc-webResult.gsc-result.gsc-promotion {
border-color: #F6F6F6;
background-color: #F6F6F6;
}
.gsc-completion-title {
color: #802020;
}
.gsc-completion-snippet {
color: #000000;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #1155CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #1155CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #1155CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #1155CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #666666;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #009933;
}Kesimpulan
Google Custom Search Engine ini bisa diintegrasikan dengan Google Adsense jika anda memiliki akunnya. Integrasi dengan Google Adsense dilakukan pada konfigurasi Mesin Telusur bukan pada kode yang telah dibahas diatas. Kelemahan menggunakan mesin telusur ini adalah halaman yang selalu di-reload jika kita mengubah kata kunci pencarian. Bagaimana jika ingin halaman ini tidak di-reload apabila kita mengganti kata kunci? Nantikan pada pembahasan berikutnya. Silahkan anda bereksperimen dan memodifikasinya sendiri sesuai keinginan dan imajinasi. "Bagaimana jika kita membuat sendiri mesin pencari dengan memanfaatkan Blogger JSON API?" In Progress Trial and Error...
Selamat mencoba dan semoga berhasil. Happy Blogging :)Pranala Luar:
