: :

Navbar Bawah

Minggu, 17 Februari 2013

Membuat Halaman Hasil Pencarian


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. 

Custom Search EngineAda 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
    hasil pencarian Google Custom Search Engine

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

    Sumber : Pro Blogiz by: Hriza Muh

    0   komentar

    Cancel Reply