Cara Membuat Artikel Terkait Di Blog (Related Article)

Disini kita akan membahas bagaimana cara membuat artikel terkait / related article atau related post menggunakan scroll box pada tiap akhir postingan dalam blog yang berada dibawah akhir dari suatu artikel postingan blog. Cara Membuat Artikel Terkait Di Blog

-Berikut contoh gambar nya :

-Berikut Caranya :

1.Log in ke akun blog anda
2.Ke menu Rancangan/Template > Edit Html
3.Perhatikan gambar dibawah ini :

• (1).Klik checkbox Expand Template Widget
• (2).Tekan ctrl + F pada keyboard, lalu ketikkan kata <data:post.body/> , ada 2 atau lebih kata yang serupa, untuk mencari semua butuh waktu lama, untuk menyingkatnya baca keterangan no. 3
• (3).Klik tombol Higlight All, maka akan muncul semua kata yang bertuliskan <data:post.body/> , dengan warna pink
• (4).Masukkan kode script tepat dibawah kata <data:post.body/> yang pertama ketemu, lalu simpan. Jika belum berhasil hapus kode script tadi dan coba pindahkan kode script nya dibawah kata yang kedua ketemu atau yang ketiga. Kode script nya ada dibawah, silahkan di copy. 

4.Silahkan Copy kode script dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:100px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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>

Keterangan :

-Teks warna Merah adalah judul dari related article nya, silahkan diganti dengan teks yang anda inginkan

-Angka warna Biru adalah ukuran panjang vertical (atas bawah) kolom scroll box, silahkan di ganti sesuai dengan keinginan anda. 

-Apabila anda ingin belajar mengedit / merubah bentuk warna tampilan related post dengan lengkap silahkan klik disini lengkap dengan tutorialnya

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami artikel tentang Cara Membuat Artikel Terkait Di Blog . 

Terima Kasih.