Cara Membuat artikel Terkait dengan Scroll di bawah postingan Blog.

Walau mungkin cara ini sudah tidak asing lagi dan bisa di bilang jadul. Tapi tak apa mungkin sebagian dari sobat belum tahu dan ingin mempraktekkanya...hehehehe. pada dasarnya artikel terkait atau related post bisa ditempatkan di sidebar, untuk kali ini kita akan mencoba untuk menempatkan artikel terkait di bawah postingan. Untuk Contoh Lihat Screenshot di bawah ini :

sebelum mulai membuat artikel terkait ini silakan di backup dulu template Sobat. setelah itu apakah artikel Sobat sudah di categorikan/label??kalau belum coba kategorikan/label artikel Sobat dulu, karena ini sangat mempengaruhi ada tidaknya tampilan artikel terkait di bawah postingan, untuk yang sudah mengkategorikan/label artikelnya,bisa langsung membuat artikel terkait di bawah ini :

1. Login ke Blogger dengan akun gmail Sobat

2. Klik Tata Letak

3. Klik tab Edit HTML

4. Klik Expand Template Widget

5. Kemudian Cari kode yang seperti ini :

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

atau tekan Ctrl + F untuk pencarian cepat.

6. Setelah ketemu copy/paste kode di bawah ini setelah kode <p><data:post.body/></p> atau <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<strong>Artikel Terkait di Bawah posting</strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<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;ardi33&#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>

Catatan : Tulisan Berwarna Biru bisa Sobat Rubah Sesuka Sobat...

7. Save/simpan, dan kemudian lihat hasilnya.

Nah mungkin Hanya itu yang bisa saya Sampaikan, lebih dan kurangnya mohon di maafkan. Selamat mencoba dan Semoga Berhasil... :D

Baca Juga yang ini Sob...: