Cara Membuat Related Post Dengan Google CSE (Custom Search Engine)

Table of Contents

Custom Search Engine (CSE) adalah layanan dari google yang yang di khususkan untuk melakukan pencarian di blog atau website.

Biasanya hasil dari CSE hanya akan muncul saat Anda melakukan aktifitas pencarian terlebih dahulu.

Membuat Related Post Dengan Google CSE

Teryata ada banyak cara membuat membuat related post di blog dengan menggunakan google CSE, salah satunya yaitu bisa menampilkan artikel terkait lebih banyak yang dibagi beberapa halaman.

Apa itu related post? Related post adalah daftar artikel yang memiliki topik pembahasan yang sama dengan artikel utama yang sedang dibaca. Fungsinya untuk menarik minat pengunjung agar membuka artikel lainnya.

Berikut cara membuat related post dengan google CSE by igniel. Jika Anda ingin mencoba, silakan ikuti langkah-langkah di bawah ini:

• Pertama, Anda harus membuat unit CSE baru terlebih dahulu.
• Kunjungi https://cse.google.com.
• Pada kolom site to search, isi dengan URL blog Anda, diikuti tanda slash dan bintang. Misalnya: www.urlsobat.com/*
• Pada Language pilih Indonesia atau sesuaikan dengan bahasa blog Anda
• Pada name of the search enggine, isi sesuai keinginan. Ini adalah nama unit Google CSE
• Selesai? Klik tombol create
  
• Pada menu Look and feel, pilih result only.
• Lalu klik Save & Get Code

Akan muncul kode cse yang sebelumnya Anda buat. Perhatikan bagian var cx = '0080xxxxxxxxxxxxxx:abcd_fg' ini adalah search engine ID yang nantinya Anda perlukan.

Pengaturan di Blog

Tambahkan kode CSS berikut, simpan sebelum </style> atau ]]></b:skin>

/* 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}

1. Cari kode <data:post.body/>

2. Gunakan CTRL+F agar lebih mudah

3. Jika terdapat beberapa kode. Pilih yang terakhir, karena setiap struktur pada template pasti berbeda-beda.

4. Pastekan 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>

5. Simpan Tema

Pengaturan:

Tulisan yang berwarna biru adalah jumlah related post dengan CSE yang ditampilkan, Anda bisa mengubahnya dengan:

• small : 4 hasil per-halaman
• large : 8 hasil perhalaman
• filtered_cse : Sampai dengan 10 hasil per-halaman, maksimal sebanyak 10 per-halaman
• Atau bisa juga berupa angka, misal 5,6,7 dsb
• Ganti yang berwarna merah dengan ID search engine Anda

Daftar yang muncul di Google CSE hanyalah halaman yang sudah terindeks google saja.