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.


Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

68 comments

Write comments
dani hamdani
AUTHOR
July 21, 2015 at 3:55 AM delete This comment has been removed by a blog administrator.
avatar
July 22, 2015 at 7:17 AM delete

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

Reply
avatar
July 30, 2015 at 9:54 AM delete

Tanks bro.. saya coba dan sudah berhasil
artkel pendidikan

Reply
avatar
July 30, 2015 at 6:14 PM delete

Mantap gan,, thanks ya,,,

arenapendidikan.com

Reply
avatar
Darma Yasa
AUTHOR
August 11, 2015 at 12:52 AM delete

terima kasih, artikelnya simpel dan sangat berguna.

Reply
avatar
aqof
AUTHOR
August 21, 2015 at 10:30 PM delete

mantap bro udh di coba sukses

Reply
avatar
November 4, 2015 at 9:14 AM delete

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

Reply
avatar
November 4, 2015 at 9:18 AM delete

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

Reply
avatar
November 11, 2015 at 8:34 PM delete

terimakasih infonya bermanfaat

Reply
avatar
Nia Sigit
AUTHOR
November 12, 2015 at 8:49 PM delete

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

Reply
avatar
November 13, 2015 at 1:48 AM delete

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

Reply
avatar
I MD JHONI S
AUTHOR
November 23, 2015 at 5:52 AM delete

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

Reply
avatar
November 26, 2015 at 5:05 PM delete

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

Reply
avatar
Mr G
AUTHOR
December 5, 2015 at 1:28 AM delete

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

Reply
avatar
Mr G
AUTHOR
December 5, 2015 at 1:36 AM delete This comment has been removed by the author.
avatar
December 5, 2015 at 3:01 AM delete

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

Reply
avatar
December 5, 2015 at 3:04 AM delete

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

Reply
avatar
Mr G
AUTHOR
December 5, 2015 at 3:18 AM delete

Besituajitu.blogspot.com
Ini gan..

Reply
avatar
Mr G
AUTHOR
December 5, 2015 at 3:43 AM delete

besituajitu.blogspot.com

Reply
avatar
Mr G
AUTHOR
December 5, 2015 at 10:03 AM delete

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

Reply
avatar
oliaulia
AUTHOR
January 12, 2016 at 2:24 AM delete

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

Reply
avatar
January 16, 2016 at 9:12 AM delete

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

Reply
avatar
January 16, 2016 at 7:09 PM delete

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

Reply
avatar
Iswandi
AUTHOR
January 22, 2016 at 8:13 AM delete

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

Reply
avatar
January 22, 2016 at 5:33 PM delete

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

Reply
avatar
January 22, 2016 at 5:34 PM delete

terima kasih juga kunjungannya..

Reply
avatar
January 27, 2016 at 3:05 AM delete

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

Reply
avatar
January 28, 2016 at 3:28 AM delete

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

Reply
avatar
Anonymous
AUTHOR
February 2, 2016 at 12:49 AM delete

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

Reply
avatar
February 3, 2016 at 6:07 AM delete

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

Reply
avatar
February 3, 2016 at 6:09 AM delete

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

Reply
avatar
February 3, 2016 at 6:15 AM delete

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

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

semoga membantu

Reply
avatar
February 3, 2016 at 6:16 AM delete

Sama-sama ..terima kasih kunjungannya

Reply
avatar
Debu Yandi
AUTHOR
February 6, 2016 at 12:52 PM delete

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

Reply
avatar
Mia Lesmana
AUTHOR
February 10, 2016 at 6:43 AM delete

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

Reply
avatar
February 11, 2016 at 12:43 AM delete

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

Reply
avatar
Anonymous
AUTHOR
February 18, 2016 at 7:58 PM delete

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

Reply
avatar
March 25, 2016 at 7:22 AM delete

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.

Reply
avatar
March 25, 2016 at 7:23 AM delete

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

Reply
avatar
March 25, 2016 at 5:57 PM delete

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

Reply
avatar
kagum mundu
AUTHOR
April 7, 2016 at 11:26 AM delete

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

Reply
avatar
April 11, 2016 at 9:14 AM delete

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

follow google+ saya

Reply
avatar
Alvitto
AUTHOR
April 11, 2016 at 8:42 PM delete

kok cuma dua artikel terkaitnya padahal udah disetel jadi 5

Reply
avatar
ari handoko
AUTHOR
April 17, 2016 at 8:36 AM delete

Trims, telah berbagi ilmu semoga selalu mendapat kebajikan

Reply
avatar
April 19, 2016 at 7:09 AM delete

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

Reply
avatar
Wawan Ahmad
AUTHOR
July 25, 2016 at 8:29 AM delete

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

Reply
avatar
July 25, 2016 at 8:55 PM delete

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

Reply
avatar
July 25, 2016 at 9:12 PM delete

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

Reply
avatar
Sumber Rizky
AUTHOR
August 21, 2016 at 9:35 PM delete

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

Reply
avatar
Sumber Rizky
AUTHOR
August 22, 2016 at 12:23 AM delete

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

Reply
avatar
Wi wi
AUTHOR
September 21, 2016 at 10:20 PM delete

terimakasih sangat membantu kami :)

Reply
avatar
October 30, 2016 at 5:30 PM delete

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?

Reply
avatar
January 1, 2017 at 7:24 PM delete

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

Reply
avatar
January 1, 2017 at 7:36 PM delete

Solusinya saya jawab lewat kontak Mas,silahkan hub kontak form Admin

Reply
avatar
Wawan Agusti
AUTHOR
January 3, 2017 at 9:19 AM delete

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

Reply
avatar
Wawan Agusti
AUTHOR
January 3, 2017 at 9:21 AM delete

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

Reply
avatar
Wawan Agusti
AUTHOR
January 3, 2017 at 9:22 AM delete This comment has been removed by the author.
avatar
Zafira aditia
AUTHOR
January 6, 2017 at 4:26 PM delete

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

Reply
avatar
Kubah Dunia
AUTHOR
November 23, 2017 at 12:54 AM delete

bagus
http://www.kubahdunia.com

Reply
avatar
faiz zakharia
AUTHOR
December 28, 2017 at 11:21 AM delete

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

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

Reply
avatar
December 30, 2017 at 10:29 PM delete

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

Reply
avatar
Ummu Naufal
AUTHOR
January 13, 2018 at 4:29 AM delete This comment has been removed by the author.
avatar