Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Related Post di Blogspot Terbukti Running

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.


cara membuat related post di blogspot

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

Sebelum ke pembahasan step by stepnya, tidak ada salahnya untuk cek juga panduan blog kami yang lainnya, di antaranya; cara membuat faviconcara membuat syntax highlighter di blog, dan cara membuat tombol share di blog.

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.


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?

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.

Ini adalah salah satu contoh lagi postingan di AneIqbal dengan kategori/label "Cisco Packet Tracer" (Membuat Jaringan WAN Dengan Cisco Packet Tracer). Sudah ada related post-nya.

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.

Sebelum menutup pembahasan kali ini, kami masih punya beberapa rekomendasi postingan yang mungkin sedang Anda butuhkan juga. Di antaranya yaitu jump break bloggercara membuat visitor counter di blog, dan cara membuat recent post di blog.

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