Cara Membuat Artikel Terkait (Related Post)

Kali ini Saya akan membahas tentang Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll.


Contoh Related Post Di Bawah Postingan Dengan Fungsi Scroll :

Untuk cara membuatnya sobat bisa ikuti langakah-langkah berikut :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Template Widget
• Cari kode <data:post.body/> atau <p><data:post.body/></p>
• Jika sudah ketemu selanjutnya sobat copy script berikut dan pastekan di bawah kode tadi.

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

Perhatian :

• Jika sobat sudah memasang readmore dan ada dua atau tiga kode <data:post.body/> atau <p><data:post.body/></p> pilih yang kedua
• Untuk merubah judul Related Post dengan Articles Terkait atau lainnya, sobat cukup rubah kode pertama yang bewarna merah Related Post dengan kata-kata sobat sendiri.
• Jangan disimpan dulu sob, masih di Edit Template, sekarang kita akan memasukkan kode modifikasinya, untuk itu sobat cari kode ]]></b:skin> jika sudah ketemu copy kode berikut dan pastekan di atas kode ]]></b:skin>

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

Perhatian :

• Untuk merubah warna background dan lainnya sobat bisa merubahnya dengan merubah kode warana pada kode modifikasi. Untuk melihat/mengetahui kode warna sobat bisa lihat disini
• Jika sobat ingin mengganti background related post seperti gambar di atas sobat cukup rubah background-color: #E0F8E0 mejadi background:url(http://letakkan Url gambar sobat disini)
• Simpan dan lihat hasilnya

Selamat Mencoba !