Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll

I Am Happy blogging !!! hehehe . . .
O iya sebelumnya saya ingin mengucapkan terimakasih kepada teman-teman yang sudah mampir ke blog saya dan membaca postingan/articles ini, ehm . . . tapi jangan cuma baca postingan/articles ini aja ya jangan lupa untuk baca postingan/articles lainnya yang gak kalah menariknya(mengharap).
O iya lagi deh hehehe . . . kebanyakan kata-katak o iya nya dah tiga kali ni, ckckck . . .
Dalam postingan/articles kali ini kita aka membahas tentang Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll.

Contoh Related Post Di Bawah Postingan Dengan Fungsi Scroll

ok, kita lansung aja ya tentang cara pemasangannya ke blog tercinta sobat, untuk caranya sobat bisa ikuti langakh-langkah berikut, cekidotdot . . . .

1.Login ke blog sobat.

2.Pada menu pilih Rancangan ➨ Edit HTML.

3.Pada Edit Template jangan lupa untuk mencentang Expand Template Widget, selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan.


4.Jika sudah sekarang sobat cari kode <data:post.body/> atau <p><data:post.body/></p> jika kesulitan mencarinya sobat bisa baca Cara Cepat Mencari Kode HTML.

5.Jika sudah ketemu selanjutnya sobat copy kode berikut dan pastekan di bawah kode tadi.
keterangan:jika sobat sudah memasang readmore dan ada dua atau tiga kode <data:post.body/> atau <p><data:post.body/></p> pilih yang kedua, ok!

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

NB:
Untuk merubah judul Related Post dengan Articles Terkait atau lainnya, sobat cukup rubah kode pertama yang bewarna biru Related Post dengan kata-kata sobat sendiri.

6.Masih belum selesai sob, masih di dalam kota 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&gt;.

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

7.Simpan.
Dan sekarang sobat bisa lihat sendiri perubahan di bagian bawah postingan sobat.

NB:

• 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 Kode Warna V1 - Kode Warna V2 atau Kode Warna V3.
• 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)

Cukup sekian dulu untuk Articles/Postingan kali ini yang berjudul Cara Membuat Related Post Di Bawah Postingan Dengan Fungsi Scroll, semoga bisa bermanfaat untuk sobat semua.

Apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang articles/postingan di atas!