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!

Poskan Komentar Blogger Disqus

  1. Makasih bangettt sob atas tutorial'ya.. udah ane coba n brhasil!
    skarang blog ane makin lumayan berkat agan.. tanks banget deh,

    O'y kunjungin juga blog saya di http://lihin-android.blogspot.com/

    BalasHapus
  2. ASS,,,, KA RIF,,SAYA BIKIN RELATIF POST TP KNP GA PUNGSI YACH.. CUMA GAMBAR BLENG AJA

    BalasHapus
  3. @rama banten Rb klo ingin muncul, postingannya hrus ada lbelnya.

    BalasHapus
  4. caranya ka rif...?maaf dah ngegaggu nich..

    BalasHapus
  5. @rama banten Rb Setiap postingan hrus mnggunkan lbel, contohnya article ini, article ini masuk ke label Blogger Trick.
    Sobat bisa membuatnya di Edit Entri - Aksi label - tulis nama label.


    Sobat bisa juga membuat related post tanpa label, caranya bisa lihat disini : DISINI atau DISINI.

    Bila masih belum jelas silahkan bertanya.

    BalasHapus
  6. bro,,punya gua ga muncul,,padahal label udah dipasang,,tolongin donx,,!!
    bales,a ke blog gua ya,,sekalian liat artikel terkait,a eang ga bisa,,thx nih,,

    BalasHapus
  7. Maaf Sob kok di Blog saya gak muncul yah kotak related postnya , makasih

    BalasHapus
  8. @Abey Lesmana Anda hrus mnrapkan lbel pada postingan anda bla ingin related post muncul!
    bla tidak igin mnerapkan lbel pada postingan, slahkan anda gunakan related post yang INI.

    BalasHapus
  9. Saya sudah beri label untuk setiap postingannya tapi kok gak muncul-muncul sih , makasih

    BalasHapus
  10. @Abey Lesmana Sya tidk tau ada kslhn apa sbnrya, sya ingin mlihat dri tmplte anda, tpi sya kslitn mnmukn link anda.

    BalasHapus
  11. ini mas link saya http://h-sansblogs.blogspot.com

    BalasHapus
  12. mas di template saya gak ada kode ]]></b:skin&gt , gimana tuh ?

    BalasHapus
  13. @Abey Lesmana pgganti kode ]]></b:skin> adalah <style>

    BalasHapus
  14. udah saya coba mas tapi masih gak muncul ,, tolong mas cek kembali blog saya . Terima kasih

    BalasHapus
  15. Makasih Mas sekarang berhasil

    BalasHapus
  16. Gan makasih infox...,,,,mohon follow blog saya saya sudah follow blog anda dengan twitter Bernama ReKYaN,,.Thanks mohon blog saya juga di folloew

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top