Monday, July 12, 2010

Gadget Recent Comments


Widget Recent Comments adalah widget yang berfungsi menampilkan beberapa komentar terakhir pada artikel.

Ini akan membantu kita mengetahui beberapa komentar yang terbaru, kita juga mengetahui artikel yang mana saja yang menjadi favorit (tutorial yang paling dicari).


Langkah-langkah sebagai berikut :

1. Login ke blogger.

2. Kode javascriptnya 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.
Copas kode javascript diatas ke dalam notepad, ubah teks yang berwarna merah sesuai keinginan, simpan file notepad ini dengan format .js. Misalnya : recent comments_ecaknyo.js


3. Upload file recent comments.js ini ke google site atau ke server file lainnya dan salinlah link url file recent comments.js tsb.

Contoh : Saya menggunakan penyimpanan file di google site, link urlnya seperti dibawah 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. Login 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 tadi sudah di upload.

Merah, gantilah nilainya sesuai keinginan atau biarkan 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. Simpan widget & Refresh blog


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.