Memasang Fungsi Scroll pada Related Posts

Saya yakin anda sudah sangat sering membaca tentang artikel ini. Tapi, saya akan tetap menulis artikel ini untuk menambah koleksi tutorial blogspot saya yang masih sangat sedikit dan mungkin juga bisa bermanfaat bagi teman-teman yang masih dalam tahapan belajar seperti saya.

Kegunan memasang scroll pada related posts yaitu agar tidak menyulitkan pembaca dalam mencari artikel terkait pada blog anda. Apalagi jika postingan kita sudah sangat banyak sehingga artikel terkait terlalu kepanjangan ke bawah.

Untuk anda yang berminat memasangnya caranya sangat mudah. Tapi bagi anda yang terlanjur menggunakan related posts versi yang lama seperti pada postingan saya sebelumnya, berarti anda harus menghapusnya dulu. Cara menghapusnya silahkan anda ikuti petunjuk pada postingan saya terdahulu dan hapus kodenya.

Fungsi Scroll pada Related Posts akan tampak seperti gambar berikut:

Cara pasangnya ssebagai berikut:
1. Login ke akun blogger anda

2. Klik Layout

3. Klik Edit HTML dan beri centang Expand Widget Template

4. Backup Template Blog anda dengan cara Download Full Template untuk berjaga-jaga bila nantinya terjadi kesalahan.

5, Kemudian copy dan paste script dibawah ini setelah kode <data:post.body/>

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

Tulisan related posts (warna merah) diatas bisa anda ganti dengan teks favorit anda. Begitu juga angka-angkanya (warna biru) bisa anda ganti sesuai keinginan.

6. Klik SAVE TEMPLATE. Setelah itu akan tampil perubahan pada related posts anda.