Membuat Related Post Dengan Google CSE (Custom Search Engine)

Membuat Artikel Terkait Di Blog Menggunakan CSE Custom Search Engine API V2

Related post adalah daftar dari artikel yang memiliki topik pembahasan yang sama dengan artikel utama yang sedang dibaca. Fungsinya untuk menarik minat pengunjung agar membuka artikel lain. Ini jelas bagus karena pengunjung akan menghabiskan waktu lebih lama di blog kamu. Bisa banget buat menurunkan bounce rate. Kita nggak bakal membuat related post atau artikel terkait dengan Javascript biasa. Kali ini sedikit berbeda, karena kita akan membuat related post menggunakan Google CSE.

Apa Itu Google CSE?

Custom Search Engine (CSE) adalah layanan dari Google yang dikhususkan untuk melakukan pencarian di blog. Biasanya hasil dari CSE hanya akan keluar kalau kamu melakukan aktifitas pencarian terlebih dulu, bukan? Ternyata bisa lho membuat related post di blog dengan CSE Google. Hasilnya pun lebih keren karena dia bisa menampilkan artikel terkait lebih banyak yang dibagi beberapa halaman. Ketika pindah halaman pun dia nggak nge-reload dulu. Mantep kan. Kalau mau coba, silakan ikuti langkah-langkahnya dibawah.

A. Buat Unit CSE

Pertama, kamu harus buat unit CSE yang baru terlebih dulu.
  1. Pergi ke https://cse.google.com
  2. Pada kolom Site to Search, isi dengan URL blog kamu diikuti tanda slash dan bintang. Contoh: www.igniel.com/*
  3. Pada Language pilih Indonesia. Atau sesuaikan dengan bahasa blog kamu.
  4. Pada Name of the search engine, isi sesukanya sesuai keinginan. Ini adalah nama unit Google CSE.
  5. Selesai? Klik tombol CREATE
    Cara Membuat Artikel Terkait di Blog Dengan Google CSE

  6. Pada menu Look and feel, pilihlah Results only. Lalu klik tombol Save & Get Code
    Cara Membuat Artikel Terkait Menggunakan Google Custom Search Engine

  7. Akan muncul kode CSE yang tadi dibuat. Dan perhatikan bagian var cx = '0080xxxxxxxxxxxxxx:abcde_fg' Ini adalah search engine ID yang nanti kamu perlukan. Sementara simpan dulu di notepad.
    Cara Menggunakan Related Post Pakai CSE Google

Bagi yang punya akun AdSense dan sudah pernah membuat unit CSE yang dimonetasi, JANGAN PERNAH mengaktifkan fitur Make Money khusus di unit CSE related post ini. Biarkan dia FREE.

B. Pengaturan di Blog

Kita mulai terapkan pada blog. Langkahnya:
  1. Untuk memperbagus tampilan, tambahkan dulu kode CSS berikut. Simpan DIATAS / SEBELUM </style> ATAU </b:skin>. Ini style yang saya pakai ya, kamu bisa edit lagi sesuai selera.
    /* Related Post with Google CSE by Igniel (igniel.com) */
    #ignielRelated {margin:0px; padding:0px; text-align:center; border-top:0px; border:1px solid #008c5f; border-top:0px} #ignielRelated h3{font-size:18px; font:bold 18px Tahoma,sans-serif; margin:0px 0px 5px 0px; background:#008c5f; color:#fff; text-align:left; text-transform:uppercase; overflow:hidden; padding: 7px 20px}
    #ignielCSE {padding:0 20px 10px 20px; text-align:left; width:auto; height:100%; line-height:18px}
    #ignielCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
    #ignielCSE .gsc-control-cse {margin:0px; padding:0px}
    #ignielCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
    #ignielCSE .gsc-results {width:100%}
    #ignielCSE .gsc-search-box, #ignielCSE .gsc-above-wrapper-area, #ignielCSE .gsc-resultsHeader {display:none}
    #ignielCSE .gsc-webResult .gsc-result {padding:0px}
    #ignielCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
    #ignielCSE .gs-result .gs-title, #ignielCSE .gs-result .gs-title * {text-decoration:none; color:#008c5f; font-size:14px; font-weight:600; padding-bottom:18px}
    #ignielCSE .gs-result .gs-snippet {font-size:12px}
    #ignielCSE .gsc-reviewer, #ignielCSE .gs-result a.gs-visibleUrl, #ignielCSE .gs-result .gs-visibleUrl{color:#767676}
    #ignielCSE .gsc-table-cell-thumbnail, #ignielCSE .gs-promotion-image-cell {padding-right:10px}
    #ignielCSE .gsc-results .gsc-cursor-box {margin:0px}
    #ignielCSE .gsc-preview-reviews ul {margin:0px}
    #ignielCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #ignielCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
    #ignielCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#2f303f !important}
    #ignielCSE .gsc-cursor .gsc-cursor-page {background:#008c5f}
    #ignielCSE .gsc-cursor .gsc-cursor-page:hover {background:#2f303f}
    #ignielCSE .gsc-url-top {padding:0px}
    #ignielCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#2f303f}
    #ignielCSE .gsc-thumbnail-inside {padding:0px}
  2. Cari kode <data:post.body/>. Gunakan CTRL + F untuk memudahkan. Jika ada beberapa kode, pilih yang terakhir. Tapi struktur setiap template pasti berbeda. Pastikan kamu memilih yang benar.
  3. Simpan script berikut DIBAWAH / SETELAH <data:post.body/>
    <b:if cond='data:view.isPost'>
    <div id='ignielRelated'>
    <h3>Artikel Terkait</h3>
    <div id='ignielCSE'/>
    <script>//<![CDATA[
    // Related Post with Google CSE by Igniel (igniel.com)
    function ignielCSE() {
      if (document.readyState != 'complete') {
        return google.setOnLoadCallback(ignielCSE, true);
      }
      google.search.cse.element.render({gname:'gsearch', div:'ignielCSE', tag:'searchresults-only', attributes:{linkTarget:'', webSearchResultSetSize:'small'}});
      var element = google.search.cse.element.getElement('gsearch');
      //]]>
      element.execute(&quot;<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>&quot;);
      //<![CDATA[
    };
    window.__gcse = {
      parsetags: 'explicit',
      callback: ignielCSE
    };
    (function() {
    var cx = '0080xxxxxxxxxxxxxx:abcde_fg';
    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>
    </div>
    <div class='clear'/>
    </b:if>
  4. Jangan lupa simpan dengan klik tombol Save theme

PENGATURAN
  1. Tulisan yang berwarna BIRU adalah jumlah related post dengan CSE yang ditampilkan. Kamu bisa menggantinya dengan:
    • small: 4 hasil per halaman.
    • large: 8 hasil per halaman.
    • filtered_cse: sampai dengan 10 hasil per halaman, maksimal sebanyak 10 halaman (yang artinya hasil maksimal sebanyak 100)
    • Bisa juga berupa angka. Misalnya 5, 6, 7, dan sebagainya.
  2. Tulisan yang berwarna MERAH adalah search engine ID. Ganti dengan punya kamu sendiri.

C. Demo / Preview Artikel Terkait Dengan Google CSE

Cara Membuat Google Custom Search CSE Di Blog
Artikel terkait pakai CSE ini juga digunakan di blog igniel.com

D. Tambahan

Nggak seperti related post pada umumnya yang pakai Javascript, daftar yang muncul di Google CSE hanyalah artikel yang sudah terindex oleh Google saja. Jadi pikirkan lagi kalau mau pakai related post di blog dengan CSE. Jika blog kamu sudah bisa terindex dengan cepat, pakai ini jelas nggak masalah. Malah keliatan lebih keren.

Artikel Terkait

35 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • only-pedia
    11/5/21
    Profil: https://www.blogger.com/profile/07731661715006643984
    halo kak, saya telah mengikuti dan mempratekan apapun menurut dari penjelasan diatas juga semua syarat seperti blog yang harus sudah terindex google pun sudah.. akan tetapi kenapa releated postnya tidak muncul yaah.. hanya heading bertulis artikel terkait sajah..


    terimakasih..
  • Admin
    6/3/21
    Profil: https://www.blogger.com/profile/05571785659813421596
    Mau tanya mas, apakah cara ini aman?
  • Saif Ghofur
    27/11/20
    Profil: https://www.blogger.com/profile/04924137136364466463
    Klo membuat cse untuk search box seperti di blog ini gimana mbk??
  • wendy
    19/10/20
    Profil: https://www.blogger.com/profile/16414468084218104366
    Hallo kak mau tnya ni melenceng dkit dr artikel, kok iklan cse utk kotak telusur saya gk muncul uda pasang 2 bulan, dan kmren sempat muncul 2 x saja dan sekarang hilang lagi iklannya, penyebabny apa ya kak
  • BELIDE MS
    22/3/20
    Profil: https://www.blogger.com/profile/11781309192123757061
    mbak nanya nih, saya sudah ikuti semua tutorial nya, tapi kenapa kok gak tampil ya. related post CSE nya?
  • SYBER
    20/3/20
    Profil: https://www.blogger.com/profile/16306120554651388837
    Mbak ijin bertanya nih.
    Untuk membuat related pos 2 kolom seperti textrim gmn ya mbak.
  • shinobi apuy
    22/8/19
    Profil: https://www.blogger.com/profile/16651136465719986160
    bisa diimplementasi ke blog yang menggunakan wordpress nggak mas?
    • Igniel
      22/8/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sebenarnya bisa tapi kode di atas ada yang pakai kode khusus untuk Blogger. Kalau disimpan di WP nggak bakal jalan. Kecuali kodenya ganti sendiri ke PHP.
  • Statinity
    11/4/19
    Profil: https://www.blogger.com/profile/05611718045600974601
    Mbahh kalau saya ingnnya kaya tombol pencarian blog ini mbahh, yang di kiri atas blog ini, keren pakai cse. Mohon tutorialnya mbah
  • Okk
    7/2/19
    Profil: https://www.blogger.com/profile/06161623207271055087
    Siap praktekkan teh, hehe
  • Faisal Halim
    6/2/19
    Profil: https://www.blogger.com/profile/08080507273978118834
    mba bisa dipasangkan di sidebar atau ada cara lain ?
  • Mustaqim Jaed
    3/12/18
    Profil: https://www.blogger.com/profile/14784144912125285948
    kirain saya bisa di make money mbak....jadi yang di klik iklan juga kan menang banyak hihihihihi...mantaaaap mbak.
  • Ahmad
    8/10/18
    Profil: https://www.blogger.com/profile/10715393696437278030
    Boleh request, bahas artikel tentang ketika mencari di kolom "Cari" diblog ini, akan tampil iklan google adsense versi pencarian seperti digoogle, itu gimana buatnya... mohon toturnya... mksih
    • BELIDE MS
      22/3/20
      Profil: https://www.blogger.com/profile/11781309192123757061
      nah iya ,kayak punya mbak igniel ini.
  • excelive
    23/8/18
    Profil: https://www.blogger.com/profile/12486756461019047527
    mengaktifkan fitur Make Money related post ini bagaimana ya?!
    terus, saya kurang paham dengan
    "bagi yang punya Adsense dan membuat CSE yang dimonetasi ......Jangan mengaktifkan...."

    salam kenal
    • Igniel
      23/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu udah dijelaskan. Jangan aktifkan fitur Make Money.
    • tuyul jalan ninjaku
      1/10/18
      Profil: https://www.blogger.com/profile/09179059484668033565
      mbak apakah cara ini bisa dipasang buat home page , apakah nampilin artikel terbarunya tanpa kita pasang di postingan tapi langsung di home page mbak. ditunggu mbak..
  • Unknown
    21/7/18
    Profil: https://www.blogger.com/profile/00111877930717879300
    apakah bisa di hubungkan dengan adsense mba? klo bisa gimanay ya caranya?
    • Igniel
      21/7/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Secara teknis bisa. Dioprek sendiri aja ya. Soalnya menampilkan iklan Adsense di CSE yang otomatis dieksekusi oleh JS itu termasuk pelanggaran.

      Baiknya pengunjung harus tetap ngetik & melakukan search dulu, baru menampilkan iklan.
  • Unknown
    27/5/18
    Profil: https://www.blogger.com/profile/02711751863918246890
    blog yang berfaedah :) ijin Bookmark nih web
  • Inspirasi Wanita
    5/2/18
    Profil: https://www.blogger.com/profile/00795716496098806226
    kalau membuat menampilkan hasil CSE sesuai judul postingan bgaimana mbak ?

    contoh hargaterkini(dot)web(dot)id
    • Igniel
      6/2/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti:
      element.execute("<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>");

      Menjadi:
      element.execute("<data:blog.pageTitle>");
    • excelive
      23/8/18
      Profil: https://www.blogger.com/profile/12486756461019047527
      saya sudah mengganti kode seperti di atas, tapi gak bisa!!
      kenapa ya?1
    • Igniel
      23/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Diulang lagi dari awal. Kalau pasangnya bener pasti work.
    • excelive
      23/8/18
      Profil: https://www.blogger.com/profile/12486756461019047527
      mantab responnya... cepet bgt
      //.
      munculnya pesan seperti ini:
      ....."data:blog.pageTitle" must be terminated by the matching end-tag ""
    • Igniel
      23/8/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Disitu pesan errornya jelas. Ada error di end tag nya. Artinya ada tag HTML yang belum tertutup. Cek lagi
    • 112wan
      14/3/19
      Profil: https://www.blogger.com/profile/05469354780654275111
      lah blog gue ngapain di tulis di komen ini . wkwk
  • Sodikin Kurniawan
    26/12/17
    Profil: https://www.blogger.com/profile/09325774355575553519
    Saya gak pakai kloningan kok mbak, Terima kasih, Mbak.. Bagus buat blogger yang sudah banyak artikel.
  • Dzulgunar Muhammad Nasir
    22/12/17
    Profil: https://www.blogger.com/profile/03559307769678986351
    makasih mbak info nya. Saya masih perlu belajar banyak nih.
  • Anonim
    Anonim 22/12/17
    Mantab Sensai -/\-
  • Gyihg
    22/12/17
    Profil: https://www.blogger.com/profile/10437432100594195055
    Sedikit nanya mbak
    Yg bener itu konten adalah raja atau blog yg unur tua adalah raja ?
    • Igniel
      22/12/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Konten mas. Kalo blog umur tua tapi nggak ada konten buat apa?
  • Zidane Fauzan
    22/12/17
    Profil: https://www.blogger.com/profile/13252002297723466531
    Unique blog , unique template , unique article , unique author , cuma satu-satunya di dunia nih wkwk
  • Mayuf
    22/12/17
    Profil: https://www.blogger.com/profile/01824981112426925761
    Ijin praktek mba, terimakasih :)
    • Igniel
      22/12/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Silakan mas. Semoga sukses.