Membuat Komentar Aktif di Blogger

Membuat Komentar Aktif di Blogger -  Setelah kemarin sedikit mendesign tampilan blog walaupun masih belum sempurna pada tampilan mobilenya pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana cara membuat komentar aktif di blogger. sebenarnya cara ini banyak bertebaran di blog lain dan saya sendiri dapat kode ini dari Mas +Redo Kusuma.
ca

Apa gunakanya memakai komentar aktif? ada sebagian orang memakai ini untuk menghargai orang tersebut sebagai orang yang aktif berkomentar bahkan untuk membuat kontes siapa yang terbanyak yang memberikan komentar pada blog tersebut.

Jika anda minat ingin menggunakan ini silahkan gunakan kode dibawah ini, untuk caranya bisa ikuti cara berikut:
1. Masuk dasboard Blogger
2. Masuk ke halaman static
3. Beri Judul apa terserah anda
4. Masukan Kode dibawah ini pada HTML bukan Compose
<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://yoursite.blogspot.com/',
  maxTopCommenters = 77,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Anonymous", "Admin","MAz Mawan"],
  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>
Perhatikan:
1. http://yoursite.blogspot.com > ganti dengan alamat blog anda
2. 77 > jumlah yang akan ditampilkan
3. 1 > jumlah minimal komentar yang diterbitkan
4. ["Anonymous", "Admin","MAz Mawan"] > siapa saja yang tidak ingin ditampilkan
Bagaimana mudah bukan? semoga bermanfaat.
resource: www.redokusuma.net/2014/04/cara-membuat-daftar-komentar-aktif-di.html

52 Responses to Membuat Komentar Aktif di Blogger

  1. wah keren tutorial nya izin nyoba yah sob ^_^

    ReplyDelete
  2. mkasih gan, udah share
    sekarang saya mau peraktekan nihh

    ReplyDelete
    Replies
    1. makasih kembali :) silahkan dicoba sob

      Delete
  3. wah mantap tuh gan, izin coba yah gan :D

    ReplyDelete
  4. Wah, kayanya nama saya dan fotonya ada tuh :D

    ReplyDelete
    Replies
    1. iya masuk daftar tuh sob =D

      Delete
    2. Tapi daftar di kanan pada baris satu masih banyak gan :D

      Delete
    3. iya mas :D paling banyak itu spam =D

      Delete
    4. Oh jadi begitu ya, saya tidak tahu :D
      Mas mau tanya, pada syntax tidak dipasang JS bisa memperingan blog ya ?
      Perbedaanya jauh banget atau biasa saja ? Terima kasih.

      Delete
    5. perbedaan bentuk warna pada tulisanm , dan pastinya loading blog lebih ringan dibandingkn pakai dengan javascript :)

      Delete
    6. Oh jadi begitu ya, bisa saya coba deh :-bd
      Solanya blog saya agak berat mas, hehehe

      Delete
    7. iya mas, moga bisa bantu :D

      Delete
  5. makasih mas kebetulan blog saya blm ada

    ReplyDelete
  6. boleh ta coba nih
    trims ya buat tutornya

    ReplyDelete
    Replies
    1. makasih kembali :) silahkan dicoba mas budi

      Delete
  7. wah mantab seonya mas mawan ,,, jadi dibawah artikel saya :TS

    ReplyDelete
  8. Yang ini cocok buat Kontes Komentar Terbanyak Blog.

    Kalo boleh nambah komentar pertama postingan blog.

    thanks gan.

    ReplyDelete
  9. sepertinya oke juga nih, tapi ga bikin berat blog kan bos?

    ReplyDelete
    Replies
    1. tidak kok, kan ini dibuat dalam halaman static :)

      Delete
  10. Jadi bikin semangat komentar ya, Bang. Heheh..

    ReplyDelete
    Replies
    1. sebenarnya yang membuat semangat bukan itu sist :) karena artikel bagus untuk dibaca :) dan tampilan desin yg bagus

      Delete
  11. Replies
    1. makasih kembali mas ridwan, silahkan dicoba :)

      Delete
  12. Dengan adanya sarana komentar aktif di sebuah blog kita dapat membangun komnukasi aktif dengan para pengunjung blog ya Kang, jadi terlihat membangun ke arah yang positif.

    Salam

    ReplyDelete
    Replies
    1. iya benar pak indra, tapi tidak selalu terpacu akan komentar aktif juga :) makasih tambahan ilmunya :)

      Delete
  13. Keren mas bro ijin untuk mencobanya nih,terimakaish bro untuk tutornya...

    ReplyDelete
    Replies
    1. terimakasih kembali mas dede :) silahkan dicoba :D

      Delete

  14. paling demen kalo ada hal yang baru2 beginian, langsung coba ah :D

    ReplyDelete
    Replies
    1. sebenarnya sudah lama sob, apa mungkin baru lihat jadi terlihat baru,hehe :D

      Delete
  15. Wah keren juga ya, hitung2 buat menghargai para komentator blog kita...
    :-bd

    ReplyDelete
    Replies
    1. iya sis kali aja mau ngasih hadiah gratis :D

      Delete
  16. Ini menghitungnya berdasarkan apa mas ? bulan atau banyak dari semua komentar ?
    Soalnya saya tahu ada blog yang pasang ini berdasarkan tiap bulan, hehe

    ReplyDelete
    Replies
    1. dari kode js sepertinya per bulan mas :D solanya saya sendiri masih newbie soal javascript =D

      Delete
    2. Tapi masih mending, saya malah sama sekali tidak paham, hehe
      Masih bingung memahami, tapi dalam tahap belajar juga :)

      Delete
    3. selamat belajar juga as prisma

      Delete
  17. keren ni, di simpan dulu sob scriptnya :)

    ReplyDelete
    Replies
    1. Sepertinya masnya lama gak muncul nih, atau saya saja yang tidak tahu. Hehe :D

      Delete
    2. lagi benerin rumah sendiri sob, biar sama kaya mas mawan keren rumahnya :D

      Delete
    3. bagus kan ini rumah buatan kang adhy :D

      Delete
    4. Beradu arsitek nih kayaknya, hehehe :D

      Delete
  18. aakkkk, jadi pengen, tapi bikin berat ndak nih? ehehehe

    eh, aku uda follback #78 yah..
    mau tukar link sekalian nggak? akakak

    ReplyDelete
    Replies
    1. tidak kok kan ini di halaman static :)

      maaf baru lihat komentar disini :D boleh kalau mau tukar link :)

      Delete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔