Monday, July 12, 2010

CARA MEMBUAT RECENT COMMENTS...

 ...Melengkapi tutorial blogging di blog saya ini.. kali ini saya akan membahas bagaimana membuat widget Recent Comments.. yaitu suatu widget yang berkemampuan menampilkan beberapa komentar terakhir dalam postingan di blog kita...
...Keuntungannya... ialah akan membantu kita dalam mengetahui beberapa komentar yang terbaru... kita juga mengetahui postingan mana saja yang menjadi favorit pembaca... dan apa saja tutorial yang paling dicari ?..
.. Baiklah... langsung saja mulai pembahasan membuat widget recent comments versi saya... jadi pahami baik-baik ya...



... Langkah-langkah membuatnya sebagai berikut ;
1. Seperti biasa login ke Blogger ...
2. Perhatikan kode javascript dibawah ini....
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mei";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ags";
monthnames[9] = "Sep";
monthnames[10] = "Okt";
monthnames[11] = "Nov";
monthnames[12] = "Des";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<li>');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a>');
if (showposttitle == true) document.write(' mengomentari ' + posttitle);
if (showcommentdate == true) document.write(' bulan ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(dan seterusnya...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('</li>');
document.write('<span ><a href="http://ecaknyo.blogspot.com/feeds/comments/default/" target="_blank">Recent Comment ecaknyo</a></span>');
if (!standardstyling) document.write('</div>');}
Ket :
> Copy-paste kode javascript diatas ke dalam notepad..
> Lalu ubah teks yang berwarna merah sesuai keinginan kalian...
> Jika telah selesai simpan file notepad ini dengan format .js ... misalnya : recent comments_ecaknyo.js

3. Simpan (Upload) file recent comments.js ini ke google site atau ke server file lainnya... jika sudah salinlah tautan url file recent comments.js tadi...

Contoh : kalau saya menggunakan penyimpanan file di google site.. tautan url-nya seperti ini...
http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js?attredirects=0&d=1
Ket :
> Copy hanya sampai batas .js saja ( yang saya warnai hitam diabaikan )...

4. langkah instalasi widget-nya.. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript ... lalu copas kode dibawah ini ke dalamnya..
<ul><script style="text/javascript" src="http://sites.google.com/site/ecaknyo/blog/bank-javascript-ecaknyo/recent-comment_ecaknyo_v2.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://ecaknyo.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>
Ket :
> Biru = Gantilah dengan url file javascript ( .js ) milik kamu yang di-Upload tadi...
> Merah = Gantilah nilai angka-nya sesuai keinginanmu atau biarkan saja (default)..
- Numcomments = Menampilkan banyaknya jumlah komentar...
- Numchar = Menentukan seberapa panjang isi Recent Comment yang ingin ditampilkan...
> Hitam = Gantilah menjadi "true" jika ingin ditampilkan.. atau "false" jika ingin disembunyikan..
- showcommentdate = Menampilkan bulan & tahun...
- showposttitle = Menampilkan judul posting yang dikomentari...
> Hijau = Gantilah dengan feed comments blog kamu sendiri...

5. Jika sudah kamu atur sedemikian rupa..maka Simpan widget & Refresh blog kamu... (letakan dimana saja posisi widget-nya )...

... Selamat Mencoba ...

45 comments:

  1. wahhh makin mantap aja nich teman yang satu ini hehhehehe nice post kawanku....;)

    ReplyDelete
  2. wah boljug tuh, ane dah pake dari bloggnya mas.
    !!
    nice share

    ReplyDelete
  3. woaaaaaa kode htmlnya ribet o.O

    ReplyDelete
  4. Koko Bota > makasih gan... tapi udah byk juga yang membahas ini..

    iplock > silahkan coba gan.. :D

    Fahma Nurika > ribet ya ?... pelajari aj dulu.. jgn terburu2.. :))

    ReplyDelete
  5. tutorialnya yang mantabb mas, terima kasih, izin simpan codenya mas...

    ReplyDelete
  6. Gieterror > silahkan di save gan... :)

    ReplyDelete
  7. berezzz.... yuu balik kunjung ada yg mo signup dapet $10 dr imcrew gratisssss....

    ReplyDelete
  8. paktua > bukannya komeng posting..eh lu malah promo iklan gan..payaah.. ini spam namanya gan.. :))

    ReplyDelete
  9. Cara Membuat Recent Comments...
    kebetulan nich blogQ lom ada Recent Komentnya, ijin mencoba kawan

    ReplyDelete
  10. PIK Remaja Al-Hikmah > Silahkan saja gan.. pahami dulu ya :)

    ReplyDelete
  11. Tutorial yang bermanfaat, khususnya ketika jumlah posting kita sudah banyak dan seringkali pengunjung posting tidak hanya di posting terbaru.

    Salam ukhuwah

    ReplyDelete
  12. dengan menambahkan recent comment kita lebi gampang untuk melihat komentar terbaru dari sahabat blogger.
    makasih ilmunya sob.
    salam blogger

    ReplyDelete
  13. BeDa > betul gan.. agar kita mengetahui posting mana sj yg di komentari.. :)

    jaya > yups.. bermanfaat bgt kan.. :)

    ReplyDelete
  14. waahh...thanks for sharing...ijin follow yaaa...with name diana..thanks a lot...^_^

    ReplyDelete
  15. windflowers > mau FOLLOW ?? sgt dipersilahkan... :X hehe..

    ReplyDelete
  16. oia kang,ane pngn di scroll dong yang artikel terkaitnya.
    jadi ga panjang yang diblog ane ntu,ntuh digimanain ya???

    ReplyDelete
  17. wah wah wah.... makin mantap aja ide u brooo, gue sakut nih, saatnya gue sikat ni ilmunya..
    SSIIIIIIIIIIIIIIIKKKKKAAAAAAATTTTTTTTT......!!!!!!

    ReplyDelete
  18. Nice share
    btw, dah ane pasang bannernya

    ReplyDelete
  19. iplock > udah gw jawab ya.. http://ecaknyo.blogspot.com/2010/07/cara-membuat-related-post-dengan-atau.html :)

    Cerita Dewasa > Gyahahahaha ... thx =)) silahkan disikat sob

    Azumamaro Nakamura > oke.. thx gan.. ;)

    ReplyDelete
  20. Klko recent comment lebih mudah pke yg aslli dari blogger

    ReplyDelete
  21. Ka Damar > betul gan.. ini hanya variasi aj.. alias cara lainnya.. nambah2 ilmu javascript-lah ;)

    Rumah Imajinasi > siiip.. :D

    ReplyDelete
  22. wah tipsnya bagus :) salam kenal balik

    ReplyDelete
  23. Makin mantab aja bang Andi. Salam Sukses Terus ya...

    ReplyDelete
  24. dah q coba mas,walau sedikit beda ma punya mas,heheee....
    makasih ya infonya,alhamdulillah bisa jg nih.
    di rate dah 5 bintang,hehee...

    ReplyDelete
  25. anyindia > thx :)

    Putri & Dedi Busana > slm sukses slalu jg :D

    iplock > siiip.. bgslah kalo berhasil ;)

    ReplyDelete
  26. salam shabaat
    maaf telat mas...oh iya lama banget ga kesini postingan makin kueren hehehe

    ReplyDelete
  27. Dhana/戴安娜 > salam sahabat dhana.. ..makin keren ya.. thx :">

    ReplyDelete
  28. Sudah lama aku mau bikin recent comment tapi bingung caranya, akhirnya ketemu juga tutorialnya.,, makasih sob, langsung di praktekin

    ReplyDelete
  29. Dwi > ow.. kalo begitu silahkan langsung dipraktekin gan.. ;)

    ReplyDelete
  30. oya salam hangat dari FOUR DREAMS sob :)
    aku akhirnya login dan blogwalking juga nih, setelah kemarin menghilang :)

    ReplyDelete
  31. oi q udah jadi Follwers mu>>>
    Gan deal Lho>> u harus follow balik ke Blog Ane>>
    http://www.bukahalaman.blogspot.com
    Ane tunggu jajnji anda>>>

    ReplyDelete
  32. four dreams > Salam hangat.. oke.. silahkan gan.. :)

    MY GALERY > Siiip... gw pasti FOLLOW gan... ;)

    ReplyDelete
  33. hmmm, blm phm html blas...he3,..btw tfs..success 4 u...!

    ReplyDelete
  34. tiwi > :D hihihi.. gkppa tiwi.. smua org emg butuh belajar dahulu.. :)

    ReplyDelete
  35. PERTAMAX kawand...
    hehehhee...
    thx for sharing...
    SALAM BERKAWAND..

    ReplyDelete
  36. anggar berkawand > yg ke- 37 kamu sob.. hehe.. Salam Berkawand

    ReplyDelete
  37. bos saya ga ngerti yang ini waduh maklum newbie

    ReplyDelete
  38. bos ide anda sangat brian pada blog saya, terimakasih

    ReplyDelete
  39. @Belajar Blogging:

    ntar lama2 jg ngerti sob.. di save aj dulu.. :)

    ReplyDelete
  40. duh mas kok susah
    saya masih bingung
    bisa di bantu cara uploadnya ga...???
    ma"lum mash belajar....

    ReplyDelete
  41. @BINTANG MUSIK:

    Cra upload file js nya ya.. :) oke..nanti gw bahas...

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.