Tag: Autofill Google CSE

Penambahan fitur Google CSE di halaman blog Anda sangat membantu dalam melakukan navigasi pencarian seluruh artikel Anda. Apalagi sekarang telah tersedia Google Custom Search Element versi 2 yang semakin membuat Google CSE semakin mudah untuk di modifikasi.

Kode Google CSE terbaru ini juga dapat dipasang di blog Blogger/Blogspot khususnya di halaman sebagai berikut:

• Halaman Label.
• Halaman Pencarian (search result).
• Halaman Error 404 (Page Not Found).
• Halaman Postingan.

Berikut cara pasang Google CSE di Blogger:

1. Masuk di template editor blog Anda Template > Edit HTML.
2. Centang Expand Widget Templates dan temukan kode

   <b:include data='top' name='status-message'/>
   

   (Jika ada 2 kali kode tersebut, tetapkan kode yang kedua (yang bukan untuk mobile web).

3. Tempatkan kode Google CSE di setiap halaman berikut setelah kode di atas. Anda dapat menggabungkan kode Google CSE ini semuanya.
   

   Google CSE di halaman Label

   Eksekusi nama label menggunakan kode <data:blog.searchLabel/>.

   <!-- Google CSE Halaman Label -->
   <b:if cond='data:blog.searchLabel'>
   <script>
   var myCallback = function() {
   if (document.readyState == 'complete') {
     var element = google.search.cse.element.getElement('cseresult');
           element.execute('<data:blog.searchLabel/>');
     } else {
   google.setOnLoadCallback(function() {
   var element = google.search.cse.element.getElement('cseresult');
           element.execute('<data:blog.searchLabel/>');
   },true);
   }
   };
   window.__gcse = {
     parsetags: 'onload',
    callback: myCallback
   };
   (function() {
     var cx = '1234:567'; // Sisipkan ID Google CSE di sini
     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'/>
   </b:if>
   

   Google CSE di halaman Pencarian (Search Result)

   Query yang dieksekusi berdasarkan url parameter q. Search result yang tampil secara autofill.

   <!-- Google CSE Halaman Pencarian -->
   <b:if cond='data:blog.pageType == "index"'>
   <b:if cond='data:blog.searchQuery'>
   <div id='cseresult'/>
   <script>
   var myCallback = function() {
     if (document.readyState == 'complete') {
       google.search.cse.element.render(
           {
             div: "cseresult",
             tag: 'searchbox-only'
            });
     } else {
       google.setOnLoadCallback(function() {
           google.search.cse.element.render(
               {
                 div: "cseresult",
                 tag: 'search'
               });
        }, true);
     }
   };
   window.__gcse = {
     parsetags: 'explicit',
     callback: myCallback
   };
   (function() {
     var cx = '1234:567'; // Sisipkan ID Google CSE di sini
     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>
   </b:if>
   </b:if>
   

   Google CSE di halaman Error 404 (Page Not Found)

   Kode berikut juga dapat dipakai untuk modifikasi halaman error 404 di Blogger.

   <!-- Google CSE Halaman Error -->
   <b:if cond='data:blog.pageType == "error_page"'>
   <script>
   var myCallback = function() {
   if (document.readyState == 'complete') {
     var element = google.search.cse.element.getElement('cseresult');
           element.execute("");
     } else {
   google.setOnLoadCallback(function() {
   var element = google.search.cse.element.getElement('cseresult');
           element.execute('');
   },true);
   }
   };
   window.__gcse = {
     parsetags: 'onload',
    callback: myCallback
   };
   (function() {
     var cx = '1234:567'; // Sisipkan ID Google CSE di sini
     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'/>
   </b:if>
   

Google CSE di halaman Postingan

Untuk pasang Google CSE di halaman postingan/artikel (single post), Anda bisa baca postingan Autofill Google CSE dengan Keyword Label Blogspot

Penempatan kode Google CSE di atas untuk template default yang ada di Blogger. Untuk template selain di Blogger, kemungkinan penempatannya berbeda-beda.