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.


43 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. Gieterror > silahkan di save gan... :)

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

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

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

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

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

    Salam ukhuwah

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

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

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

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

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

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

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

    ReplyDelete
  17. Nice share
    btw, dah ane pasang bannernya

    ReplyDelete
  18. 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
  19. Ka Damar > betul gan.. ini hanya variasi aj.. alias cara lainnya.. nambah2 ilmu javascript-lah ;)

    Rumah Imajinasi > siiip.. :D

    ReplyDelete
  20. wah tipsnya bagus :) salam kenal balik

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

    ReplyDelete
  22. 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
  23. anyindia > thx :)

    Putri & Dedi Busana > slm sukses slalu jg :D

    iplock > siiip.. bgslah kalo berhasil ;)

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

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

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

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

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

    ReplyDelete
  29. 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
  30. four dreams > Salam hangat.. oke.. silahkan gan.. :)

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

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

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

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

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

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

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

    ReplyDelete
  37. @Belajar Blogging:

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

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

    ReplyDelete
  39. @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.