Iklan

Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-1


Cara Membuat Artikel Terkait ( Releated Article ) di Bawah Postingan #PART-1



Cara membuat artikel terkait atau related post sangat berguna untuk pengunjung melihat postingan lainnya yang masih terkait dalam postingan tersebut, biasanya akan menampilkan postingan atau artikel dengan perlabel.

Tidak hanya berguna untuk pengunjung atau visitor, artikel terkait atau related post juga mempercantik tampilan template blog Anda. Apa lagi related post ala arlina mempunyai disain yang elegan dan enak di pandang oleh pengunjung.

Membuat Related Post atau Artikel Terkait dibawah Postingan Blog

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Copy kode CSS di bawah ini di bawah kode </style> atau di atas </head>

 



Langkah kedua :

Silakan Taruh kode dibawah ini ke bawah kode </article> atau yang lainnya, mungkin saja di setiap template berbeda

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
//Related Post 
var relnojudul = 0; var relmaxtampil = 5; var numchars = 120; var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+" ... </span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}}; 
//]]> 
</script> 
<div id='related-post'> 
<div class='relhead'> 
<h4><span>Artikel Terkait</span></h4> 
<div class='clear'/> 
<b:loop values='data:post.labels' var='label'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/> 
</b:loop> 
<ul id='relate-summary'> 
<script type='text/javascript'>artikelterkait();</script> 
</ul> 
</div> 
</div>
</b:if> 

Silakan Anda Save template blog Anda.

Jika mengalami error sebaiknya Anda berkomentar, agar bisa saya bantu untuk mencari solusi dari kesalahan tersebut.


Next
Prev Post
Previous
Next Post

68 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. artikel terkaitnya muncul, tapi isinya cuma undefined doang. kenapa ya, mas?

    ReplyDelete
    Replies
    1. Masuk ke Dashboard >> Setelan >> Lainnya >> Lihat halaman sebelah kanan >> Pada pilihan Umpan Situs, ubah option Izinkan Umpan Blog menjadi Penuh,

      Delete
    2. Nih solusinya. Ini cara membuat artikel terkait terbaru
      http://riskiaktovan.blogspot.com/2016/12/update-cara-menghilangkan-read-more.html

      Sudah saya coba di blog saya sendiri

      Delete
  3. Mantap gan,, thanks ya,,,

    arenapendidikan.com

    ReplyDelete
  4. terima kasih, artikelnya simpel dan sangat berguna.

    ReplyDelete
  5. Replies
    1. Bisa saya bantu dikasih link URL Blog-nya Gan ! coba saya lihat pasang kodenya.... mungkin kurang tepat pasang script-nya...

      Delete
    2. Mungkin ini Tutorial lama, soalnya algoritma google terus diperbarui. Jadi kadang cara lama tidak berhasil.

      Ini cara barunya, http://riskiaktovan.blogspot.com/2016/12/update-cara-menghilangkan-read-more.html

      Sudah saya terapkan sendiri di blog saya dan berhasil

      Delete
  6. Bang, saya udah coba ... tapi nggak muncul. Kira -kira apa yang salah ya, apa templatenya yang nggak sesuai. kode nya cuman satu bang.

    ReplyDelete
    Replies
    1. Bukan masalah templetenya..biasanya penempatan kode-nya saja yang sedikit berbeda letaknya... bisa hub saya lewat kontak kalau perlu bantuan.

      Delete
  7. saya make artikel terkait lama, tapi terakhir ini kenapa bagian labelsnya cuma muncul sedikit tulisan ya?!?!....misal label komik munculnya cuma mik.....film munculnya cuma lm....?!?!

    itu terjadi dibagian artikel terkait hehehehe.....apakah bisa membantu?!?

    terimakasih sebelumnya!!....

    btw link blog saya....www.komik-made.blogspot.com

    ReplyDelete
    Replies
    1. Saya sdh berkunjung di blog Anda. Related Artikelnya gak ada masalah tuch...tapi kenapa pasang dua related artikel ? satu lagi pointmya.. Blog Jhoni berat di loading-nya lho. Padahal saya pake Internet speed 2 mbps loadingnya lama banget.
      Dan templete yang Bang jhoni gunakan juga tergolong ( lasantha ) versi lama

      Delete
    2. kalau jumlah huruf tampilannya sedikit.. kaitannhya sama snippet-nya Mas, itu bisa di setting jumlah karakternya sesuai kondisi widget-nya

      Delete
  8. om..punya ane kok undefined ya..???padahal umpan situs udah penuh..bantuin donk omm..

    ReplyDelete
    Replies
    1. Begini Gan, templete kadang memiliki perbedaan kode didalamnya, sehingga terjadi beberapa masalah ketika kita mencoba memasang widget baru atau mencoba modifikasi template... tapi bukan tdk ada penyelesaian.
      URL blognya apa coba nanti saya liat scriptnya, kali cuma salah meletakkannya aja

      Delete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Besituajitu.blogspot.com
    Ini gan..

    ReplyDelete
  11. om ane tunggu kunjungannya dan bantuannya..
    besituajitu.blogspot.com

    ReplyDelete
  12. mas saya udah coba, tapi gak ada perubahan apa-apa. Kenapa yah? terima kasih atas tanggapannya :)
    raholia.blogspot.com

    ReplyDelete
    Replies
    1. pada setiap templete ada beberapa tag data:post-body, nah kode diatas letakkan ( dibawah ) tag yang ke 2, post-body yang ke dua...

      semoga membantu... ada masalah silahkan tinggalkan pesan di kontak form ya..

      Delete
  13. punya ane kok di atas y om,cara mindahin di bawah pos gimana y

    ReplyDelete
    Replies
    1. OK Mas akhmad Misbah... Mas sudah benar meletakkan script HTML di bawah postbody.. itu sudah benar karena bisa muncul pada templete blog.

      Pertanyaannya kok munculnya di atas ???

      kode postbody terdapat lebih dari 1 pada umumnya... letakkan script related artikel di atas pada kode postbody yang ke 2 ( tepat dibawah kode postbody yg ke 2 )

      semoga membantu...

      Delete
  14. thank mas Bro, atas informasinya, saya berhasil memasangnya di blog saya....http://tuntasbro.blogspot.co.id/

    ReplyDelete
  15. Salam mas, bisa bantu ngak...kenapa tidak muncul ya saya punya... http://www.cinqleafclover.com/2016/01/koleksi-gambar-si-kecil-artis-dan.html terima kasih =)

    ReplyDelete
    Replies
    1. Mbak Shiqin sudah pake linkwithin bgt... :) Linkwithin terkadang bikin berat Blog, namun sy tdk melarang untuk tdk menggunakannya...

      Kalau mau pake related artikel di atas, dan mengikuti prosedurnya..sy kira bisa berjalan normal ( work ) jika salah meletakkan pd datapost.body, umumnya memang tdk akan muncul tampilan... perkiraan sy sih cuma salah meletakkan script-nya saja

      Delete
  16. mas ko gak muncul yah,,padahal saya sudah coba sesui yang mas sarankan

    ReplyDelete
    Replies
    1. pada templete ada beberapa script datapost.body kurang lebih 3 atau 2, silahkan letakkan kode HTML diatas pada datapost.bode yang kedua atau yg ke 3...

      semoga membantu... silahkan kontak jika perlu bantuan

      Delete
  17. bro kok pnya saya underfined
    kasih sarannya bro
    nih url blog saya
    adhiatmakuu.blogspot.co.id

    ReplyDelete
    Replies
    1. Mas Paulus..silahkan masuk ke Dashboard >> Setelan >> Lainnya >> Lihat disitu ada tulisan " UMPAN SITUS "

      Pada umpan situs " Izinkan umpan Blog ? " pilih " PENUH "

      semoga membantu

      Delete
  18. Info menarik..kunjungi balik gan http://yandisangdebu.blogspot.co.id/

    ReplyDelete
  19. punya saya error kenapa ya gan tolong juga yaa cek blog ane www.10polasehat.blogspot.com

    ReplyDelete
    Replies
    1. Oooo.." UNDEFINED" itu ya problemnya
      Mia Lesmana silahkan masuk ke Dashboard >> Setelan >> Lainnya >> Lihat disitu ada tulisan " UMPAN SITUS "

      Pada umpan situs " Izinkan umpan Blog ? " pilih " PENUH "

      semoga membantu

      Delete
  20. MAS YANG SAYAH TIDAK BISA PADAHAL udah masuk ke Dashboard >> Setelan >> Lainnya >>" UMPAN SITUS " uhah penuh , ko masih ga bisa ni blog saya myinsrirasi.blogspot.com

    ReplyDelete
  21. mas, Alhamdulillah begitu mengikuti petunjuk mas, artikel terkait dalam blog saya muncul.
    Tapi mas, yang muncul baru versi web. Nah untuk versi mobilenya gak muncul mas. Ada link tutorialnya gak? Artikel terkait agar bisa muncul di versi mobile mas.

    ReplyDelete
  22. saya sudah coba googling tapi gak menemukan kuncinya mas. blog saya www.wahyurepi.com

    ReplyDelete
  23. Thanks kunjungannya mas Wahyu...

    Sebenernya begini kita munculkan suatu element (widget tertentu ) ke versi web script css-nya seperti ini,dan bisa MAs cari di html editor template ya (@media only screen and (max-width:768px)) dan dibawahnya di ikuti tag tag yang ingin kita tampilkan di versi WEB.. 768px ukuran pixel layar HP smartphone.

    Kebetulan saya juga lagi desain template,tinggal finishing di versi web-nya saja http://sucsessbloggertips.blogspot.co.id. gak gampang desain template,kita mesti banyak belajar
    Semoga bermanfaat

    ReplyDelete
  24. terimah kasih artikelnya sangat bermanfaat
    kunjungi juga blog kami
    http://lokalbuton.blogspot.co.id/

    ReplyDelete
  25. masih susah untuk digunakan tapi bagus artikel udah masuk page one.
    salut gua.

    follow google+ saya

    ReplyDelete
  26. kok cuma dua artikel terkaitnya padahal udah disetel jadi 5

    ReplyDelete
    Replies
    1. mungkin hanya 2 judul artikel saja yang terkait dengan label-nya.

      Delete
  27. Trims, telah berbagi ilmu semoga selalu mendapat kebajikan

    ReplyDelete
  28. Mau nanya gan,
    Kalau postingan yang tidak ada gambarnya kan keluar gambar yang ada simbol X nya.
    Itu, apakah bisa diganti gan? Misal gambarnya putih aja, atau hitam aja, untuk post yang tidak ada gambarnya. Bls..

    ReplyDelete
    Replies
    1. Sebenarnya itu bukan tanda X mas, itu terjadi jika kode tidak sinkron dengan gambar posting maka keluar gambar X itu tadi... solusi awal coba yang ini

      Setting --> Site Feed --> Allow Blog Feed --> pilih FULL, jangan yang lain!

      Jika tidak berhasil maka harus ada script yang di rubah

      Delete
  29. Clash of clans gems bonus at http://maxclashgems.com This is why some players are so strong! (X1czb)

    ReplyDelete
  30. trimaksih master tutorialnya,,,saya pemula jadi saya butuh bgt artikel artikel yang membantu seperti artikel master ini,,x lg maksih master

    ReplyDelete
  31. http://gudangfirmwere.blogspot.co.id/

    ReplyDelete
  32. terimakasih sangat membantu kami :)

    ReplyDelete
  33. Mas, saya dulu pernah coba ini dan berhasil. Terus saya ganti template yang klasik, pas saya coba lagi bikin artikel terkait gabisa coba mas :( Kenapa yah?

    ReplyDelete
    Replies
    1. Setiap ganti template kode/script yang sebelumnya terpasang akan hilang Mbak, dan harus memasangnya kembali..kecuali widget default blogger akan tetap tampil normal

      Delete
  34. Replies
    1. Solusinya saya jawab lewat kontak Mas,silahkan hub kontak form Admin

      Delete
  35. This comment has been removed by the author.

    ReplyDelete
  36. Mas gak berhasil di blog kami al-Inaya. blogspot.com gmn solusinya.?

    ReplyDelete
  37. work gan, thanks tapi kalo di versi mobile kok gak mumcul ya gan ?...

    sekalian nitip :
    https ://twentysixfa26.blospot.com

    ReplyDelete
  38. ada tag kondisional seperti ini ( mirip ) data:blog.isMobileRequest == "false" ganti false menjadi true lalu simpan template.
    Tag conditional ini yang mencegah widget tertentu tidak muncul di versi mobile atau hp

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete