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.
......
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.
......
<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!
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 mencoba !