Membuat "Related Posts" pada Blog (With Scroll)

Apa itu related post? mungkin pertanyaan itu yang ada di benak anda. related post adalah suatu teknik yang berguna untuk menampilkan artikel/postingan yang berhubungan dengan artikel yang dibaca pengunjung blog.Misalnya suatu pengunjung membaca suatu arikel berjudul "A", maka pada bagian bawah halaman akan muncul suatu tulisan "Related Posts By Categorise" atau "Artikel Terkait" atau "Related Post" yang menampilkan artikel2 yang satu label/berhubungan dengan artikel yang berjudul "A" tersebut. Ini berguna untuk menawarkan artikel anda yang lain agar dibaca oleh pengunjung blog.

"Related Post" With Scroll sebenarnya sama saja fungsi'ny dengan "Related Post" yang lain, karena banyaknya kreasi atau model dari "Related Post" itu sendiri. Namun yang membedakan adalah terdapat Scroll pada "Related Post" ini yang berfungsi apabila artikel di blog anda banyak maka content dari "Related Post" tersebut tidak akan terlalu memanjang dan ini akan terlihat lebih simple, rapih dan praktis seperti gambar dibawah ini.



Langkah-langkah yang harus anda lakukan adalah:
1. Tentunya anda harus login ke account blogger anda.
2. Pilih "Tata Letak" atau "Layout" --> "Edit HTML".
3. Centang pada "Expand Widgets template".
4. Cari kode berikut <data:post.body/> atau <p><data:post.body/></p> tergantung template anda menggunakan kode yang mana, Anda dapat menggunakan fungsi search untuk mempermudah menemukannya dengan menekan ctrl+f.

5. Apabila template blog anda sudah dimodifikasi dengan penambahan fungsi "Read More.." mungkin terdapat dua kode <data:post.body/> atau <p><data:post.body/></p> . Copy kode dibawah ini dan letakan tepat dibawah kode <data:post.body/> atau <p><data:post.body/></p> yang pertama atau jika nanti hasilnya tidak muncul bisa anda coba letakan dibawah kode <data:post.body/> yang kedua, karena tergantung template'nya sendiri.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 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;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. Anda dapat memodifikasi tulisan "Related Post" dengan tulisan kesukaan anda. Apabila sudah lakukan Save template.

7. Apabila content dari "Related Post" tidak mau tampil maka anda perlu membaca artikel saya berikut TROUBLESHOOT "RELATED POST" TIDAK MAU TAMPIL

Artikel Terkait: