Cara Membuat Artikel Terkait / Related post Sederhana

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Artikel Terkait Sederhana yang biasanya ditambahkan di bawah postingan artikel blog. Fungsi dari Artikel Terkait Sederhana itu sendiri merupakan salah satu teknik untuk menambah tampilan kunjungan halaman, dari posting artikel yang terkait atau related post dengan label tertentu secara otomatis.

Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Artikel Terkait Sederhana ini cukup bagus ditambahkan di bawah postingan, karena loadingnya yang cukup cepat, dimana Artikel Terkait ini hanya menampilkan judulnya saja. Tentu saja Artikel Terkait tersebut dapat sedikit di modifikasi sesuai kebutuhan, Seperti Merubah Namanya Menjadi Related Post, Mungkin Anda Juga Tertarik Dengan Artikel Ini, dan lain-lain.

Berikut Uraian Cara Membuat Artikel Terkait Sederhana.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2, 
    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), 
    Dan cari kode berikut div class='post-footer'
    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
    Kode tersebut mungkin ada 2, pertama untuk versi mobile, 
    kedua untuk versi web (biasanya yang kedua).
6. Copy Paste-kan Kode berikut diatas (dibawahnya juga bisa) div class='post-footer' yang kedua (versi        web).

<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>

 
    Kira-kira tampilannya seperti ini
    ...Kodenya...

    <div class='post-footer'>    ... atau Kodenya paste Disini...    <div class='post-footer-line post-footer-line-1'>

   Keterangan:  
   Artikel Terkait berwarna pink: dapat Diganti namanya sesuai keinginan.
   Text berwarna biru dapat dirubah angkanya untuk jumlah tampilan judul.

7. Save Template, dan lihat hasilnya. :)

Kalau belum berhasil silahkan tinggalkan komennya di bawah sob .. :)