Membuat Related Posts / Artikel Terkait di Bawah Postingan Blog

Cara Membuat Related Post/ Artikel Terkait di Bawah Posting Blog sebenarnya cukup mudah, tujuannya ya tentu agar pembaca blog kita mengetahui, artikel-artikel apa saja yang berhubungan dengan artikel yang sedang dibaca. Selain widget Recent Post atau pun Popular Posts, Related Posts atau dalam bahasa Indonesia sering disebut Artikel Terkait ini adalah berdasarkan Label atau Kategori artikel yang sedang dibuka. Pada Tutorial kali ini saya mau berbagi mengenai cara membuat artikel terkait biasa berupa teks yang berada di bawah posting, yaa siapa tau pengunjung blog kita mau membukanya, hitung-hitung buat nambah statistik kunjungan.

Buat apaan sih fungsi artikel terkait ini, salah satunya adalah untuk mengurangi tingkat bounce rate sebuah blog, apa itu bounce rate silakan buka artikel Bounce rate definisi, pengaruh dan cara mengetahuinya

Langsung saja:

1. Seperti biasa Login di akun Blogger Anda, Klik Rancangan > Template > Edit HTML > Lalu cari kode 

]]></b:skin>

2. Tepat di atas kode itu, masukkan kode di bawah ini:

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}

3. Cari kode berikut ini  <div class=’post-footer-line post-footer-line-1′>, lalu dibawahnya masukkan kode berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Artikel Terkait</h4>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 2;
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;data2007&#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>
</div>
</b:if>

Kata Artikel Terkait yang berwarna merah, silakan Anda ganti jika mau menggantinya. 

4. Klik pratinjau, kalau berhasil lalu save/simpan template.

Jika Anda mau mencoba namun belum berhasil saya siap bantu lewat komentar. Demikian posting cara membuat artikel terkait di bawah posting, semoga bisa membantu.