Minggu, 22 Mei 2011

Related Post Used Google Custom Search for Blogger

Hanya untuk mengkomplitkan tutorial mengenai related post for blogger. Trik ini diambil dari postingan sebelumnya mengenai gaya bloglang blogsite dari sobat kita :D Tadinya mau disatuin disalah satu postingan tersebut tapi takut gak pada tahu bahwasannya Beben Koben si bloglang anu ganteng kalem tea ini suka mengupdate artikel² lawas kalau menemukan yg satu tema ;) Ini juga perlu penjelasan terperinci. Related post kali ini diambil dari Custome Search Engine uncle google ;)) Kalau yang belum punya bisa dibaca terlebih dahulu artikel ini Custome Search Google API Key.
Kalau sudah ada Google Custom Search sobat tinggal meluncur ke http://www.google.com/cse/ lalu tekan tulisan manage your existing search engines.

Klik control panel ► lihat ke bagian kiri ► klik yg bertuliskan Get code Jika sudah perhatikan kode script ini

<hr/>
<b>Related Post:</b>
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load('search', '1');
function OnLoad() {
var customSearchControl = new google.search.CustomSearchControl('YOUR-NUMBER-CUSTOME-SEARCH-ENGINE');
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' style='height:200px;overflow:auto;width:100%'><blink>Loading</blink>...</div>
Gantikan tulisan YOUR-NUMBER-CUSTOME-SEARCH-ENGINE dengan yang ada pada Get code kalian. Setelah persiapan semua sudah oke, saatnya menempatkan kedalam template ;)

Sebenarnya sobat sudah tauk dimana harus menyimpan itu script. Kalo diliat dari kebanyakan tag, mungkin setelah kode ini<div class='post-footer'>Tapi bisa saja lain, soalnya setiap template bisa berbeda. Yang terpenting dibawah postingan yah simpannya :) Kalau si script postingan terkait ini mau ada hanya pada halaman post saja maka sobat bisa menambahkan kode!!!

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<hr/>
<b>Related Post:</b>
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load('search', '1');
function OnLoad() {
var customSearchControl = new google.search.CustomSearchControl('YOUR-NUMBER-CUSTOME-SEARCH-ENGINE');
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' style='height:200px;overflow:auto;width:100%'><blink>Loading</blink>...</div>

</b:if>
Karena ini terintegrasi dengan search custome, maka disana nanti sudah ada search engines blog. Untuk melihat demo silahkan kunjungi blog dummie ekeh :P scroll kebawah!!!

demo
Happy related post \m/

Tidak ada komentar:

Posting Komentar