cara membuat related post otomatis dengan blogroll

Related post untuk menampilkan posting - posting yang berkaitan dengan artikel yang sedang di buka oleh pembaca blog. Selain mempercantik tampilan blog, relatid post juga berguna untuk menarik pembaca membaca artikel yang lain. Tentu saja ini akan sangat berguna untuk sedikit menambah rating blog kita karena banyaknya klik di blog kita.  Related post ini juga akan memudahkan karena isinya akan ter update otomatis saat kita memposting dengan postingan baru, bahkan postingan lama pun akan ikut terbaca.

Langsung aja berikut cara membuatnya :
1. Login ke blog anda, caranya seperti biasa ( untuk kasus ini prakteknya di blogspot/blogger )

2. Klik tab menu  tata letak (Layout yang pake bahasa inggris)

3. Klik tab menu edit html

4. centang kotak Expand Template Widget untuk menampilkan semua kode html blog

5. cari kode <p><data:post.body/></p>
    untuk mempermudah menemukan tekan ctrl+f di keyboard anda, maka akan tampil kotak pencarian pojok kiri bawah  browser 
    

di bawah kode tadi, paste skrip dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;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 = 50;
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>

6. Jika sudah selesai, selanjutnya cari kode berikut ]]></b:skin>
   setelah ketemu, di bawah kode script tadi pasti script di bawah ini

.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF
;}

7. selesai, dan silahkan lihat hasilnya.

untuk mencoba, klik salah satu postingan di blog anda. related post hanya akan terlihat jika anda mengisi label pada artikel anda. related post akan menampilkan posting dengan label yang sama. contohnya dapat anda lihat pada bagian bawah artikel ini.

catatan : tulisan yang berwarna biru berkedip "related post" bisa di ganti sesuai keinginan anda, dan bila ada tulisan script yang muncul di blog, coba pindah script pada nomor 6 di atas yang pada awalnya di bawah kode ]]></b:skin>
  , sekarang di paste di atasnya dan coba di lihat apakah masih muncul tulisan script tadi...

Kita dapat mengubah warna baground pada related post kita, tulisan kedip warna merah pada nomor 6 untuk warna default baground dan tulian kedip warna hijau adalah warna baground pada saat related post kita di sorot mouse kita. andah dapat mengubah sesuai keinginan anda dengan memasukkan kode warna html yang anda sukai
smoga bisa !!!!!!