Cara Memasang Google Custom Search Engine di Blog

oogle Custom Search Engine (CSE) merupakan sebuah fitur keren untuk mencari artikel pada sebuah blog. Sama halnya seperti fitur pencarian bawaan pada sebuah blog, namun menggunakan custom google search engine (CSE) akan lebih fleksibel dan lebih relevan dengan kata kunci yang sobat cari pada sebuah blog. Menggunakan Custom google search engine pada blog menjadikan hasil pencarian di widget search box yang terpasang di blog, muncul sebagai hasil penelusuran di search engine google.

Sederhananya, custom google search engine ini akan menggantikan fungsi atau fitur pencarian pada blog menjadi mesin penelusuran google. Jadi jika sobat mencari sebuah artikel pada suatu blog, maka hasil pencarian akan muncul seperti sobat sedang mencari artikel di google. Sebelum sobat memasang CSE pada blog sobat, harus terlebih dahulu membuat custom search engine. Bagaimana cara membuatnya? Ikuti langkahnya dibawah ini Pertama, silahkan kunjungi halaman berikut: https://cse.google.com/cse/

Klik Creat Custom search engine

Masukan URL blog sobat dan beri nama untuk custom search engine yang akan sobat buat, kemudian klik “Creat“

Nah, sekarang Pilih yang “Get Code“

Kemudian simpan kode yang ada…

Sampai disini sudah sobat sudah selesai membuat custom search engine. 

Setelah sobat membuat akun CSE diatas tadi, sekarang saatnya untuk menerapkan kode tersebut pada pencarian di blog sobat. Agar ketika ada pengunjung yang mencari artikel pada blog sobat, hasilnya akan muncul seperti penelusuran google.

Perama. Masuk ke edit HTML di blog sobat, silahkan simpan CSS dibawah diatas kode </style> untuk modifikasi Custom seacrh engine pada blog sobat

/* CSE Search sheni*/
#sheniCSE {font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; padding:0px; text-align:left; width:100%; height:100%; line-height:18px}
#sheniCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#sheniCSE .gsc-control-cse {margin:0px; padding:0px}
#sheniCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#sheniCSE .gsc-control-cse .gsc-table-result td {border:0px}
#sheniCSE .gsc-results {width:100%}
#sheniCSE .gsc-search-box, #sheniCSE .gsc-above-wrapper-area, #sheniCSE .gsc-resultsHeader {display:none}
#sheniCSE .gsc-webResult .gsc-result {padding:0px}
#sheniCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#sheniCSE .gs-result .gs-title, #sheniCSE .gs-result .gs-title * {font-family:'roboto',sans-serif; font-weight:500; font-size:16px; text-decoration:none; color:#49e17e;transition:all .3s ease;}
#sheniCSE .gs-result .gs-title:hover, #sheniCSE .gs-result .gs-title:hover * {color:#444}
#sheniCSE .gs-result .gs-snippet {font-size:12px}
#sheniCSE .gsc-reviewer, #sheniCSE .gs-result a.gs-visibleUrl, #sheniCSE .gs-result .gs-visibleUrl{color:#767676}
#sheniCSE .gsc-table-cell-thumbnail, #sheniCSE .gs-promotion-image-cell {padding:0}
#sheniCSE .gsc-results .gsc-cursor-box {margin:0px}
#sheniCSE .gsc-preview-reviews ul {margin:0px}
#sheniCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #sheniCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#sheniCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#49e17e!important;}
#sheniCSE .gsc-cursor .gsc-cursor-page {background:#49e17e; transition:all .3s ease;}
#sheniCSE .gsc-cursor .gsc-cursor-page:hover {background:#004970}
#sheniCSE .gsc-url-top {padding:0px}
#sheniCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#444}
#sheniCSE .gsc-thumbnail-inside {padding:0px}
#sheniCSE .cse .gsc-webResult.gsc-result, #sheniCSE .gsc-webResult.gsc-result, #sheniCSE .gsc-imageResult-column, #sheniCSE .gsc-imageResult-classic {margin-bottom:0px} 

Jangan Lupa Save Template Anda.

Kedua, Sekarang buat postingan baru di halaman statis, beri judul “search“. Kemudian masukan kode dibawah ini:

<div id="sheniCSE">
Memuat hasil pencarian...</div>
<script type="text/javascript">
document.getElementById('sheniCSE').innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>';
  (function() {
    var cx = '007687414268855280227:agj24qvk0bp';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

Silahkan ganti kode var cx = ‘007687414268855280227:agj24qvk0bp‘ Dengan kode CSE yang sudah sobat buat pada langkah diatas silahkan publikasikan postingan tersebut.

Agar CSE sobat berfungsi saat mencari artikel pada blog sobat, sekarang kita akan memasangnya pada bagian form pencarian di blog sobat.

Caranya berikut ini:

Masuk lagi pada edit HTML pada blog sobat, Kemudian carai form pencarian sobat, khususnya kode dibawah ini:

<form action='/search' id='searchform'>

atau

<form action='/search' class='errorpage-search' style='display: block;'>

atau kode semacamnya, saya rasa pada semua template blog akan sama seperti kode diatas, jika sudah sobat temukan, sekarang ganti dengan kode berikut ini:

<form action='/p/search.html' id='searchform'>

Save template dan lihat hasilnya.

• Demo

Admin

Berbagi tips tentang dunia Blogger

Facebook

WhatsApp

Instagram

Bagikan Artikel ini

Related Posts