Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog

Viyan Pradita Sabtu, Juli 02, 2011 ,

Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, back to blogspot tips and trick, setelah beberapa hari kemarin google melakuan update pagerank dan beberapa sistem search engin'nya, kalai ini saya akan kembali mengulas tentang beberapa trik blog yang sempat tertunda. hoho... kali ini yang akan saya bahas yaitu bagaimana cara membuat related post/artikel terkait di sidebar blog. kebanyakan artikel terkait/related post itu biasanya ada dibagian bawah posting. Itu yang sering saya jumpai di beberapa web/blog. Tapi ada banyak juga yang memakai cara ini yaitu memasang related post/artikel terkait lainnya di sidebar.
Untuk demonya sobat bisa langsung melihatnya diblog saya ini, atau pada gambar dibawah ini:

Artikel Terkait Lainnya


Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>

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


6. Kemudian cari lagi kode berikut:

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Gantilah kode diatas dengan kode berikut:

<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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Catatan:
Perhatikan kode max-results=10, angka 10, itu merupakan jumlah artikel terkait yang akan ditampilkan di sidebar. Sobat bisa menggantinya sesuai keinginan.


8. Simpan Template, dan lanjut ke langkah berikut ini

9. Next, masuk ke Page Element > Add a Gadget > HTML/JavaScript > lalu copy paste kode dibawah ini kedalam konten HTML/JavaScript.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

10. Simpan dan lihatlah hasilnya.


Tambahan:
Dan biasanya untuk artikel terkait di sidebar ini hanya muncul pada halaman posting selanjutnya/tidak nampak di home pagenya, dan sobat bisa melihat caranya membuatnya di:
Cara Menampilkan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu

Kelihatan rumit dan panjang, tapi begitulah kiranya Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog. Dan bila sobat menginginkan tampilan related post/Artikel terkait lainnya, seperti punya o-om.com, sobat bisa tanyakan langsung disini, dengan berkomentar.
Semoga bermanfaat.

Article Information:
Description: Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog - Rating: 4.5

Ditulis Oleh :

Artikel Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog ini dipublish pada hari: Sabtu, Juli 02, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

40 komentar
Terjun Ke Kolom Komentar

  1. nice post mas, sangat membantu sekali.. terus berkarya mas bro :)

    BalasHapus
  2. thx mas bro, langsung k TKP :))

    BalasHapus
  3. nice info...
    semoga bermanfaat untuk kita semua

    BalasHapus
  4. asyik dapet Ilmu baru makasih mas Viyan

    BalasHapus
  5. Makasih infonya, untungnya template saya sudah punya related post.

    Mas kode-blogger dapat awards dari saya silahkan bisa diambilMakasih infonya, untungnya template saya sudah punya related post.

    Mas kode-blogger dapat awards dari saya silahkan bisa diambil

    BalasHapus
  6. berarti punyaku cuma di edit di bagian akhir aja ya sob??? trus di pindah ke sidebar. Mantep

    BalasHapus
  7. @ALL: Ok, silahkan, terimakasih buat kunjugannya sob :)

    @Yunan: Waduh award lagi, makasih banyak sebelumnya mas :)

    BalasHapus
  8. ini yang saya cari gan !!! :D

    koment balik ya !!! :))

    BalasHapus
  9. wah, sangat menarik nih triknya, sidebar juga bisa diterapkan utk related post, makasih udah bagi tutorialnya :D

    BalasHapus
  10. makasih sob..sangat bermanfaat kaya yang ada di blog o-om kan?

    BalasHapus
  11. Duh agan yang satu ini artikelnya mantep banget pas bagi yang newbie seperti saya ini....Salam kenal gan..

    BalasHapus
  12. mantap sob... hohoho
    sekali2 share tentang Inbound link dunk? ;)

    BalasHapus
  13. @Dode-Xp [NEW] Creativity: Done!! :D thank sob

    @Ladida Cafe: Sip, sama2 masbro :)

    @Mas Kholiq: Makasih mas, salam kenal juga...

    @Angga Judistia Pradana: Iya, betul sob

    @Artikel Unik: sama2 mas, semoga membantu :D

    @Habil DS: Inbound sama Outbound link maksudnya?? wah, sobat pasti lebih tau tuh :p kapan2 deh saya posting. thank yo

    BalasHapus
  14. wah wah wah,, sangat membantu itu sobb,, buat yang masih baru di dunia blogger

    BalasHapus
  15. WP gari instal plugin gan...
    :ngacir:

    BalasHapus
  16. @Masterisa: Sip, semoga bia membantu sob :)

    @Kadalmesir: sama2 gan :)

    @Dimas: Wehehe.. langsung ngacir lah ya :p

    BalasHapus
  17. trims ilmu nya bos, lansung di coba hehhe

    BalasHapus
  18. @LIRIK LAGU MINANG: Sip, silahkan sob :)

    BalasHapus
  19. Wah keren nich! ada tambahan ilmu baru..lanjutkan trus kreasinya gan, di tunggu lho..? sekaligus izin nyoba y gan,,,

    BalasHapus
  20. @Bareha's Blo: Iya sob, silahkan :)

    BalasHapus
  21. mas kosaya gagal ya,.. link postnya gak da, sudah bener tahap2nya,.. mohon bantuannya,...

    BalasHapus
  22. @dika: Diblog sobat, menurut saya di bagian sidebarnya kurang lebar sob, bisa juga sih dipasang, tp kurang lebar menurut saya.
    Kalo boleh tau, gak bisanya gmn sob ??
    Sama sekali tidak muncul atau bagaimana.

    BalasHapus
  23. mas yg no 6 ama 7 itu naru kodeny dmna, soalny kode yg no 6 ane tak hapus, dan ane lupa letakny :D
    krm k blog ane yah :D

    BalasHapus
  24. nice info kang.. thanks jadi menambah perbendaharaan ilmu blog nihh heheh salam knal..

    BalasHapus
  25. wah gan lagi2 komentar ane seperti ini..kode no 6 kok di template wa kaga ada ya gan...dari pertma wa pasang nih template wa cari2 ga nemu2 gan...pencerahannya lagi gan ... :D

    BalasHapus
  26. @dhiibhiehh: Sama2 masbro

    @Asmara Susanto: Sorry telat blsnya, haha.. koq bisa :D
    pastinya sekarang udah jadi kan, hhihii

    @ibnu99: Sip, salam kenal jg masbro

    @Tuyulz: Hahaha,, ne template bikinan gw sendiri tp ribet jg ternyata :D
    Nyarinya jgn dengan kode keseluruhan masbro, coba cari ini: data:post.labels
    pasti ada tuh :D sudah saya praktekin koq. dikoreksi lagi mas :)

    BalasHapus
  27. aku tak dapat menerapkan tutorial ini di blog aku...aku nggak bisa nemukan script "" ...
    mohon bantuannya

    BalasHapus
  28. Makasih gan infonya!
    Jangan lupa juga baca artikel saya yg ini

    Pasang Posts Widget dengan Thumbnails

    BalasHapus
  29. bagus mas tutorialnya
    kunjung balik ya mas
    http://gudangme.blogspot.com/

    BalasHapus
  30. sangat membantu. thanks for all..
    salam damai blogger..

    BalasHapus
  31. menarik sekali, terima kasih.

    BalasHapus

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


web design blogs Bloggers - Meet Millions of Bloggers