Membuat Artikel Terkait - Related Article [posts] dengan scroll

Membuat Artikel terkait atau Related Article [post] dengan scroll maksudnya secara bahasanya buwel ya memberikan semacam widgets yang mencantumkan artikel artikel yang berhubungan yang disatukan dalam sebuah label, yang bentuknya semacam widgets ntu dengan sebuah scroll, yaitu sesuatu yang bisa ditarik keatas kebawah untuk kepraktisan.
(seperti gambar yang diperoleh dari sini)




Nah, mungkin yang udah pernah pasang related posts kek gini udah tahu, bagi yang belum pasang jadi tahu dan buwelpun mosting hanya tuk arsip cara membuat artikel terkait denga pake scroll ini. Jadi tanpa lama lama, langsung menuju ke cara membuatnya, pun diambil dari yang punya gambar artikel terkait diatas. he

seperti biasa login ke blogger.com, tata letak atau rancangan (sekarang), lalu klik edit html kemudian centang kotakkan kecil expaand widgetsnya, lha truss cari kode ini

<p><data:post.body/></p>

, kalo ketemu letakkan kode dibawah, dibawah kode tadi yang pertama

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

selanjutnya cari ]]></b:skin> , dan pasang kode berikut ini diatasnya

/*-- modifikasi related posts oleh http://bangdel.blogspot.com--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Selesai dah cara membuat artikel terkait atau related article atau related posts ini, tentang misal script backgroundnya beda dengan warna blognya(script yang ini EFFBEF) anda mungkin bisa diganti ganti kode warnanya di kode warna htmlnya dini.
Salam...
Anak SMP