Blogspot | JEVUSKA

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:

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('search', '1');
		function OnLoad() {
		var customSearchControl = new google.search.CustomSearchControl('ID-CSE-BLOGKAMU');
		customSearchControl.draw('content');
		customSearchControl.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>');}
		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('search', '1');
		function OnLoad() {
		var customSearchControl = new google.search.CustomSearchControl('015072290939263456976:yzp7yfpg7kw');
		customSearchControl.draw('content');
		customSearchControl.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>');}
		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 == 'complete') {
  var element = google.search.cse.element.getElement('cseresult');
        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('cseresult');
        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>');
},true);
}
};
window.__gcse = {
  parsetags: 'onload',
 callback: myCallback
};
(function() {
  var cx = '015072290939263456976:yzp7yfpg7kw'; //Ganti ID Google CSE ini
  var gcse = document.createElement('script'); 
      gcse.type = 'text/javascript'; 
      gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[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. →

Category: Blogspot

Autofill Google CSE dengan Keyword Label Blogspot