Cara Membuat Related Post di Blogspot Terbukti Running

Cara membuat related post di blogspot sedikit rumit. Pasalnya, jika salah satu huruf saja, maka script related post blogspot ini bisa gagal jalan. Untuk itu, silakan simak panduan berikut secara seksama.

Anda yang mampir ke sini berarti sedang mengoptimasikan blognya dan salah satu cara optimasi blog supaya visitor tetap betah di blog adalah dengan cara membuat related post. Singkatnya, related post adalah rekomendasi artikel/postingan yang terkait atau berkategori sama dengan postingan yang sedang dibaca.

Lalu, bagaimana caranya buat related post di blogspot? Simak ya pembahasan AneIqbal berikut sampai akhir.

Baca juga: Cara Membuat Artikel di Blogger Mudah dan Detail


Langkah-langkah membuat related post di blogspot

Untuk membuat related post, kita akan menambahkan beberapa kodingan ke template yang kita pake saat ini. Sangat direkomendasikan untuk membackup template dulu sebelum dioprek.

related post blogger

Selanjutnya, kita mulai masuk ke Edit HTML yang ada di halaman Theme Blogger. Mari kita ngoding.

1. Tambah Koding CSS

Hal pertama yang harus dilakukan untuk membuat related post adalah menambahkan koding CSS. Koding CSS ini yang mengatur bagaimana tampilan related post-nya. Untuk warna, besar, dan jenis hurufnya, bisa Anda kustom sesuai dengan keinginan Anda.

Bagi Anda yang belum dan pengen tahu apa itu CSS, Anda bisa ke kumpulan tutorial CSS yang sudah pernah kami bahas sebelumnya. Berikut koding CSS yang harus ditambahkan ke dalam template.

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:22px;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0088ff;}
#related-posts li{text-indent:0;line-height:1.3em;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#0088ff;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

Dimana harus ditambahkan? Tekan Ctrl+F (Windows) atau Command+F (macOS) di dalam kotak koding template. Lalu ketik ]]></b:skin> pada kotak pojok kanan atas.

membuat related post di blogspot

Ada kan? Lalu paste-kan koding CSS di atas tepat di atas ]]></b:skin>. Langkah pertama selesai. Let's go the next step.

Baca juga: Pasang Jump Break Blogger supaya Blog Lebih Ringan

2. Tambah koding fungsi Javascript

Selanjutnya, kita harus menambahkan koding Javascript. Koding Javascript ini berisi koding fungsi (function) untuk membuat related post. Fungsi inilah yang nantinya akan digunakan untuk men-generate artikel/posting yang terkait.

Koding Javascriptnya.

<script type='text/javascript'>
var relatedpoststitle=&quot;Postingan menarik lainnya&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Postingan menarik lainnya bisa Anda ganti sesuai dengan keinginan Anda. Misalnya, "Related post" saja. Koding di atas harus ditambahkan tepat di atas </head>. Sudah? Lanjut kelangkah terakhir.

3. Tambah Koding untuk Panggil Fungsi Javascript

Inilah langkah terakhir untuk membuat related post di Blogger. Fungsi Javascript yang sudah dibuat di langkah kedua akan dipanggil.

Pemanggilan fungsi ini dimaksudkan untuk men-generate artikel/posting yang terkait.

Berikut kodingannya.

<!-- related post script -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>
<!-- related post script -->

Lihat var maxresults=6; pada koding di atas. Ini adalah jumlah artikel/posting yang akan muncul di related post. Silakan ganti angka 6 sesuai dengan keinginan Anda.

Tambahkan koding tersebut tepat di bawah <data:post.body/>. Mungkin saja Anda akan menemukan <data:post.body/> lebih dari satu. Di template AneIqbal pun ada 3. Lalu, dimana harus ditambah?

Baca juga: Cara Mengaktifkan Deskripsi Penelusuran Postingan di Blogger

Di template AneIqbal, harus ditambah di bawah <data:post.body/> yang kedua. Silakan Anda coba juga ditambah di kedua. Bila related post belum muncul, coba di yang lain. Kemudian klik Save Theme.

related posts blogger

Jika sudah disimpan, maka kita harus pastikan apa yang kita kerjakan tadi ada hasilnya. Ada related post di bawah setiap postingan. Silakan buka salah satu postingan Anda dengan kategori atau label apapun dan perhatikan bagian bawah postingan.

cara membuat related post otomatis

Bagaimana? Apakah Anda berhasil? Pastikan Anda mengikuti tiap langkah-langkahnya secara seksama agar tidak ada kesalahan sehingga related post blogger bisa berjalan di blog Anda.

Demikian pembahasan cara membuat related post otomatis di blogspot. Semoga Anda berhasil memasang related posts blogger di blog milik Anda tanpa kendala.