Related Posts atau biasa disebut "link yang bekaitan", "artikel pada kategori yang sama", "artikel yang bertautan", "postingan terkait" atau apa aja namanya, merupakan bagian judul posting terkait dan biasanya ditampilkan berdasarkan penamaan label (kategori), Realated Post ini biasanya berupa link yang tampilkan dibawah postingan tunggal tepatnya di bawah kolom komentar. Keuntungan dengan pemasangan post yang berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label. Agar gak bingung lihat gambar dibawah ini:
Kayaknya gak usah dibahas panjang lebar ya, pasti rekan semua dah ngerti maksudnya. OK langsung aja ke proses pemasangan :)
Langkah I:
Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode </head> saja, kemudian letakan kodenya diatas kode </head> -> jangan lupa disimpan
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r]
+ '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Langkah II:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels'
var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels'
var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan
Langkah III:
Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Langkah IV:
Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.
Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
<b:widget id='HTML13'
locked='false' title='Artikel pada kategori yang
sama' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Selamat mencoba, Happy Blogging :)
Dengan memasukan alamat email dibawah ini berarti anda akan mendapat kiriman artikel terbaru dari o-om.com di inbox anda:
Beri vote untuk nilai artikel ini:
42 Komentar:
tutorial ini khan untuk memunculkan judul posting di bawah postingan. bisa gak om jika aku mau letakkan di sidebar, misalnya saya mau hanya yg kategori news saja. terima kasih
AKHIRNYA DATANG JUGA, terima kasih o-om postingan yang ditunggu-tunggu telah datang... segera dicoba... saya pelajari dulu biar langsung cling...(hemat pulsa he he he)o-om memang nggak ada matinya...master coding (kata mas iwan... kataku juga he he)
>> syarief : Kalo yang mas syarief maksud saya belum coba koding nya. tapi ditunggu aja ya :)
>> lilik : Kayak acara TV aja hehehhe di coba ya lik :)
Berhasil o-om, thanks...
udah berhasil ya lik..sukses ya :)
saya dah coba, sukses!
makasih ya om..
>> lady : sudah sukses ya..sip dah :)
om keren jiddan, om please komentari my blog dunk coz baru awal neh,
http://unlimite-knowledge.blogspot.com
comenya di sutbox j y :-)
sudah om kunjungi blognya :) thanks kunjungannya juga wahyu :)
sy udah coba dan berhasil. thank om
sudah berhasil ya pak, selamat ya dah berhasil :)
oom qo saya ga bisa2 yah???aku dah coba smp 5x tapi tetep ja ga bs2.gmn donk oom??add YM aku yah di iskandar_yudhim coz aku mw tny2 neh... n kunjugi jg yah?? my blog di http://yudhim.blogspot.com/
Lapor Oom Guru, perintah sudah dilaksanakan. Misi berhasil tuntas.
Related post dah terpasang.
Laporan selesai...
Ga berhasil kak. Postingan related postnya di atas. Knapa yah? T__T maunya dibawah. Ga terviasa ama blogspot coding XML aku bukan HTML.jd rada bingung
bs dibantu?
ada situs baru, http://situsbersih.com
situs anti pornografi Indonesia
menyambut UU ITE cyber Indonesia
harap di-link ya =)
Aku di langkah 3 kok lom berhasil ya pak... gak mau disimpan page elemennya...
@Shireishou : supaya related postnya berada dibawah tinggal di drag aja element halamanya ke bagian bawah post
@t4blogger : mungkin ada kesalahan waktu paste kodenya..
lapor om agus...udah bisa nih related articlesnya...sebelumnya saya nggak bisa, tapi sekarang udah bisa...terima kasih o-om guru...
@Ranggalawe Istifajar Rullinda : wah udah berhasil..selamat dah :)
om , qo saya ga bisa pakai related categories kaya gini yah ?
kira2 knp yah om ?
mohon bantuannya . :)
promote-indie.blogspot.com
@**Promotion Team** : kebanyakan yang saya jelaskan masih menggunakan code dstandar blogger yang belum dimodif :)
kayaknya oom mengerti dengan baik javascript nih ... sip banget tutorialnya ...
Sip oom, skrng blog saya sudah ada related postnya ... hehe ...
ternyata kode javascriptnya bisa diinclude. Jadi saya upload digooglepages terus saya link. Biar lebih rapi gitu oom bagian head-nya.
skali lagi trims nih tutorialnya ...
@Permana Jayanta : sudah berhasil ya...sip dah kalo gitu :)
WAH-WAH OMNYA PINTER BANGET. DAN SERING TUTORIALNYA MENGGUNAKAN TEMPLATE BARU. YANG LAEN-LAEN TU PAKE LAMA JADI LEBIH SUSAH ..
Tq..
dah coba niy and sukses,..Wahhh...O-om emang bener-bener dah, pasti orang niy banyak banget pahala nya, banyak banget ngasih ilmu keorang lain, kagak tanggung-tanggung dan banyak ngebimbing orang jadi pada pinter blogging hehehe...makasih sekali lagi O-om
thanks juga buat f415 dan sanyo :)
Makasih Om, dicoba dan SUKSES ...
semoga O-OM tambah ganteng, banyak rejeki, & sukses terus. skalian mhon petunjuk Suhu bt perbaikan blog juga yah ..
salam kenal and selamat malam mas oom. kode related post-nya sudah saya masukkan dengan benar dan hasilnya sukses tersimpan.
tapi anehnya related post-nya cuma keluar 1 postingan,padahal sudah saya set menjadi 20 postingan related postnya, tetap yg keluar cuma 1 postingan.
contohnya:http://www.o-om.com/2008/01/cara-menampilkan-posting-yang-berkaitan.htm
yang keluar cuma seperti itu,cara menampilkan psoting yang berkaitan.
bagaimana nih mas oom solusinya,tolong dibantu dong. saya masukkan kode related postnya sampai belasan kali tetap seperti itu, tidak bisa keluar banyak.
blognya mas oom bagus banget,trims.
@aby : coba di cek ulang mas aby siapa tau ada yang salah dan kurang waktu kopy pastenya.
selamat pagi mas oom,selamat bekerja dan semoga makin sukses.
mas oom memang pantes disebut sebagai tokoh blogger indonesia,soal track records tidak perlu diragukan lagi,terbukti banyak membantu blogger newbie lewat tutorial dan tips-trik.
mas oom rajin posting ya tiap hari,komentatornya luar biasa.
maksudnya apa ya mas oom,!siapa tau ada yang salah dan kurang waktu kopy pastenya.
saya masih belum berhasil nih.
mohon maaf mas oom kalau saya banyak merepotkan anda dan menganggu konsentrasi kerja anda.
ya saya cuma ingin mohon bantuan buat related postnya belum berhasil. terimakasih .
mas o-om makasih atas ebook nya berkat ebook ini blog saya bisa cukup terkenal . Terima kasih
masih belum berhasil juga oom, malah jadi pusing aku .
ya,beginilah kalau jadi orang bodoh selalu bingung dan banyak
bertanya. apa mungkin, kode related post ini khusus untuk template asli blogger? saya sendiri saat ini memakai template dari eblogtemplate{ad theme blogger template} .salam
Absen Hadir:
Tips Dah Di jalan Kan Sesuai Perintah Tapi Tidak Mau , Siap Balek Kanan Laporan Di kembalikan . Balek Kiri pejalas lagi OOOOOOMMMMMMMMMM Tips Nya. Uauauauauauauaua....
wuih .... lengkap banget tutornya nee Om. Ane jadi semakin semangat buat memperbaiki blog ane nee :) sepp dah Tararengkyu yak ....
Ayo yang laen ... gan batte ne!
Buat Om-nya ditunggu tutor yang laen yak .... :)
oom saya orng baru ni..klo cara "artikel terkait" tu bisa langsung d bawah postingan gmn,,? kyk punya om ini..hehe
Mantaaabb om.. Saya nyobain langsung "cekdur" (kalo kata orang sunda) Tq pisan ;)
@thanks ya buat semua maaf om gak sempat balas satu satu komennya :)
om,. gimana caranya batasi tampilan judul related postnya, cth. hanya 5 judul related post saja yg tampil bukan semuanya.
satu lagi om, hilangin duplicate judul di related post.
oom, artikel yang di tampilin ntar menurut kategory atau apa ?
Sukses lagi mas.trimakasih info infonya bener2 bapak blogger sejati
:D bisa oM
Sudah bergabung dengan program penghasil Dollar($)?
Posting sebuah Komentar
Untuk memasang emoticon diatas, cukup dengan menulis kodenya. Silahkan berkomentar, jangan nyepam ya :)