cara membuat Artikel terkait (related post) dengan Scroll

Bagaimana cara membuat Artikel Terkait dengan menggunakan Scroll. Pada posting sebelumnya saya telah menulis bagai mana cara memasang artikel terkait di bawah postingan. Namun untuk kali ini saya ingin menulis tentang bagaimana cara memasang artikel terkait dengan menggunakan fasilitas scroll. Dimana dengan menggunakan Fasilitas Scroll disini bisa menghemat tempat karena dengan adanya scroll yang bisa di naik atau turunkan, sehingga mau berapa banyak pun artikel yang ingin di tampilkan di artikel terkait tidak terhalangi oleh batas ruang yang di sediakan. Dan dengan menggunakan Scroll juga memungkinkan blogger kita terlihat menjadi rapi.  Berbeda dengan yang pertama yang menggunakan artikel terkait biasa yang hanya mengandalkan jumlah artikel yang ingin di tampilkan. Untuk contohnya anda bisa lihat gambar di bawah ini.

-contoh penggunaan artikel terkait menggunakan scroll-

Berikut ini adalah langkah-langkah untuk memasang artikel terkait dengan scroll :

1. Kita Log In dulu ke akun Blooger

2. klik "RANCANGAN" jika kita menggunakan tampilan blogger yang dulu, kemudian klik "EDIT HTML". Jika menggunakan tampilan yang baru kita klik saja "TEMPLATE", kemudian klik "EDIT HTML", kemudian klik "lanjutkan".

3. Jangan lupa klik "Expand Template Widgets".

4. Cari kode HTML <data:post.body/> (gunakan CTRL + F untuk pencarial lebih cepat).

5. Letakkan kode HTML di bawah ini setelah kode <data:post.body/> di atas.

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

6. Untuk kata artikel terkait yang berwarna merah bisa di ganti dengan kata lain sesuai keinginan anda.

7. Selanjutnya kita cari lagi kode HTML ]]></b:skin> (gunakan CTRL + F biar cepat)

8. letakkan kode HTML di bawah ini tepat di atas kode HTML ]]></b:skin> .

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


keterangan kode :
#D8D8D8, #E0F8E0, #EFFBEF 
bisa anda ganti dengan kode warna HTML yang anda inginkan.

 9. Klik simpan dan lihat hasilnya.


terima kasih sudah mampir di blog saya.. mohon jangan lupa klik like nya ya...