Cara Membuat Related Post atau Artikel Terkait Versi Sederhana

Related Post atau Artikel Terkait berguna untuk meningkatkan SEO sebuah blog dan sangat berguna juga buat para pengunjung blog tersebut untuk memudahkan mereka mencari artikel lainnya yang masih berhubungan dengan artikel yang sedang dibuka.

Artikel Terkait yang akan kita bahas berikut ini adalah Relate Post versi sederhana di bawah postingan. Langsung aja kita mulai cara membuat dan memasangnya:

Caranya, di dalam Edit HTML cari kode berikut ini (dengan Ctrl + F untuk memudahkan pencarian):

div class='post-footer'

Biasanya kode tersebut ada 2, yang pertama untuk versi mobile dan yang kedua untuk versi web. Pakai yang kedua untuk versi web.

Kemudian pasang kode di bawah ini tepat di atas atau di bawah kode di atas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2 style=' font-size:19px; color:#CC333B; font-family:verdana; font-weight:normal;'>Artikel Terkait:</H2>
<DIV class='rbbox' style='background:#fff;margin-top:10px;margin-bottom:10px;'>
  <DIV style='margin:0px; font-size:14px; line-height:25px;padding:5px;height:180px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 4;
maxNumberOfPostsPerLabel = 8;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type='text/javascript'>RelPost();</script>
</DIV>
</b:if>

Selesai, jangan lupa Save Template

• Untuk kode kalimat yang diberi warna hijau bisa kamu ganti dengan kalimat lain.

• Untuk kode warna yang diberi warna pink adalah warna latar, bisa kamu ganti dengan kode warna yang sesuai dengan template kamu

• Untuk kode angka yang diberi warna kuning adalah jumlah judul artikel kamu bisa ditambah atau dikurangi menurut selera anda

• Untuk kode angka yang diberi warna merah adalah jumlah label yang tampil
•  

Untuk Demo artikel terkait tersebut, sama dengan yang digunakan di blog Uji SEO ini, cuma bedanya warna latarnya udah kami ganti yang sesuai dengan warna blog ini.

kode sumber