Membuat Penelusuran Khusus dari Google (CSE) Tampil dihalaman Pencarian

Baiklah, kali ini saya akan berbagi sedikit trik nih hasil eksperimen sendiri, oke langsung saja, pertama tama silahkan sobat buat dlu Penelusuran Khusus dari Google (CSE) ya, apa itu CSE ? sedikit saya jelaskan, CSE adalaha sebua mesin telusur custom yang disediakan oleh google, untuk membuatnya silahkan kunjungi tutorial saya yang sebelumny adisini : Cara Membuat dan Memasang Penelusuran Khusus dari Google(CSE)

Belum selesai langkah pertamanya ya, setelah penelusuran customnya udah jadi, sekarang sobat masuk lagi pada bagian Tampilan dan nuansa setelah itu sobat pilih yang Hasil Saja, klik Simpan dan Dapatkan Kode. Biarkan dlu CSE nya, sekarang waktunya otak atik Edit HTML Template.

Memasang CSE Pada Template Blog

Pada Langkah ini kita akan membungkus isi posting dengan tag kondisional kecuali halaman pencarian, agar posting yang dicari berdasarkan keyword tidak akan muncul dalam halaman pencarian, karena kita akan mengganti hasil pencariannya dengan CSE ini, Silahkan Masuk Dasboard Blogger dan Pilih Template, dan Edit HTML, tekan CTRL + F dan cari kode <b:includable id='main' var='top'>, Sekarang Tempelkan Tag Kondisional ini dibawah kode yang kamu temukan tadi <b:if cond='!data:blog.searchQuery'> dan tempelkan tag penutup ini </b:if> diatas kode </b:includable>, maka hasilnya akan seperti dibawah ini :

Sekarang kembali ke Dasbord CSE yang tadi anda buat pada lengkah pertama, sekarang salin kode yang telah diberikan oleh si mesin telusur, penampakannya kurang lebih seperti kode milik saya ini:

<script>
  (function() {
    var cx = '002358854734172062944:q0gygu7xxla';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Setelah kamu salin, sekarang kamu tempelkan dibawah kode </b:if> yang kamu buat pada langkah pertama diatas

Langkah terakhir, tambahkan tag kondisional pada script yang baru saja kamu tempelkan itu, tambahkan tag kondisional <b:if cond='data:blog.searchQuery'> ini diatas kode <script> dan tempelkan tag penutup ini </b:if> dibawah kode </script> nanti penampakannya kurang lebih seperti ini :

Simpan Template anda dan lihat hasilnya !

Lihat Demo

Tweet