Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Komentar
Widget

Recent Comments Widget dengan Avatar untuk Blogger / Blogspot

Recent Comments widget dengan Avatar untuk Blogger / Blogspot. Dengan hadirnya fitur baru yaitu Threaded Comments, Blogger pun mengubah Comments API yang memungkinkan menampilkan avatar pada widget Recent Comments / Komentar Terakhir.

Script untuk menampilkan avatar pada komentar terakhir atau recent comment, dibuat oleh Harish. Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat di sidebar kanan.

Cara menampilkan Avatar pada Reccent Comments Blogger

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwa.js"></script>
<script type="text/javascript" src="https://kang-ismet.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :

numComments = 5, (jumlah komentar yang ditampilkan)
avatarSize = 30, (ukuran avatar dalam pixel)
characters = 30, (jumlah karakter yang ditampilkan)

4. Ganti blog.kangismet.net dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang ditampilkan.

5. Simpan.

Update: 20-03-2021

Dikarenakan JavaScript di Googlecode sudah tidak valid, silahkan ganti kode:

http://btreaders.googlecode.com/files/rcwa.js

dengan kode ini :

https://cdn.jsdelivr.net/gh/kangismet/user-blog/rcwa.js

Widget ini menampilkan semua komentar, termasuk Admin. Apabila ingin menghilangkan komentar Admin pada widget ini, silahkan kunjungi Cara Menyembunyikan Komentar Admin Pada Recent Comment.

#Komentar #Widget

78 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Terima kasih tutorialnya, sangat membantu... :-bd
    1. wow keren.. btw ini integrasi dg Gravatar kayak di WP atau script terpisah kang??
    2. Belum sob, belum terintegrasi dengan Gravatar. Ini menggunakan Json script...
    3. OO, ternyata aku yg ketipu sob, soalnya liat URL gravatar di scriptnya hehe. btw punya tips ampuh buat ngurangi berat blog g sob? blogku dari segi tampilan sangat minim trus widgetnya jg seadanya tapi kenapa kata teman2 loadingnya berat.. mohon pencerahannya :))
    4. Ngga terlalu berat juga sih... tapi yang bikin lama kayaknya script dari addjugler..
  2. udah dipasang keren hasilnya :-bd
    1. :-B kode script nya lumayan simpel sih.. tp bagus juga :D
  3. nice share^^
  4. sayangnya widget ini bukan favoritku, biar ga makin berat aku hapus deh dari blog
  5. http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif
  6. Syukur banget gan.. akhirnya saya bisa juga udah nyoba, boleh di liat

    thanks gan
    1. sudah dikunjungi gan... :)
    2. tutorial blog disini sgt bermanfaat kang :D oya, sudah saya pollow juga ;)) kalo berkenan follback :-bd
    3. terimakasih... :) n sudah di follback
  7. Mantef banget nih kangg...izin aku sedot ya kanggg..
  8. Pengunjung Setia kang » Terima kasih kang Informasi ini, tampilannya sangat menarik dan simple. Cocok untuk blog yang suka widget menarik. :x
    1. kirain siapa Kilua :) si akang geuning
  9. waduh baru nih widgetnya thanks ya kang
  10. Bagus sepertinya widget recent commentnya bang, cma bikin load blog terasa berat g ya ??
    1. ngga ah... biasa aja
  11. wahhh, kang ismet ! good, nice post bang ! wah kayaknya saya bakal betah nongkrong di blog ini ! blog saya jdi tmbah cantik :) hehe
    mksih ya bang ! 100 jempol deh (y)

    follback blog saya bang ! blog abang sdah sya follow :)
    1. Siap sob... makasih :)
  12. ini dia yg saya cari..
    habis baca tutorial di Blogger Tune-Up
    gak ngerti juga..
    akhirnya dapat di blog Kang Ismet, lebih simple dan dinamis..

    visit back broo.. :D
    1. Ok sip bro... udah di kunjungi blognya :)
  13. terima kasih infonya mas, sudah saya pasang di blog saya dan hasilnya memang bagus
  14. maaf mas, kok di blog saya gak bs tampil ya?

    mohon bantuannya, mas.
    1. Ccek lagi... feednya yang bawah sudah di rubah belum?
  15. Mas..mau nanya nich..
    Gimana sich kl seandainya dikomentar itu juga ditampilkan link yang dikomentari supaya nggak ribet buat yang udah dibalas komentarnya..

    Makasih..KEEP POSTING
  16. Izin nyoba Kang ,,,
    cantik loh recent comment nya ,,

    wilujeng ngeblog
  17. Join to my blog please http://boyedittingcrew.blogspot.com/
  18. kalo buat komentar admin nggak kelihatan gimana kang ????
  19. Thx ilmune gan.... :)
  20. tq..:)
  21. wah musti dicoba ni...
    langsung ke TKP aja ea sob..
  22. mas saya ga tampuil mas... udah sesuai dengan petunjuk
  23. sudah bisa gan, thanks.. ternyata pengaturan site feednya harus full
    http://ubuntu-roy.blogspot.com/
  24. tks u friend
    http://frlangue.blogspot.com
  25. Makasih banyak atas sharenya, blog saya jadi kian menarik. bekerja sempurna scriptnya bos...

    Salam blogging.
  26. makasih kang, jadi lebih keren kalo pasnag ginian hehe salam kenal aja
  27. mampir gan,ijin copy script untuk recent comment ya,terimakasih
  28. tolong diperbaiki, recent commentnya gak berfungsi, kayaknya hosting jsnya yg bermasalah thanks
    1. Sudah diperbaiki, silahkan dicoba lagi.. Thanks infonya
  29. kang, boleh minta tutorial cara bikin widget yg ngikut terus saat kursor digerakkan kebawah gak? apa memang sudah diposting, say anyari2 di gugel gak pernah nemu
    (kayak widget share dan g+/facebook page di didebar kanan blog ini)
    makasih kang
    1. Heheh... sudah di posting sob cek disini :
      http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
  30. terima kasih kang atas bantuannya.... sekarang blog sy sdh jalan seperti apa yg sy inginkan

    sekali lagi thx alot
    1. sama2 sob.. semoga sukses BO nya :)
  31. adminnya kok juga ngikut ya kang o.O
    1. Iya plus admin sob :)
  32. mantafb gan posting-nya...
    ijin tes n pasang gan...
  33. Keren nih widget nya, kebetulan saya sudah pakai widget yang seperti ini! Thanks for share.. :) | NICE BLOG!
  34. recent commentnya jadi mantep, skrip google codenya bekerja dengan baik sekali, thanks ya Kang Ismet
  35. Sangat bermanfaat buat saya ,
    terima kasih bang ismet
  36. Dari mana Kang dapat idenya ?
  37. siip mas
  38. boleh nih idenya
  39. infonya bermanfaat sekali mass :D
    Seteleh mengikuti saran yang ada di blog ini, alhamdulillah pengunjung saya naik meskipun kurang dari 50/hari.

    Terima Kasih Kang
  40. sangat bemanfaat, ijin nyedot :)
  41. Mantap sangat membantu
  42. gila,, keren banget pake avatar
  43. Terima kasih ya Bos infonya :) sangat membantu ....benar2 toppp
  44. super sekali kang ismet , matur nuhun tutorialnya
  45. Terimakasih banyak atas Informasinya
  46. kang, caranya loading blog kyak punya kang ismet gmn
    1. Simpan ini di atas ]]></b:skin>
      #page-loader {
      position:fixed !important;
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:9999;
      background:#fff url('http://1.bp.blogspot.com/-hwDGciedSOI/UYU_0DrMLsI/AAAAAAAAEBg/90Wn6WrO2mY/s1600/loadinfo.net+(6).gif') no-repeat 50% 50%;
      font:0/0 a;
      text-shadow:none;
      padding:1em 1.2em;
      display:none;
      }
      terus simpan kode ini sebelum </body>
      <script type='text/javascript'>
      //<![CDATA[
      $(document.body).append('<div id="page-loader">Loading...</div>');
      $(window).on("beforeunload", function() {
      $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
      });
      //]]>
      </script>
  47. comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.comments widget for blogger
  48. kang kalo ngilangin komentar adminya gimana yah ;)
    1. pake nya tutorial yang ini http://blog.kangismet.net/2012/05/menyembunyikan-komentar-admin-pada.html
  49. hello kangismet, ane pake cara ini kok gak tampil ya? apa ada yang salah dengan template yang ane gunakan?
    1. Coba pake cara diatas, liat komen Dhea Mohamad
  50. terima kasih infonya kang follow putri ya
  51. Nyimak Lagi Kang Ismet, saya di artikel yang nice ini
  52. Prof Dept
    Komentar ini telah dihapus oleh pengarang.
  53. udh dipajang
    makasih info'y ;)
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.