Google Ajax CSE di Blogspot

Autofill Google CSE dengan Keyword Label Blogspot

Sebelumnya saya sudah bahas bagaimana menggabungkan Google CSE (Custome Search Engine) Box dengan Halaman Search WordPress, dimana keyword yang diambil masuk (autofill) kedalam input search Google CSE. Nah…iseng-iseng kemarin main-main di blog blogspot yang sudah lama tidak terjamah (bikin template blogspot), ternyata ada beberapa fitur element baru yang ditambahkan (mungkin fiturnya sudah lama, saya aja kale yang baru tau :mrgreen: ).

Cara membuat search engine gambar dengan Google API

Elemen terbaru blogspot yaitu element Pages dan element Search Box Google CSE. Jadi kamu bisa buat page di blogspot (max 10 pages) dan menambahkan Search box Google CSE. Saya justru tertarik dengan element CSE-nya, setelah lirik-lirik sebentar kode CSEnya, keknya nggak bisa dikustomisasi. Terus… saya coba aja oprek search box CSE pake Google AJAX Search API yang kemudian saya masukkan di blogspot, hasilnya? Coba lihat gambar di bawah ini:

Google Ajax CSE di Blogspot

Saya pake Google AJAX Search API yang autofill dengan mengambil keyword label postingan di blog Blogspot dan menempatkannya di single post. Berikut langkah-langkah cara membuat Autofill Google AJAX Search API CSE di Blogspot:

1. Dashboard » Layout » Edit HTML » Expand Widget Templates
2. Copy kode berikut:

<script src='http://www.google.com/jsapi'/>
	<script type='text/javascript'>
		google.load(&#39;search&#39;, &#39;1&#39;);
		function OnLoad() {
		var customSearchControl = new google.search.CustomSearchControl(&#39;ID-CSE-BLOGKAMU&#39;);
		customSearchControl.draw(&#39;content&#39;);
		customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>&#39;);}
		google.setOnLoadCallback(OnLoad);
	</script>

<div id='content'>Loading...</div>

3.Paste tepat di bawah kode <b:includable id='comments' var='post'>
4. Ganti kata ID-CSE-BLOGKAMU dalam kode tersebut dengan unique ID CSE blog kamu (Jangan ada spasi!). Bikin dulu CSE di Google Custome Search. Nanti kamu dapat kode ID cse seperti ini: Search engine unique ID: 012157934978810372049:-cv74o3zqua (Lihat Control panel » Basics)
5. Hasilnya seperti ini.

......
<b:includable id='comments' var='post'>
<script src='http://www.google.com/jsapi'/>
	<script type='text/javascript'>
		google.load(&#39;search&#39;, &#39;1&#39;);
		function OnLoad() {
		var customSearchControl = new google.search.CustomSearchControl(&#39;015072290939263456976:yzp7yfpg7kw&#39;);
		customSearchControl.draw(&#39;content&#39;);
		customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>&#39;);}
		google.setOnLoadCallback(OnLoad);
	</script>

<div id='content'>Loading...</div>
<div class='comments' id='comments'>
......


4.Save pekerjaan kamu. Selesai!

Aturan Google Ajax search API

Kalo kamu mau autofill berdasarkan title postigan blog, kamu tinggal ganti kode:

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>

dengan kode berikut (untuk autofill CSE berdasarkan title postingan):

<b:if cond='data:post.title'><data:post.title/></b:if>

Selamat berkreasi dan mencoba sob! :)

UPDATE (22/08/2012)
Dengan Google Custom Search Element Versi 2, Anda dapat mengganti kode CSE versi lama di atas dengan Kode Google CSE terbaru berikut:

<script>
var myCallback = function() {
if (document.readyState == &#39;complete&#39;) {
  var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
        element.execute("<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>");
  } else {
google.setOnLoadCallback(function() {
var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
        element.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>&#39;);
},true);
}
};
window.__gcse = {
  parsetags: &#39;onload&#39;,
 callback: myCallback
};
(function() {
  var cx = '015072290939263456976:yzp7yfpg7kw'; //Ganti ID Google CSE ini
  var gcse = document.createElement(&#39;script&#39;); 
      gcse.type = &#39;text/javascript&#39;; 
      gcse.async = true;
  gcse.src = (document.location.protocol == &#39;https&#39; ? &#39;https:&#39; : &#39;http:&#39;) +
      &#39;//www.google.com/cse/cse.js?cx=&#39; + cx;
  var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(gcse, s);

})();
</script>
<gcse:searchbox gname='cseresult'/>
<gcse:searchresults autoSearchOnLoad='true' gname='cseresult'/>

Baca juga cara menyembunyikan link/url dengan metode open.window supaya tidak terlihat di status bar browser kamu.

29 Replies to “Autofill Google CSE dengan Keyword Label Blogspot”

  1. saya cari kode ini “<b>” kok gak ketemu ya. gmn…

    saya cari kode ini “” kok gak ketemu ya. gmn om?

  2. bang jev… kalo mau pasang di wp, bagian customSearchControl.execute(…………………………); di…

    bang jev…

    kalo mau pasang di wp, bagian
    customSearchControl.execute(…………………………);

    di isi apa bang? maunya nampilin berdasarkan keyword search web…

  3. saya sudah coba pasang scriptnya sesuai uraian diatas.. tapi autofill…

    saya sudah coba pasang scriptnya sesuai uraian diatas.. tapi autofill nya tidak jalan.. saya masih bingung disini autofill itu nanti terisi otomatis atau bagaimana? atau akan terisi otomatis setiap kali CSE itu digunakan?

    mohon arahannya..

    • terisi otomatis, mungkin ada kode yang nggak rapat, coba baca…

      terisi otomatis, mungkin ada kode yang nggak rapat, coba baca note-nya.

  4. kok ndak ada yang muncul ya… waduh jadi pusing sendiri…

    kok ndak ada yang muncul ya… waduh jadi pusing sendiri nih.. salahnya dimana…

  5. wah mantap nih, langsung di coba…

    wah mantap nih, langsung di coba…

  6. kok yang muncul malah tulisan “loading..” aja yah, autofillnya mana?…

    kok yang muncul malah tulisan “loading..” aja yah, autofillnya mana? padahal udah saya pasang sesuai kode dan di tempat yang benar.
    begitu saya pasang skrip asli dari google cse, baru nongol tapi gak ada autofillnya. ada saran?

  7. kang JEV…. gmna klo mesin searchnya bawaan dari template…? makasiiih

    kang JEV…. gmna klo mesin searchnya bawaan dari template…? makasiiih

    • Tinggal diganti aja kode id :)

      Tinggal diganti aja kode id :)

  8. waduh, blog saya kok malah kacau ya. … kkk Sudah…

    waduh, blog saya kok malah kacau ya. … kkk
    Sudah saya kopi sesuai script om Jev, sudah saya tambahkan kode cse, sudah ditempatkan setelah kode .
    Eh hasilnya ketika buka single page, kontent pos hilang tinggal search result.
    Kode mana ya yang salah ? …..

    • Salah penempatan kode kali, atau ada script yang terlewatkan, bagusnya…

      Salah penempatan kode kali, atau ada script yang terlewatkan, bagusnya di tes dulu di localhost sebelum menerapkan secara online.

  9. kok blogspot punya saya kok tidak ada kode <b> trus…

    kok blogspot punya saya kok tidak ada kode
    trus solusinya gmn nih ?

    • Kode apanya mas yang tidak ada?

      Kode apanya mas yang tidak ada?

  10. sob saya udah coba code diatas di blogspot,tapi g bisa…

    sob saya udah coba code diatas di blogspot,tapi g bisa automatis membaca judul ato label blog,,permasalahannya pada customSearchControl.execute (),,apa ada code lain yang bisa saya pakai ??

    • Cuma itu tuh yang ada mas wandi, harusnya kode di…

      Cuma itu tuh yang ada mas wandi, harusnya kode di atas berhasil memunculkan search result secara otomatis. Mungkin ada kekeliruan dalam pemasangan uniqe ID cse.

  11. padahal sy pgn skli auto search di blogspot jend..!

    padahal sy pgn skli auto search di blogspot jend..!

  12. Jend, gara2 pgn bikin auto search ky yg di wordpress…

    Jend, gara2 pgn bikin auto search ky yg di wordpress saya smpat nyari2 kode buat nerapin di search blogspot hehe kyknya gk bs ya jend?, tp saya smpat nemu kode ini tapi gk bs buat ngarahin ke search blogspot, cm bs exekusi keyword. sp tau jend bs akalin . atau mgkin jend dh prnh nyoba kali :

    <script language=’javascript’ type=’text/javascript’>//<![CDATA[
    function OnLoad() {

    // create a search control
    var searchControl = new google.search.SearchControl();

    // web search, open, alternate root
    var options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
    options.setRoot(document.getElementById("somewhere_else"));
    searchControl.addSearcher(new google.search.WebSearch(), options);

    searchControl.addSearcher(new google.search.VideoSearch());
    searchControl.addSearcher(new google.search.BlogSearch());

    // tell the searcher to draw itself and tell it where to attach
    searchControl.draw(document.getElementById("search_control"));

    // execute an inital search
    searchControl.execute("kata kunci, kata kunci, dst..");
    }

    google.setOnLoadCallback(OnLoad);
    //]]>
    </script>

    <br />
    <center>
    <h1 id=’gawdy-header’>Marine Request Search</h1>
    <div style="overflow: auto; margin: 10px;width: 960px; border: 1px solid
    #CACEE4; background-color: #FFFFFF;">
    <div style="overflow: auto; margin: 10px; width: 940px; border: 0px solid
    #CACEE4; background-color: #FFFFFF;">
    <table width="100%">
    <tr><p align="left"><em>:: Apa saja !! :<b> YAng mo Di Taro </b></em></p><br />

    <td valign="top" width="40%">
    <div id="search_control"><blink>Loading…</blink></div>

    </td>
    <td valign="top" width="60%">
    <div id="somewhere_else">..</div>
    </td>
    </tr>
    </table>

    </div></div></center>

  13. Mau tanya lagi mas.. kalau auto fill nya dengan kata…

    Mau tanya lagi mas.. kalau auto fill nya dengan kata tertentu di dalam postingan bisa gak ya?? misalkan dengan menambahkan span id, nah terus kata di dalam span id itu jadi auto fill nya..

    • I will tray to code it. :) Thanks for sharing,…

      I will tray to code it. :) Thanks for sharing, Nice!

  14. Mas hasil search yang di tampilkan nanti akan di index…

    Mas hasil search yang di tampilkan nanti akan di index ama google gak ya?? soalnya pernah baca katanya content yang di hasilkan oleh javascript gak akan di index oleh google,, biar bisa ke index gemana ya mas? makasih sebelumnya ya..

    • Nggak diindex mas. Hanya saja itu bisa membantu meningkatkan impresi,…

      Nggak diindex mas. Hanya saja itu bisa membantu meningkatkan impresi, kalo mau mencoba peruntungan dengan Google Ads, boleh dicoba deh diaktifkan fitur CSE make money, tapi baca dulu tos-nya kalo mau pake fitur ini.

  15. bagai2 template blogsemprot dong bang

    bagai2 template blogsemprot dong bang

  16. awal masuk ke blog bung jev, saya merasakan kalau loadingnya…

    awal masuk ke blog bung jev, saya merasakan kalau loadingnya cepet banget.. apakah kecepatan load blog juga berpengarh terhaap SERP? terus supaya loadingnya cepet gimana ya? padahal saya udah install plugin cache reloade.

    • jelas pengaruh, itu salah satu faktor juga. Kecepatan load blog…

      jelas pengaruh, itu salah satu faktor juga. Kecepatan load blog dibahas di google webmaster tool. Bagaimana cara load blog lebih cepat? nanti saya bahas yach..sabar :)

  17. mantap mas ,tapi saya dulu juga pernah oprek2 pakai blogspor…

    mantap mas ,tapi saya dulu juga pernah oprek2 pakai blogspor dan berhasil,sebelum artikel ini di buat ,saya pakai code cse dari mas juga .tapi saya ndak berhasil yg link nya ke blog kita lagi(berputar2).coba kalo bisa? heboh pokok nya.

  18. Maaf om numpang nongkrong diblognya! Bentaran doang!

    Maaf om numpang nongkrong diblognya! Bentaran doang!

Leave a Reply

Use tag [php] to add code, e.g. [php]<?php echo $var; ?>[/php]

*

*