Cara Membuat Google Custom Search Di Blogspot

Selamat Sore Kawan, Kali ini saya akan membuat postingan yg berjudul "Cara Membuat Google Custom Search Di Blogspot" nah sesuai judul yaitu membuat GCSE tampil di dalam blog kita.
langsung saja simak tutorialnya.

Intro
Demo
Html
Css
Script
Finish

Prev Next

1. 
   

   Penjelasan

   Apa itu Google Custom Search Engine ?
   Bagi yang belum tau akan saya beri penjelasan tentang pengertian atau arti dari Google Custom Search Engine.
   Google Custom Search Engine atau Google CSE adalah search engine yang di program untuk sebuah situs atau blog.
   
   Langsung Saja ke step-step pembuatan GCSE
   
   Step 1 : Membuat Google Custom Search Engine
   
   Buka Google Custom Search
   
   Masuk akun Google Anda »Klik Search Engine Baru»isi formulir»Klik Create
   Setelah Anda berhasil membuat GCSE Anda, Anda akhirnya dapat menambahkannya ke situs Anda dengan mengklik Get code
   
   Selanjutnya, salin kode dan lanjutkan ke Step # 2
   
   
   
   Step 2 : Menambahkan Kode ke blog anda.
   
   Bualah Halaman Dengan Judul Search atau terserah anda, mau di beri judul apa.
   
   Di tab Html Pastekan kode script anda yang didaptkan di step 1
   
   
2. 
   

   Demo

   Untuk Demo Anda Bisa coba menggunakan pencarian di blog ini.
   
   
   
   
3. 
   

   Html

   Seharusnya kode anda seperti ini.
   
   

   <script>
     (function() {
       var cx = 'YOUR UNIQUE ID GIVEN BY GCSE';
       var gcse = document.createElement('script');
       gcse.type = 'text/javascript';
       gcse.async = true;
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'https:') +
           '//www.google.com/cse/cse.js?cx=' + cx;
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(gcse, s);
     })();
   </script>
   <gcse:search></gcse:search>
   

   
   Ganti Kode <gcse:search></gcse:search> Dengan <gcse:searchresults-only></gcse:searchresults-only>
   
   Selanjutnya publikasikan halaman yg di buat. (pastikan urlnya seperti ini /p/search.html)
   
   Selanjutnya ke blogger template » Edit HTML
   
   Cari kode yang Mirip seperti kode di bawah ini
   
   

   <div id='search-box'>
   <form action='/search' id='search-form' method='get' target='_top'>
   <input id='search-text' name='q' placeholder='Search' type='text'/>
   <button id='search-button' type='submit'><span>Search</span></button>
   </form>
   </div>
   

   
   setelah ketemu, Ganti /search dengan url halaman anda (misal : /p/search.html)
   
   Maka jadinya seperti ini :
   

   
   <div id='search-box'>
   <form action='/p/search.html' id='search-form' method='get' target='_top'>
   <input id='search-text' name='q' placeholder='Search' type='text'/>
   <button id='search-button' type='submit'><span>Search</span></button>
   </form>
   </div>
   

   
   Klik Save Template
   
   
4. 
   

   Css

   Tidak ada css diperlukan
   
   
   
5. 
   

   Script

   Tidak ada Script Di perlukan
   
   
   
   
   
   
   
6. 
   

   Finish

   Jika Anda Telah berhasil mengintegrasikan GCSE ke situs Anda, Anda akan melihat bahwa setiap kali Anda mencoba untuk mencari, Anda akan diarahkan ke Halaman Pencarian yang Anda buat. Itu dia!
   
   Saya harap Anda dapat memahami artikel ini.
   Silakan tinggalkan komentar! Jangan ragu untuk meminta bantuan jika Anda menghadapi masalah mengintegrasikan GCSE! Happy Blogging.