MEMBUAT ARTIKEL TERKAIT DENGAN FUNGSI SCROLL

Untuk Sobat BS Blogger udah pada tau kan apa itu Related Post atau dalam bahasa Indonesianya Artikel Terkait. Artikel Terkait/Related Post ini berfungsi untuk menghubungkan Sobat BS dari satu artikel ke artikel yang lain, tetapi masih dalam satu Label. Ada juga yang berfungsi menghubungkan artikel satu ke artikel yang lain tetapi beda Label, dan kali ini saya akan share yang menghubungkan sesama label dan dengan tambahan fungsi scroll.

Contoh penggunaa Artikel Terkait dengan scroll

Oke, kalau sudah melihat Screen Shout nya, mari kita pelajari cara membuatnya.

1. Masuk ke akun blogger Sobat BS dan klik Tata Letak.
2. Setelah itu, klik Edit HTML (Sebelumnya download/unduh template Sobat agar aman).
3. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3).
4. Lalu Copy dan Paste kode di bawah ini, sebelum kode ]]></b:skin>
/* Artikel Terkait */ .rbbox{border: 1px solid #D8D8D8;padding: 5px; background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: #EFFBEF;}

5. Setelah itu, cari kode <data:post.body/> dan Copy-paste kode dibawah ini dibawah kode <data:post.body/>

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

6. Save/simpan Template dan lihat hasilnya. ^_^
7. Dan akhirnya Klik CTRL+D.

NB : Untuk Sobat BS yang dapet banyak kode <data:post.body/>, masukin aja kode ke-2. Jadi, cari kode <data:post.body/> yang ke-2, BUKAN YANG PERTAMA !

Sekian, bila ada kekurang pahaman silahkan komen di kotak komentar :)