Cara Pasang Artikel Terkait dengan Scroll

Pada postingan tutorial sebelumnya, saya sudah ngepost tentang cara memasang "Artikel Terkait di atas atau di bawah postingan blog", karena setelah diperhatikan kedepannya Related Post/artikel terkait yang telah terpasang di blog terlihat kurang rapi, maka dari itu search lagi tentang cara membuat/pasang Artikel Terkait dengan scroll.
Banyak juga tutorialnya, namun hasilnya nihil. Mau coba saya padukan kode scriptnya dengan cara pasang scroll pada gadget blog, jadinya malah berantakan. setelah menelusuri lagi, nah akhirnya ketemu deh yang bisa work.

[demonya silahkan dilihat sendiri di bagian bawah post]

berikut langkah-langkahnya:

masuk ke dashboard blogger
pilih Template
pilih Edit Html
centang Expand Template Widget
tekan Ctrl+F, cari kode ]]></b:skin>
lalu masukkan kode script berikut diatasnya:


.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }


keterangan:

untuk kode berwarna hijau, adalah lebar dari garis tepinya, silahkan diganti sesuai keinginan
untuk kode berwarna biru muda, adalah kode warna dari background saat cursor tidak diletakkan tepat di scroll artikel terkait, bisa diganti sesuai keinginan

kemudian cari kode berikut <data:post.body/>

masukkan kode script berikut di bawahnya


<b:if cond='data:blog.pageType == "item"'>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 25;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>


untuk kode script berwarna merah, adalah judul dari Related Postnya, silahkan diganti sendiri
untuk kode berwarna pink, juga bisa diganti sendiri(terjemahkan sendiri ya!)

FINISH,,,HAVING FUN