CSE Dan Penerapannya

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

---

CSE yaitu Custom Search Engine. dan apa maksud dari judul "penerapan" di atas? coba anda lihat ke bawah . berbeda dengan blog lain saya menggunakan related post dengan CSE.. kenapa harus CSE? agar saya tahu berapa link saya yang telah terpajang di mading Google.
nah jika sobat blogger tertarik langsung saja kita masuk ke TKP :

1. masuk blogger - rancangan - Edit HTML - ceklis expand widget dan cari kode berikut :

</data:post.body>

2. setelah itu masukkan kode berikut tepat di bawahnya :

<br/>
<hr/>
<b><blink> Related Post coy</blink> :</b><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;017009654106445155031:lcyrlwjwnom&#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 != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}


    google.setOnLoadCallback(OnLoad);


    </script>


    <div id='content' style='height:280px; overflow:auto;'>Loading...</div>

3. sekarang perhatikan kode berwarna merah. itu adalah ID saya. anda silakan ganti dengan ID anda. "nah bagaimana saya tw id saya?" untuk lebih jelasnya anda masuk kemari : http://www.google.com/cse/
nanti anda akan di jerumuskan ke halaman reg untuk membuat CSE anda dan setelah selesai registrasi dan masuk ke halaman baru . perhatikan link di atasnya seperti gambar di bawah ini :

tadaaaaaaaa!!!

nah itu adalah id anda setelah anda registrasi dan anda kopi pada script di atas tadi.

4. mungkin ada pertanyaan lagi :  

kenapa saya harus mengopi kode yang anda berikan bukkannya kode dari CSE yang sudah saya registrasi dan costumisasi?

jawabannya : ketika anda mengkostum CSE tersebut akan ada style yang nantinya akan menyebabkan eror jika anda check di w3.  (saya sudah coba)  jadi sebaiknya anda mengurangi penggunaan CSS pada bagian ini. karena nantinya widget ini akan mengikuti template bawaan. jadi hasilnya tetap rapi. seperti related post saya di bawah.

dan hasil akhirnya akan jadi seperti berikut :

<div class='post-body entry-content'>
      <data:post.body/>
<br/>
<hr/>
<b><blink> Related Post coy</blink> :</b><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;017009654106445155031:lcyrlwjwnom&#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 != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}

    google.setOnLoadCallback(OnLoad);

    </script>

    <div id='content' style='height:280px; overflow:auto;'>Loading...</div>

jangan lupa kode berwarna merah ganti dengan ID anda. selamat mencoba dan semoga berhasil!!!