Related Post Dengan Google CSE (Custom Search Engine) pada Blog

Related post merupakan daftar dari artikel yang memiliki topik pembahasan yang sama dengan artikel utama yang sedang dibaca. Berfungsi 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.

Custom Search Engine (CSE) merupakan layanan Google khusus untuk melakukan pencarian di blog. Biasanya hasil dari CSE hanya akan keluar apabila anda melakukan aktifitas pencarian terlebih dahulu. Hasilnya akan menampilkan artikel terkait lebih banyak yang dibagi menjadi beberapa halaman. Ketika pindah halaman pun dia nggak nge-reload dulu.

A. Buat Unit CSE

Pertama, anda harus create/buat unit CSE yang baru terlebih dulu.
Buka link cse.google.com

Pada kolom Site to Search, isi dengan URL blog anda diikuti tanda slash dan bintang.
 Contoh:
 jasabuatsoftware.blogspot.com/*

Pada Language pilih Indonesia. Atau sesuaikan dengan bahasa blog anda.

Pada Name of the search engine, isi sesuai keinginan anda. Ini adalah nama unit Google CSE.

Selesai? Klik tombol CREATE 

Pada menu Look and feel, pilihlah Results only. Lalu klik tombol Save & Get Code

Akan muncul kode CSE yang tadi dibuat. Dan perhatikan bagian var cx = '0090xxxxxxxxxxxxxx:abcde_fg' Ini adalah search engine ID yang nanti kamu perlukan. Sementara simpan dulu di notepad.

B. Pengaturan di Blog

Cara perapkan pada blogger Langkahnya:
Untuk memperbagus tampilan, tambahkan dulu kode CSS berikut. Simpan ⏫ SEBELUM </style> ATAU </b:skin>.

 /* Related Post with Google CSE by Pirates Code */
#PCRelate {margin:0px; padding:0px; text-align:center; border-top:0px; border:1px solid #008c5f; border-top:0px} #PCRelate 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}
#piratCSE {padding:0 20px 10px 20px; text-align:left; width:auto; height:100%; line-height:18px}
#piratCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#piratCSE .gsc-control-cse {margin:0px; padding:0px}
#piratCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#piratCSE .gsc-results {width:100%}
#piratCSE .gsc-search-box, #piratCSE .gsc-above-wrapper-area, #piratCSE .gsc-resultsHeader {display:none}
#piratCSE .gsc-webResult .gsc-result {padding:0px}
#piratCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#piratCSE .gs-result .gs-title, #piratCSE .gs-result .gs-title * {text-decoration:none; color:#008c5f; font-size:14px; font-weight:600; padding-bottom:18px}
#piratCSE .gs-result .gs-snippet {font-size:12px}
#piratCSE .gsc-reviewer, #piratCSE .gs-result a.gs-visibleUrl, #piratCSE .gs-result .gs-visibleUrl{color:#767676}
#piratCSE .gsc-table-cell-thumbnail, #piratCSE .gs-promotion-image-cell {padding-right:10px}
#piratCSE .gsc-results .gsc-cursor-box {margin:0px}
#piratCSE .gsc-preview-reviews ul {margin:0px}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #piratCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#2f303f !important}
#piratCSE .gsc-cursor .gsc-cursor-page {background:#008c5f}
#piratCSE .gsc-cursor .gsc-cursor-page:hover {background:#2f303f}
#piratCSE .gsc-url-top {padding:0px}
#piratCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#2f303f}
#piratCSE .gsc-thumbnail-inside {padding:0px} 

Cari kode <data:post.body/>. Gunakan shortcut CTRL + F untuk memudahkan. Jika ada beberapa kode, pilih yang terakhir. Tapi struktur setiap template pasti berbeda. Pastikan anda memilih salah satu yang work dengan template anda.

Simpan script berikut ⏬ SETELAH <data:post.body/>

<b:if cond='data:view.isPost'>
<div id='PCRelate'>
<h3>Artikel Terkait</h3>
<div id='piratCSE'/>
<script>//<![CDATA[
// Related Post with Google CSE piratescode
function piratCSE() {
  if (document.readyState != 'complete') {
    return google.setOnLoadCallback(piratCSE, true);
  }
  google.search.cse.element.render({gname:'gsearch', div:'piratCSE', 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: piratCSE
};
(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> 

Simpan Template