Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot

Duh, sebenernya saya ga enak hati mau posting artikel yang satu ini, hahaha, ternyata kelewatan, saya lupa (sibuk nonton Piala Dunia 2010), saya fikir sudah diposting, ternyata belum :P

Fungsi dari Artikel Terkait atau Related Articles ini adalah untuk memudahkan pengunjung melihat artikel lainnya yang sudah kita posting sebelumnya, hal ini juga akan membuat postingan kita yang sudah lama bisa terlihat, artinya para pengunjung blog tidak perlu obok-obok daftar isi blog kita.

Nah di sini saya ada menambahkan script lain agar Artikel Terkaitnya ada kolom scroll down nya biar menghemat tempat di blog teman-teman.

Lihat pict

Ok, lanjut saja ya, bagi teman-teman yang mau pasang script Artikel Terkait atau Related Articles di bawah postingan blognya bisa mengikuti langkah-langkah di bawah ini:

1. Login ke Blogger, lalu seperti biasa, klik Design/Tata Letak >> Edit HTML,
2. Untuk mencegah error, backup dulu template blog teman-teman dengan cara klik Download Template Lengkap,
3. Kalau sudah, klik checkbox Expand Template Widget,
4. Lalu cari kode berikut (Ctrl F): <p><data:post.body/></p> atau <data:post.body/>
5. Jika sudah ketemu maka copy paste kode di bawah ini persis setelah kode <data:post.body/> (jika teman-teman sebelumnya menggunakan Readmore, maka akan ada dua kode <data:post.body/> , pilih kode yang pertama) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>

<div class='widget-content'>
<h3>Artikel Terkait Lainnya Seputar:</h3>

<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
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;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>

6. Jika sudah, klik save templates dan lihat hasilnya.

Kira-kira seperti itulah Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot, selamat mencoba dan semoga berhasil.