google CSE
Blogger

Cara Membuat Dan Memasang Google Custom Search Engine di Blog

Cara Membuat Google Custom Search Engine di blog | Pada kesempatan kali ini saya akan berbagi tutorial cara membuat google custom search engine atau memasang mesin penelusuran google di blog.

Untuk yang belum mengetahui apa itu Google Custom Search Engine?

Google Custom Search Engine (CSE) merupakan sebuah fitur keren untuk mencari artikel pada sebuah blog.

baca Juga: Panduan Blogger Paling Lengkap dari A sampai Z

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.

Baca Juga: Cara membuat sitemap otomatis di blog

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.

contoh google search engine di blog
Contoh Hasil Pencarian CSE

Nah, jika sobat tertarik untuk memasang custom google search engine pada blog sobat, pada kesempatan kali ini admin akan berikan langkah-langkahnya lengkap dari mendaftar dan sampai memasangnya.

Pastikan sobat membaca artikel ini sampai habis agar memasang berhasil untuk memasang CSE pada blog sobat.

Cara Membuat Google CSE

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/

memasang google search engine di blog

Klik Creat Custom search engine

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

memasang google search engine di blog

Nah, sekarang Pilih yang “Get Code

Kemudian simpan kode yang ada…

Sampai disini sudah sobat sudah selesai membuat custom search engine.

Sekarang bagaimana cara memasang google custom search engine pada blog? Ikuti langkahnya dibawah ini:

Cara Memasang Google Search Pada Blog

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.

Let’s Get Started!!

Perama. Masuk ke edit HTML di blog sobat.

memasang google search engine di blog

Jika sudah, silahkan simpan CSS dibawah diatas kode </style> untuk modifikasi Custom seacrh engine pada blog sobat

/* CSE Search by jejaker.com*/
#jejakerCSE {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}
#jejakerCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#jejakerCSE .gsc-control-cse {margin:0px; padding:0px}
#jejakerCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#jejakerCSE .gsc-control-cse .gsc-table-result td {border:0px}
#jejakerCSE .gsc-results {width:100%}
#jejakerCSE .gsc-search-box, #jejakerCSE .gsc-above-wrapper-area, #jejakerCSE .gsc-resultsHeader {display:none}
#jejakerCSE .gsc-webResult .gsc-result {padding:0px}
#jejakerCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#jejakerCSE .gs-result .gs-title, #jejakerCSE .gs-result .gs-title * {font-family:'roboto',sans-serif; font-weight:500; font-size:16px; text-decoration:none; color:#49e17e;transition:all .3s ease;}
#jejakerCSE .gs-result .gs-title:hover, #jejakerCSE .gs-result .gs-title:hover * {color:#444}
#jejakerCSE .gs-result .gs-snippet {font-size:12px}
#jejakerCSE .gsc-reviewer, #jejakerCSE .gs-result a.gs-visibleUrl, #jejakerCSE .gs-result .gs-visibleUrl{color:#767676}
#jejakerCSE .gsc-table-cell-thumbnail, #jejakerCSE .gs-promotion-image-cell {padding:0}
#jejakerCSE .gsc-results .gsc-cursor-box {margin:0px}
#jejakerCSE .gsc-preview-reviews ul {margin:0px}
#jejakerCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #jejakerCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#jejakerCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#49e17e!important;}
#jejakerCSE .gsc-cursor .gsc-cursor-page {background:#49e17e; transition:all .3s ease;}
#jejakerCSE .gsc-cursor .gsc-cursor-page:hover {background:#004970}
#jejakerCSE .gsc-url-top {padding:0px}
#jejakerCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#444}
#jejakerCSE .gsc-thumbnail-inside {padding:0px}
#jejakerCSE .cse .gsc-webResult.gsc-result, #jejakerCSE .gsc-webResult.gsc-result, #jejakerCSE .gsc-imageResult-column, #jejakerCSE .gsc-imageResult-classic {margin-bottom:0px} 

Jika sudah, jangan lupa save template sobat.

Halaman pencarian

Kedua, Sekarang buat postingan baru di halaman statis,

cara membuat google search engine di halaman statis

beri judul “search

memasang google search engine di blog

Kemudian masukan kode dibawah ini:

<div id="jejakerCSE">
Memuat hasil pencarian...</div>
<script type="text/javascript">
document.getElementById('jejakerCSE').innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>';
  (function() {
    var cx = '017699820421321913015:uyr_vow9390';
    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 = ‘017699820421321913015:uyr_vow9390

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' class='errorpage-search' style='display: block;'>

atau

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

atau kode semacamnya, saya kira 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'>
memasang google search engine di blog

Atau sesuaikan dengan nama postingan mesin pencarian yang sobat buat diatas

kemudian jangan lupa save template sobat dan silahkan test untuk melihat hasilnya.

Harusnya jika sobat sudah mengikuti panduan memasang google custom search engine pada blog ini dengan baik dan teliti akan berhasil 100% karena cara ini juga yang saya lakukan untuk blog saya.

Nah, itu dia sob, tutorial cara membuat dan memasang custom search engine google pada blog, semoga bermanfaat.

Bagi yang ingin template ini:https://viomaxgo.blogspot.com/ silahkan hubungi saya.

Jika masih ada hal yang ingin ditanyakan silahkan tanyakan pada kolom komentar dibawah.

Leave a Reply

Your email address will not be published. Required fields are marked *