Cara Membuat Artikel Terkait Dengan Scroll Box

Artikel terkait adalah sebuah widget yang memuat setiap post/artikel yang terkait atau diterbitkan dalam kategori yang sama dalam sebuah blog.

Fungsi dari Artikel terkait ini tentunya agar memudahkan pengunjung untuk mendapatkan artikel yang sesuai dengan artikel yang sedang dibaca sekarang. Sehingga bagi para blogger sendiri mendapatkan page view yang lebih besar dan memperoleh perhatian lebih di mata Searh Engine.

Nah, artikel terkait terkadang terlalu banyak sehingga membutuhkan ruang yang lebih besar untuk menampilkan semuanya. Maka pada saat itu dibutuhkan alternatif untuk menghemat ruang pada halaman blog untuk menampilkan Artikel tekait itu dengan fungsi scroll. Dengan Scroll Box ini kita dapat memasukkan berpuluh-puluh postingan tanpa batas dalam sebuah kotak yang dapat discroll.

Contoh Artikel Terkait Dengan Scroll Box

Dan berikut Cara Membuat Artikel Terkait Dengan Scroll Box :

Masuk ke akun Blogger Anda.
Klik Rancangan > Edit HTML.
Klik Download Template Lengkap untuk membuat salinan template untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan, sehingga kita dapat dengan mudah mengembalikan template ke seperti sebelumnya.
Cari kode <data:post.body/> Untuk mempercepat pencarian, lakukan dengan Ctrl+F.
Jika Anda sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/>, pilih yang kedua. Dan jika Anda sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.
Copy kode di bawah ini dan paste di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<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 = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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>

Dan Simpan template Anda.