83 Cara Membuat Widget Member Aktif Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Ingin memberikan apresiasi kepada pengunjung? Banyak cara mewujudkannya, bisa dengan memberikan mereka kenangan sebagai hadiah pada ajang acara yang anda selenggarakan, atau memberikan back link kepada mereka dengan memasang widget top komentator, atau widget member aktif berikut inipun bisa menjadi sebuah alternatif lain bagi anda. Sebenarnya widget ini masih menggunakan script yang sama dari widget top komentator, hanya saja style widget dimodifikasi dengan tampilan berbeda dan kalimat komentar tidak ditampilkan.
Widget member Aktif Full

Fitur:

  • Menampilkan nama dan link komentator
  • Menampilkan Avatar komentator
  • Avatar dengan polaraid style
  • Efek hover pada Avatar menampilkan jumlah komentar
  • Bersih dan elegant
Untuk mendapatkan ide yang jelas tentang widget ini silahkan lihat live demo terlebih dahulu

Tekan tombol view demo

View Demo

Cara menambahkan widget ini keblog

  • Copy paste saja code berikut kebagian HTML editor posts atau laman mandiri blog anda
<style type="text/css"> 
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://www.tipstrikblogging.com/',
  maxTopCommenters = 77,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Anonymous", "Admin"],
  maxUserNameLength = 42,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 80,
  cropAvatar = true,
  urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png',
  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
  urlMyProfile = '',
  urlMyAvatar = '';
if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj) {
    for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
    return -1
  }
}
function replaceTopCmtVars(text, item, position) {
  if (!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
    avaimg = author.gd$image.src
  } else {
    var parseurl = document.createElement('a');
    if (authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
    }
  }
  if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
  if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
  var newsize = "s" + sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
  if (cropAvatar) newsize += "-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
  var authorName = author.name.$t;
  if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
  var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
  if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
  if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
  var authorcode = authorName;
  if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[count]', item.count);
  return text
}
var topcommenters = {};
var ndxbase = 1; 

function showTopCommenters(json) {
  var one_day = 1000 * 60 * 60 * 24;
  var today = new Date();
  if (urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
      urlMyProfile = elements[i].href;
      break
    }
  }
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
      if (days > numDays) break
    }
    var authorUri = "";
    if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
    if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
    var authorName = entry.author[0].name.$t;
    if (excludeUsers.indexOf(authorName) != -1) continue;
    var hash = entry.author[0].name.$t + "-" + authorUri;
    if (topcommenters[hash]) topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter
    }
  }
  if (json.feed.entry.length > 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
  }
  var tuplear = [];
  for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function (a, b) {
    if (b[1].count - a[1].count) return b[1].count - a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
  });
  var realcount = 0;
  for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
    var item = tuplear[i][1];
    if (item.count < minComments) break;
    document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
  }
  if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>  
Untuk konfigurasi widget, perhatikan tulisan berwarna merah diatas dan sesuaikan menurut selera anda
  • Simpan template dan lihat hasilnya diblog anda.
Demikian tutorial membuat widget member aktif. Semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

83 komentar :

  1. wah keren.. bisa langsung di coba ini.. :))
    thanks 4share.. :)

    BalasHapus
    Balasan
    1. Silahkan dicoba, terimakasih juga tuk apresiasinya.

      Hapus
  2. Sebelumnya terima kasih atas tips blognya sob sekalian mau nanya nih, kira2 widget ini bagusnya di letakkan dmn ya, di sidebar blog atau di buatkan halaman statik..?? Makasih jika sdh mau merespon pertanyaan saya ini.

    BalasHapus
    Balasan
    1. Bagusnya ya dihalaman posting atau statik, kalau disidebar pasang widget top komentator sebelumnya saja sob. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  3. Balasan
    1. Sama-sama gan. Thanks berat juga tuk kunjungan dan apresiasinya.

      Hapus
  4. Pengen mencobanya tapi takut salah edit. Saya blogger pemula.

    BalasHapus
    Balasan
    1. Codenya khan tinggal copy paste aja de', yang diedit hanya URL blog dan nama admin. Kalau selalu takut mencoba, kapan bisanya? Dicoba ya, semoga berhasil.

      Hapus
  5. Balasan
    1. Terimakasih apresiasinya, semoga sukses sll tuk anda.

      Hapus
  6. Balasan
    1. Silahkan dicoba sob. Thanks tuk kunjungan dan spresiasinya. :))

      Hapus
  7. seamat Pagi sobat,,,Kunjungan perdana sambil mencicipi Ilmu baru dari sobat Amatullah,,,Insya Allah akan saya praktek di blog saya sob....saya juga minta izin sob follow blognya, kalau ada waktu kesebelah juga yaa jalan jalan dan follback...

    BalasHapus
    Balasan
    1. Pagi. Terimakasih tuk kunjungan dan apresiasinya. InsyaAllah kami akan memberikan apresiasi serupa.

      Hapus
  8. saya setuju...widget ini...menandakan sebagai satu penghargaan ke pd para pengunjung yg sering singgah pd satu blog...ya mbak
    #keren..

    BalasHapus
    Balasan
    1. Iya seperti itulah. Terimakasih tuk apresiasinya.

      Hapus
    2. sama sama mbak...
      sekalian mampir kembali di sini :)

      Hapus
    3. Terimakasih banyak, sering-sering aja kawan!

      Hapus
  9. mohon maaf ukhty bisa minta tolong bantuannya untuk membuka blog saya.. ada masalah nggak, soalnya saya buka kok nggak bisa ya? tapi login ke blogger masih bisa..
    jazaakallahu khair..

    BalasHapus
    Balasan
    1. Blognya alhamdulillah dari sini bisa dibuka kok. wa jazaakumullahu khaeran

      Hapus
  10. Maaf banget ya mbak, setelah saya tulis di postingan tepatnya di HTML dan warna merah sudah saya ganti dgn alamat blog saya. tp masih ndak bisa muncul mbak, saya udah 2x coba tips ini, mungkin mbak amaa ada solusi utk saya ?
    mksh

    BalasHapus
    Balasan
    1. kalo disave oke ga ada masalah berarti berhasil :)
      kalo dibuka gak muncul....coba gunakan line internet dengan kecepatan tinggi :p

      Hapus
    2. Saya kira bukan masalah jaringan internetnya mas. Ini kodenya kan tinggal kopas,lalu sy letakkan di halaman posting HTML. Tapi saya lihat demo di atas kok lancar2 saja yah? ini berarti kan ada yg ndak beres Blog saya. :-s

      Hapus
    3. saya langsung sukses mba.. :)
      https://boyz.googlecode.com/svn/html/Member-aktif.html

      Hapus
    4. Mbak indah buat aja dipostingan atau dihalaman mandiri kemudian tinggalkan linkx disini nanti anaa cek dimana kekeliruannya. Tu yang lain bisa kok. Thanks

      Hapus
  11. patut dicoba trik di atas. thanks share nya

    BalasHapus
  12. maaf yah baru mampir :d ane simpen dulu scriptnya, ada rencana mau pasang juga sih..jazakillah

    BalasHapus
  13. Maaf ...OOT nih. ada bingkisan buat mbak Ama. silahkan di ambil mbak :)

    BalasHapus
  14. tutorial yang bagus sob,....
    jadi pngn sering2 berkunjung niy.... :)

    BalasHapus
  15. pagi-pagi blogwalking ke blog amatullah, kunjungan perdana saya,dan saya juga minta izin sob follow blognya, kalau ada waktu tolong kunjungi blog saya (http:vengenzblog.blogspot.com/) ya, insya allah artikel ini bisa mengapresiasi saya untuk lebih baik lagi untuk menjadi seorang blogger (terimakasih)

    BalasHapus
  16. Bikin ngiler ini widget nya :o


    [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

    BalasHapus
  17. Widget yang menarik..
    apalagi bagi blog yg memiliki trafik dan pembaca yang banyak..

    BalasHapus
  18. jd penasaran pengen nyoba..., btw hebat jg ni bs menciptakan script sendiri.., thx ya... *smile

    BalasHapus
  19. Wahhhh sangaatt menarikk,terimakasih :) Blog Walking pertama saya.. yang sebelumnya dari Rumahnya Mbak Indah P*dapat link dari sana hihihih :-D

    BalasHapus
  20. Hehehe keren nehhh widget.. ijin sedot ilmu ya..

    BalasHapus
  21. Wah dari demo nya aja udah keren! Mantab nih.. :)

    BalasHapus
  22. wow artikel yang bagus dari blog yang bagus . mantap

    BalasHapus
  23. wah aku gak aktip ternyata :D .. hoho.. gak apadeh.. yang pntg persahabatan tetep terjaga ya kak ..
    keren widgetnya. CTRL+D dulu, udah lemot blognya >____< .hikss :D :) .

    BalasHapus
  24. Keren juga dan pemakaian jg gampang....

    BalasHapus
  25. wah Makasih Ada Aku Disana Kk Thanks :>) :>) :>) :)) :)) :))

    BalasHapus
  26. Wah keren sekali sayang nya kagak bisa dipasang di postingan saya padahal di preview bisa tapi gagal saat di publikasikan tahu kenapa masih cari solusi siapa tau nantinya bisa izin simpan dulu ..script nya

    BalasHapus
  27. JOIN JUGA NYA warnetraja.blogspot.com $-)

    GhimAnA bUAtt Emo Keren Seperti D AtAs Ke blog Omzzzz cheer

    BalasHapus
    Balasan
    1. Lihat tutorialnya disini:http://www.tipstrikblogging.com/2013/02/memasang-emoticons-smiley-pada-komentar-blogger.html

      Hapus
  28. Langsung ke TKP broo..makasih..

    BalasHapus
  29. gan tempat nya dmn..? kayak <:/body> gitu, cos gak tau letaknya

    BalasHapus
  30. thanks infornya, salam kenal, silakan mampir di blog saya http://aksarafirdaus.blogspot.com/

    BalasHapus
  31. Kalau ada beberapa avatar yang tidak ingin kita tampilkan karena blognya (sekarang) sudah tidak aktif atau tidak ada avatar. Dari pada mengganggu tampilan avatar yang lain sebaiknya disingkirkan, kendati dulunya adalah pengunjung setia. Gimana caranya ya sist. Thks

    BalasHapus
    Balasan
    1. Tambahkan nama prifil member yang tidak ingin ditampilkan pada kode: excludeUsers = ["Anonymous", "Admin"] pisahkan dengan koma setiap menambah nama baru.
      Semoga membantu.

      Hapus
  32. widihhh kren bgt nicchh bisa di coba nichhh

    bkalan tmbah keren nichh blog w

    BalasHapus
  33. ok siap aku praktekkan,
    cheer

    BalasHapus
  34. ok siap dipraktekkan,
    cheer

    BalasHapus
  35. Wah,, saya coba langsung nih, makasih ya infonya, jangan lupa mampir,, :D

    BalasHapus
  36. widget ni langsung bisa cari member ya gan??

    BalasHapus
  37. terimakasih gan atas infonya salam kenal yah gan
    maaf gan numpang promonya yah
    rajalistrik.com ialah toko online kami yang menjual produk-produk teknik industri terbesar, terlengkap, termurah, dan terpercaya di Indonesia yang menawarkan lebih dari 200.000 item produk dari kurang lebih 200 merek. rajalistrik.com berupaya memudahkan Anda untuk mendapatkan produk-produk teknik yang Anda inginkan dengan jaminan orisinalitas, kemudahan bertransaksi, kecepatan pengiriman, dan harga yang kompetitif.http://rajalistrik.com/

    BalasHapus
  38. Jazaki Allah Khayran :>)
    Translated to Arabic in my blog http://blogging.arabiclabs.com/2013/06/top-active-members-widget-blogger.html
    (I'm from Tunisia (b) )

    BalasHapus
  39. saya kurang paham dimana harus mempaste code tersebut ..
    saya tidak tahu dimana letak HTML nya .. masih pemula gan

    tolong pencerahannya ??

    BalasHapus
  40. bagus.! jangan lupa join ya gan

    http://the-kampret.blogspot.com/

    TQ

    BalasHapus
  41. Wah Keren Ni !!!

    Kunjungi Juga ya Blog Aku, Hehehe :>)

    catatankemal.blogspot.com

    BalasHapus
  42. terima kasih untuk scriptnya.,,
    www.dutistraining.com
    www.kaizenconsulting.co.id

    BalasHapus
  43. apa tidak terlalu berat mbak jika scriptnya sebanyak ini ?

    BalasHapus
  44. keren deh ,kangsung icip :)
    kunjungi blog saya
    http://bajucouplefashion.blogspot.com/

    BalasHapus
  45. terima kasih sob artikelnya bagus

    BalasHapus
  46. terima kasih ya kk atas infrmasinya..

    BalasHapus
  47. Gan, Aku Telah mencoba trik tersebut, tapi kok setelah aku pratinjau kok halamannya berubah menjadi kosong y??

    Tolong PLiiiiiiiisss Kasih Tau Y Kak Admin !!

    BalasHapus
  48. Idih Artikel,y Bagus2 sangat berguna bagi para bloger pemula, sukses selalu ya sob, kalo berkenan di tunggu kun bal,y di Juri Rakyat

    BalasHapus
  49. thank langsung saya bookmark nih tutorialnya .. ^_^

    BalasHapus
  50. kunjungi blog saya juga ya
    umarcellularindramayu.blogspot.com

    BalasHapus
  51. Keren baget Artikelnya...

    Kunjungi blog saya
    http://syeftiandro.blogspot.com/

    BalasHapus
  52. tidfak ada kata lain BLOG mantap

    BalasHapus
  53. mbak...
    tuk ngubah ukuran ea jadi normal brp ??

    tu jelek kali ukuran ea

    udah ane rubah ukuran ea jadi 75px dari 100px
    malah ane ...


    tolong info ea donk

    BalasHapus
  54. makasih mbak. Aku jadi tau siapa aja yg paling aktif di blogku :D

    BalasHapus
  55. :D cara nya gimana tuh
    Maklum om newbie :v :D

    BalasHapus
  56. keren banget gan ane udah nyoba dan hasilnya sangat keren.. :-d
    ini kunjungan perdana ane gan
    salam kenal

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!