Membuat Artikel Terkait dengan Kotak Scroll/Scroll Box

Banyak cara untuk membuat artikel terkait di blog satu lagi saya bahas Membuat Artikel terkait dengan mengunakan kotak scroll di bawah postingan di blog. Seperti yang kita tahu, fungsi dari Artikel Terkait atau Related Articles ini adalah untuk memudahkan pengunjung melihat artikel lainnya yang sudah kita posting sebelumnya, hal ini juga akan membuat postingan kita yang sudah lama bisa terlihat, artinya para pengunjung blog tidak perlu obok-obok daftar isi blog kita.

Nah di sini saya ada menambahkan script lain agar Artikel Terkaitnya ada kotak  scroll down nya biar menghemat tempat di blog teman-teman.

Ok, lanjut saja ya, bagi teman-teman yang mau pasang script Artikel Terkait atau Related Articles di bawah postingan blognya bisa mengikuti langkah-langkah di bawah ini:
1. Login ke Blogger, lalu seperti biasa, klik Design/Tata Letak >> Edit HTML,
2. Untuk mencegah error, backup dulu template blog teman-teman dengan cara klik Download Template Lengkap,
3. Lalu cari kode berikut (Ctrl F):  <p><data:post.body/></p> atau<data:post.body/>
4. Jika sudah ketemu maka copy paste kode di bawah ini persis setelah kode <data:post.body/> (jika teman-teman sebelumnya menggunakan Readmore, maka akan ada dua kode <data:post.body/> , pilih kode yang pertama) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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 = 7;
maxNumberOfPostsPerLabel = 7;
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>

5. Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.

6. Selanjutnya, masukkan kode ini di atas kode ]]></b:skin>

.rbbox{border: 1px solid #ccc;padding: 5px;background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #fff;}

PESAN :
Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html. #f0f0f0: warna background