Membuat Related Post Dengan Fungsi Scroll


Sobat semua pasti sudah tahu semua tentang "Related Post". Tapi bagi yang belum tahu, related post adalah artikel yang berhubungan atau terkait. Widget ini dibuat agar di blog kita menampilkan artikel-artikel yang masih terkait atau masih berhubungan dengan artikel yang mereka baca. Tapi pada bahasan kali ini, saya tidak akan membahas bagaimana cara membuat "Related Post" yang biasa, tetapi kali ini saya akan berbagi cara membuat related post dengan fungsi scroll. Sobat semua bisa melihat contohnya seperti di setiap postingan blog saya ini.
Kenapa saya tidak membahas cara membuat related post yang biasa, karena kalau dalam satu kategori kita mempunyai banyak sekali artikel, maka kalau tetap menggunakan cara seperti itu akan memenuhi halaman blog kita.

Kalau diantara para Sobat ingin mencobanya, silahkan ikuti langkah-langkah berikut ini :
1. Seperti biasa, Login dulu di akun blogger Sobat
2. Klik "Tata Letak" => "Edit HTML"
3. Centang "Expand Template Widget"
4. Cari kode dibawah ini :
<p><data:post.body/></p>

5. Copy kode berikut dan paste di bawah kode no 4







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





Silahkan ganti tulisan yang berwarna merah tadi sesuai dengan keinginan Sobat. Misalnya : "Related Post" atau "Artikel Yang Berhubungan".
6. Simpan Template
Image and video hosting by TinyPic

Membuat Related Post Dengan Fungsi Scroll Rating: 4.5 Diposkan Oleh: muzzy musthofa

29 komentar:

  1. Makasi sharenya kawan.aku save dulu nih.tar jika butuh tinggal copas.boleh kan

    BalasHapus
  2. @Maz Tomo : Monggoh Maz........ Jangan bosen2 ya berkunjung ke sini

    BalasHapus
  3. @aryadevi : sama-sama Pak. Makasih juga atas kunjungannya. :34

    BalasHapus
  4. makasih sharenya....tapi gmn yah yg menggunakan platform WP??

    BalasHapus
  5. @online casino : wah itu yg saya belum tahun kawan. Insya Allah deh klo smpt nanti saya cari tahu. makasih ya atas kunjungannya :38

    BalasHapus
  6. kebetulan aku udah pake Related Post yg ada image'y SOb......Thnx 4 info n share...

    BalasHapus
  7. info yg bagus banget muzzy :19

    BalasHapus
  8. @ Ferdinand & Miss Rinda : makasih ya atas kunjungan n komentarnya. jgn bosen mampir ya! :38

    BalasHapus
  9. ok deh sob blog q juga dah tak pasang Related Post Dengan Fungsi Scroll

    BalasHapus
  10. ckckck..
    kreatif,, kreatif,,

    saluut,
    salam kenal sob,
    sy follow ya, di tunggu follow back nyah..

    BalasHapus
  11. mo di save dulu ah, buat nanti coz sekarang mah blognya masih baru, baru belajar ngeblog lagi. trus postingannya juga masih dikit lagi hehehe.. izin save ya mas...

    BalasHapus
  12. @Maz Awan : mksh ya atas kunjungannya :20
    @Maz Ramdhan : Silahkan Maz klo mo nge-save. Makasih juga ya atas kunjungannya :33

    BalasHapus
  13. mantap tutorialnya. saya coba.

    BalasHapus
  14. @Maz Iswady : Silahkan dicoba dulu maz.... makasih atas kunjungannya ya! :38

    BalasHapus
  15. NegeriAds.com Solusi Berpromosi

    makasih ya,,,,tips related postnya,,,dah aku pake nich...

    BalasHapus
  16. @Khilmy : ok sama-sama. makasih juga atas kunjungannya :38

    BalasHapus
  17. Good posting sobat langsung tak coba

    BalasHapus
  18. @blogspot tutorial : wah jadi gak enak nich klo Sang Master bilang ma anak buahnya kaya gini. Makasih banget Master dah mampir kesini lagi :33

    BalasHapus
  19. Aku Cari Cari Kode HTML ini :

    p data:post.body

    di Edit Template ku Gak ada Sob....!!!!!!!

    jadi bingung mau di Paste di mana...???

    ada Solusi lain...???????

    BalasHapus
  20. THANKS YAW.... dah q coba.. and berhasil... hehehe

    BalasHapus
  21. Kunjungan perdana sob..
    Salam kenal..
    Gak sengaja masuk sini lewat google :)
    Ijin baca-baca sob.

    BalasHapus
  22. ini yang pak liek butuhkan buat renovasi rumah ....
    langsung pak liek angkut materialnya ...

    BalasHapus
  23. yeeee....
    akhirnya bisa kang,makasih ya!!!
    ntr jln2 lagi ah,lengkap jg dimari,makasih ya kang!!!
    manfaat bgt,happy weekend jg!!

    BalasHapus
  24. terima kasih, sudah saya coba. Tapi, bisa gak untuk yang ditampilkan hanya judul artikel terkait saja, tidak dengan Nama Labelnya??
    Karena nampaknya kurang indah dilihat. Terima kasih

    BalasHapus
  25. mantap ini, membantu saya, thanks!

    check my blog >>> http://www.theblognews.tk/

    BalasHapus

Silahkan Sobat semua komentar disini. Segala kritik dan saran dari Sobat semua akan sangat berguna bagi kemajuan blog ini.