Menambahkan Scroll Box pada Artikel Terkait / Related Post

     Sebelumnya saya sudah pernah memposting cara menambahkan related post pada blogger. Dan sekarang saya juga akan ngasih tahu lagi caranya menambahkan related pos ini. Lalu, apa bedanya sama yang sebelumnya? Nah, yang berbeda pada postingan sekarang adalah bentuk kotak related postnya. Kali ini saya akan menambahkan fungsi scroll box pada kotak related post. Tampilannya seperti gambar dibawah ini.


Cara menambahkannya ikuti langkah berikut :

1. Masuk blogger > rancangan > edit html > centang expand template widget cari kode  

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> 

( gunakan Ctrl+F ).
 Sebelumnya backup dulu template sobat. (Download Template Lengkap).

2.  Copy kode berikut dan letakkan dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similar'>
<div class='widget-content related-by-cat'>
<h3>Related Posts / Artikel Terkait :</h3>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #A9D0F5;'>
<div id='data2007'/><br/><br/>
<div id='hoctro' style='display:none;'>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;

maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;

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;data2007&#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>
</div>

</div>
</b:if>

3. Pratinjau terlebih dahulu, kalau tidak ada kesalahan silahkan Simpan Template.