Terkini


Tutorial Widget Komen Terbanyak Untuk Blogger Dengan Avatar

Tutorial Widget Komen Terbanyak Untuk Blogspot Dengan Avatar

Ini merupakan entri pertama saya dalam bab tutorial blog. Sebenarnya banyak yang hendak dikongsikan, tetapi disebabkan masa amat mencemburui, maka tak punya banyak kesempatan untuk post entri dalam bab ini.

Tutorial pertama merupakan satu widget blogger yang menarik bertujuan untuk menggalakkan pembaca memberi komen di blog kita ialah "Top Commentator Widget" atau widget "Komentar Paling Banyak". Yang menariknya, widget ini akan memaparkan avatar (gambar profile pengkomen) dan bilangan komen yang diberikan.


Realtime demo untuk blog ini adalah seperti di bawah:

RAJIN KOMEN



Kelebihan kod widget ini, kita tak perlu setkan blog URL kerana html kod akan 'auto-detect' blog URL kita. Widget ini telah diset untuk TIDAK memapar komen dari "Anonymous", manakala untuk membuang komen blog admin hendaklah memasukkan nick name blog admin dalam var excludeUsers = "Anonymous", "Blogger Username"] Setting lain adalah berdasarkan penerangan dari diberikan seperti berikut:

// CONFIG:
  • var maxTopCommenters = 15; // berapa banyak senarai top commentator.
  • var minComments = 1; // minimum komen
  • var numDays = 0;  // komen sejak bila (ex. 30), atau 0 sejak dari mula. 
  • var excludeMe = true;  // true: tidak masukkan komen sendiri
  • var excludeUsers = ["Anonymous", "Blogger Username"];  // jangan masukkan username ini, tukar Blogger Username kpd nick name blogger anda.
  • var maxUserNameLength = 42; // 0: don't cut, >42: cut till 42 usernames characters 

Untuk menukar saiz ikon avatar pengkomen, ubah kedua-dua saiz 30px pada baris ini:
top-commenter-avatar {vertical-align:middle; height: 30px;width: 30px;

Bagaimana memasang widget "Top commentators" untuk blogger? Ikuti langkat seperti berikut
  • Pergi ke Blogger Dashboard
  • Klik pada Layout tab
  • Klik Add Gadget dan pilih 'HTML/Javascript'
  • Salin kod di bawah ini dan paste kan dalam kotak berkenaan
  • Namakan widget anda, contohnya "Komentar Terbanyak" (ikut selera anda)
(go to inside textarea - right click - select all - right click - copy)

Klik "save" dan lihat perubahan pada blog anda.

tags: blogging, widget, blogger widget, top commentator widget, blog tutorial

80 comments:

  1. Cantik widget ni..
    Boleh cuba ni

    ReplyDelete
  2. bestlah widget nie, mesti cuba nie..

    ReplyDelete
  3. terima kasih perkongsian { http://jmbelog.blogspot.com/2013/04/1st-anniversary-domain.html }

    ReplyDelete
  4. Ok dah jumpa, info yang nak di cari.tq ya..

    ReplyDelete
  5. tapi komen sndiri still kuar agi...kekekekke >.<

    ReplyDelete
    Replies
    1. Cari line ni:
      var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // jangan masukkan username ini

      Tukar kpd:
      var excludeUsers = ["Anonymous", "AiSyA LiEzA"]; // jangan masukkan username ini

      Lepas tu tengok.. keluar ke tak komen AiSyA LiEzA (^_^)

      Delete
    2. owh..macam ni ke...termakasih...blog sy ada masaalah Feed url...macamna nak buat ye..sbb tu saya kat sini tapi masih x de papepun...

      Delete
    3. tak mengapa, kod ini akam ambil default feed url

      Delete
  6. Best dan sesuai sgt ciri2 blog aku..terima kasih..:)

    ReplyDelete
  7. DH TRY...mg best w.pon ade jugak name sndri...ehe

    ReplyDelete
    Replies
    1. Nak buang komen sendiri cari line ni:
      var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // jangan masukkan username ini

      Tukar kpd:
      var excludeUsers = ["Anonymous", "Harith Iskandar"]; // jangan masukkan username ini

      Dengan andaian "Harith Iskandar" adalah blog author (^_^)

      Delete
  8. Tak keluar pown en. Waazin... huhu

    ReplyDelete
  9. jadidah2... td tercopy sekerat. patutler... hehe terima kasih...

    ReplyDelete
  10. dah ikut semua step,tetap keluar komen sendiri..:(

    ReplyDelete
    Replies
    1. Nak buang komen sendiri cari line ni:
      var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // jangan masukkan username ini

      Tukar kpd:
      var excludeUsers = ["Anonymous", "❤Kamsiah❤"]; // jangan masukkan username ini

      Dengan andaian "❤Kamsiah❤" adalah blog author (^_^)

      Delete
    2. perkataan ni pun kena ada skali ke?? // jangan masukkan username ini

      Delete
    3. sy punye tak jd la. maybe sbb nama ada simbol, mcm ni, ©AkuSeorangTraveler

      Delete
  11. Terima kasih saya kira satu Tutorial Widget Komen yang paling menarik. Saya telah menggunakanya terima kasih. Jom Singgah, "Citra Nukilan Sekadar Perkongsian">> " AKU ANAK PAHANG "

    ReplyDelete
    Replies
    1. Sama-sama.. insyaAllah saya akan ziarah..

      Delete
  12. dulu ada pasang top komentar pastu ilang tetiba, bila pasang yang ini ok..anyway ada tak cara nak scroll box?

    ReplyDelete
    Replies
    1. cara nak scroll box tambahkan kod seperti dibawah:

      <div style="width: 100%; height:270px; overflow-y:scroll; overflow-x:hidden;>

      ...html top comentator..
      ...html top comentator..

      </div>

      ubah 270px ketinggian ikut kesesuaian

      Delete
  13. Dah cuba mmg cantik lg menarik tp sy guna ruang komen g+. Tak link le. Boleh tunjuk ajar camana nk linkkan widget ni dgn komen g+ ya? Tk

    ReplyDelete
    Replies
    1. widget ini untuk rekodkan komen dalam sistem blogger blog sahaja. Jika guna komen g+ dalam blog, mmg tak boleh, sbb komen google+ dan blogger disimpan dalam server masing-masing. setakat ni saya belum jumpa untuk rekodkan komen terbanyak google+ untuk blogger blog.

      Delete
    2. Hari tu dah install tak tau camne boleh hilang. Ni nak install balik. Thanks abang Waazin

      Delete
  14. Terimakasih banyak Pak Waazin Aiman atas tutorial yang anda sajikan diatas. Saya sudah mencobanya dan alhamdulillah sudah berhasil :)

    Salam dari Indonesia :)

    ReplyDelete
  15. Sama-sama. Salam juga dari Malaysia.. ^_^

    ReplyDelete
  16. untuk papar pengoment bulanan macam mana?boleh x?

    ReplyDelete
  17. InsyaAllah boleh, tapi banyak kerjanya, kena ubah setting kod, pada baris ini:
    var numDays = 0; // komen sejak bila (ex. 30), atau 0 sejak dari mula contohnya:

    pada 1hb: var numDays = 1;
    pada 2hb: var numDays = 2;
    .
    .
    .
    pada 30hb: var numDays = 30;
    -tapi boleh juga ubah no tu selang 2, 3 atau 4 hari, mengikut kelapangan. atau pun pada setiap 30hb atau 31hb baru ubah no. boleh juga.

    ReplyDelete
  18. Assalamualaikum ... Nape tak kuar ape2 eak Just title n terus "Dapatkan Widget Ini" ...

    ReplyDelete
    Replies
    1. waalaikummusalam... cuba check semula kod yang Hani copy tu.. mungkin ada yg tertinggal.. apa link blog?

      Delete
    2. http://hanifadhlinaabdulrahman.blogspot.com

      TQ

      Delete
    3. http://hanifadhlinaabdulrahman.blogspot.com

      TQ

      Delete
    4. http://hanifadhlinaabdulrahman.blogspot.com

      TQ

      Delete
  19. hanifadhlinaabdulrahman.blogspot.com
    Tq.....

    ReplyDelete
  20. Masih keluar lagi la nama saya :'( Dah tukar kepada Cik Fyda dah. Kenape erk ?

    ReplyDelete
    Replies
    1. var excludeUsers = ["Anonymous", "Cik Fyda"]; // jangan masukkan username ini, tukar NickNameAdminBlog kpd nickname anda.
      ------------------------------------------------------------
      1. Pastikan jgn tertinggal tanda " dalam nick name. dan tanda2 lain spt ] dan ;
      2. semak semula HTML kod, mungkin ada yang tertinggal.

      Delete
  21. Assalamu'alaikum Wa'azin... ^^,

    Kak Ummi baru jumpa widget ni thanks to you dear, Kak Ummi dah 'copypaste'kan code di atas ke layaout, tapi dia tak keluar, harap Wa'azin tolong tunjukkan cara-caranya ya... ^^,

    ReplyDelete
    Replies
    1. Waalaikummusalam wbt. pasang dulu widget tu dulu.. nanti saya check. bagi link blog akak.

      Delete
    2. Assalammualaikum..nk cuba jugak..terima kasih kongsi.

      http://erynix.blogspot.com

      Delete
  22. Salam, terima kasih banyak2... dah copy paste yer. Cuma saya tak tahu nak buat scroll

    p/s saya dah follow blog ini.

    ReplyDelete
    Replies
    1. Waalaikummusalam. Terimakasih..
      cara nak scroll box tambahkan kod seperti dibawah:

      <div style="width: 100%; height:270px; overflow-y:scroll; overflow-x:hidden;>

      ...html top comentator..
      ...html top comentator..

      </div>
      ubah 270px ketinggian ikut kesesuaian

      Delete
  23. Saya guna widget ini. Tq banyak2. Cuma, ada cara tak kalau tak nak letak avatar blogger, nak nama je keluar..

    ReplyDelete
    Replies
    1. cuba ubah ni..
      var sizeAvatar = 40; ---> var sizeAvatar = 0;
      var cropAvatar = true; ---> var cropAvatar = false;

      Delete
    2. ok..kejap lagi saya edit. Tima kasih ye.. :)

      Delete
  24. Salam..dah buat tadi.. yg cara jadikan 40 ke 0 dengan tukar true kepada false di atas tadi tak berkesan.. Kemudian saya cuba buang perkataan [image] seperti yang ada dalam code di bawah ni..dan berjaya akhirnya... terima kasih ye.. :)

    [ * / var max TopCommenters=10;var minComments = 1;var numDays=30;var excludeMe=true;var excludeUsers=[" Anonymous","ctfand"];var maxUserNameLength=42; var txtTopLine= "< b >[ #].< / b > [image] [user] ([count]) ";var txtNoTopCommenters= " No top commentators at this time."

    ReplyDelete
  25. Jadi ler...terima kasih banyk2...tapi nak buat untuk komentar setiap bulan...mcmna cara dia..

    ReplyDelete
    Replies
    1. Sama-sama..
      InsyaAllah boleh, tapi banyak kerjanya, kena ubah setting kod, pada baris ini:
      var numDays = 0; // komen sejak bila (ex. 30), atau 0 sejak dari mula contohnya:

      pada 1hb: var numDays = 1;
      pada 2hb: var numDays = 2;
      .
      .
      .
      pada 30hb: var numDays = 30;

      -tapi boleh juga ubah no tu selang 2, 3 atau 4 hari, mengikut kelapangan. atau pun pada setiap 30hb atau 31hb baru ubah no. boleh juga.

      Delete
  26. Hi, is this widget works for comments using google+?

    ReplyDelete
  27. Tutorialnya baik sekali. Salam Ramadhan ya..:)

    ReplyDelete
  28. terima kasih kerana berkongsikan wiget yang terbaik ini.

    ReplyDelete
  29. wah mcm best, boleh letak nanti.

    saya dah follow sini #372. jemput ke blog sy ya

    www.norazua10.blogspot.com

    ReplyDelete
  30. pssttt...singgah sini..curi widget

    ReplyDelete
  31. Kalau nak exclude kan lebih daripada 1 username, macamana plak yer?
    Tqvm ;)

    ReplyDelete
    Replies
    1. cuba asingkan username dengan tanda koma..
      var excludeUsers = ["Username1", "Username2"];

      Delete
  32. +Razi ten nope.. works only on blogger comments.

    ReplyDelete
  33. Asalam..alhamdulillah Etuza berjaya mendapatkan semula widget top komentar ini..ini lah yag Etuza cari..ekoran tamplate lama etuza tukarkan,,dah berkali2 cuba tak berjaya tapi kali ini syukran dapat di blog saudari..tqvm

    ReplyDelete
    Replies
    1. Waalaikummusalam.. Alhamdulillah, syukran..

      Delete
  34. tengok ramai org pakai widget ni... teringin jugak nak letak kat blog.. tengkiu for sharing =)

    ReplyDelete
  35. yay!!! tq...dh berjaya buat....

    ReplyDelete
  36. saya tak jadi la. maybe ada simbol copyright tu kot.. huhu

    ReplyDelete
  37. Asalam sahabat ku saudaraku Wazin..Etuza datang membaca dalam rest ni. Terkejut rupanya blog Etuza ada dalam entri ni..hari tu tak klik..terima kasih ya....dalam bloglist..Etuza dah jadikan blog ni blog kegemaran utama

    ReplyDelete
  38. Waalaikumusalam sahabatku Etuza.. Terima kasih ye..

    ReplyDelete
  39. Assalamualaikum, alhamdulillah berjaya guna widget ni, tapi nak tanya la..macam nak dapatkan top komen untuk bulan yng dah lepas macam ogos, september...boleh ke?

    ReplyDelete
  40. Asalam..saya guna balik ni ruang komen ..tq

    ReplyDelete
  41. Nak letak top komentor bulan..dah ubah kod..
    masih juga tak menjadi

    ReplyDelete