Cikgu Kacamata


56
Widget Senarai Pemberi Komen Terbanyak


Widget Senarai Pemberi Komen Terbanyak ini adalah hasil ilham daripada Widget Komen Terkini Dengan Avatar Berpusing yang CK postkan sebelum ini. Ia kelihatan agak unik kerana mampu memusingkan avatar pemberi komen terbanyak apabila cursor mengenainya. Selain itu, widget ini memberitahu profil pemberi komen terbanyak dan bilangan komen yang diberi.



Jika mahukan widget ini, sila ikuti langkah-langkah di bawah:

1. Masuk ke akaun blogger anda -->>> "More options"

2. Pilih "Layout"


3. Klik "Add a Gadget" pada sidebar


4. Scroll ke bawah sedikit dan klik "HTML/JavaScript"


5. "Copy" semua kod di bawah dan "paste" ke dalam kotak Content

<style type="text/css">
.top-commenter-line img {
border: 2px solid #ffffff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.top-commenter-line img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;
}

</style>
<script type="text/javascript">

var maxTopCommenters = 5;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = '';
var txtAnonymous = '';
var sizeAvatar = 50;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTEYshFI2QQlOroDDzk30q3PF6I4fLA3iMd0in-XtDppm9RKYUaz9So82rp036tKvoIC3EbhE2yK6tVuzUNUXvwtenh3rbyXcjL4Z_4F0E28UtoQ8LYgK9tmSNTIgC95D1ePWPQGFFO36/s1600/ck-avatar.jpg";
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTEYshFI2QQlOroDDzk30q3PF6I4fLA3iMd0in-XtDppm9RKYUaz9So82rp036tKvoIC3EbhE2yK6tVuzUNUXvwtenh3rbyXcjL4Z_4F0E28UtoQ8LYgK9tmSNTIgC95D1ePWPQGFFO36/s1600/ck-avatar.jpg' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';

// for old IEs & IE modes:
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 = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'"title="'+authorName+'" 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" href="'+authorUri+'">'+authorcode+'</a>';

text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
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); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

//Calculate difference btw the two dates, and convert to days
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="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}

// convert object to array of tuples
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;
});

// list top topcommenters:
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('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
<span id=ck-wkt><a href=http://cikgukacamata.blogspot.com/2013/06/widget-senarai-pemberi-komen-terbanyak.html target=_blank>Widget Senarai Pemberi Komen Terbanyak</a></span>
<style type=text/css>
#ck-wkt {font-family: Arial,Tahoma;font-size:9px;font-style:italic;padding-top:7px;display:block;text-align:right;}
</style>


Nota:

6. "Save" gadget sidebar anda dan siap!







Sila Share Post CK Ini Sekiranya Anda Suka
Dapatkan Widget Ini!

56 comments:

  1. Nice share! SW nak try letak juga lah kat blog. Thanks bro.

    ReplyDelete
  2. nice sharing..nama kita ada gak..hihi

    ReplyDelete
    Replies
    1. Thanks cik Normi. Setakat ni Normi di ranking ke-2 tu ;)

      Delete
  3. ok nice! tgk pun skang ni dah banyak orang bubuh kat blog ek... sy nak buat gaklah nanti... tp yg menariknye kat mane pun ade widget ni, popular name is MissAiza.. tahniah...

    ReplyDelete
    Replies
    1. Bg CK widget ni mmg berguna dan menghargai sesiapa yang buat komen kat blog kita. Kepada Mizz Aiza CK ucapkan berbyk2 terima kasih kerana selalu mengunjung blog CK...blogger yg lain pun sama juga. Terima kasih tak terhingga CK ucapkan kerana sudi jengah di sini ;)

      Delete
  4. salam CK.owh nanti kalau saya nak tukar..bolehlah singgah follow tutor ni.dah bookmark page ni he3..

    ReplyDelete
    Replies
    1. Boleh bangat aLeaSaRa. Boleh amik anytime. Thanks bookmarked post ni ;)

      Delete
  5. menarik widget ni CK.. yang aiza punya ada orang tolong buatkan.. tapi avatar dia takde la bergerak macam yang CK buat tu.. nice sharing.. :D

    ReplyDelete
    Replies
    1. Hehe, CK nak buat kelainan sikit. Terima kasih Aiza coz alwayz be my part in here ;)

      Delete
  6. yeayy, jadi.. tapi nama anna ada skali.. huhuhuu.. cmna ni?

    ReplyDelete
    Replies
    1. Alhamdulillah...

      Ok, untuk sembunyikan komen kita sendiri, Anna perlu ubah ini:

      -->>> Cari kod ni:

      var excludeUsers = ["Anonymous", "someotherusertoexclude"];

      -->>> Gantikan; someotherusertoexclude dengan ANNA MARIANA

      *sebenarnya itu nama profil blog kita. Ikut saja nama profil kita; kalau huruf besar, gunakan huruf besar; kalau nama ada lebih satu perkataan yang berjarak, ikut saja jarak tu)

      Harap ini dapat membantu Anna ;)

      Jika ada pertanyaan, roger je CK anytime!

      Delete
  7. wah cikgu..cik akak pun nak juga lah..hihi

    ReplyDelete
  8. salam..
    Alhamdulillah menjadi..
    kalo kita nak bagi jadi 10 pengomen tegar cmna ye?

    ReplyDelete
    Replies
    1. Alhamdulillah...

      Untuk senaraikan 10 pengomen tegar, cari kod ini:

      var maxTopCommenters = 5;

      Gantikan 5 dengan 10

      Itu saja ;)

      Delete
  9. salam..
    alhamdulillah..
    berjaya..
    thanks sudi sharing..
    :)

    ReplyDelete
  10. wah langsung aku coba ya, terimaksih telah berbagi

    ReplyDelete
    Replies
    1. Ya...sama-sama. Terima kasih menggunakan widget ini :)

      Delete
  11. Thnaks.... dah masukkan dalam blog.. hehehe

    ReplyDelete
  12. salam cikgu..saya ada problem dengan widget jenis cloud.dah beberapa hari buat hal..menghilang he3..

    saya dah pasang yang baru ikut tutor ni.tapi lupalah,macam mana ye nak setting komen mengikut bulan,sebab keluar pulak jumlah semua yg pernah mereka komen dari awal mereka singgah dulu2...terima kasih ye cikgu ^^

    ReplyDelete
  13. takpe cikgu saya dah edit sendiri tadi he3.selamat berpuasa ^^

    ReplyDelete
    Replies
    1. Yeke...ok, kalau lea ada ape2 nak tanya, roger je CK anytime ;)

      Delete
  14. salam cikgu,akak dah buat namun nama sendiri tetap muncul juga..nape ek?

    ReplyDelete
  15. Salam Aidilfitri kak tie. Utk disable komen akak sendiri, akak tgk komen Anna Mariana kat atas. Caranya sama je cuma akan perlu ubah perkataan tu dgn Kak Tie saja. Maaf CK tak dpt beri penerangan lengkap sbb guna hp...

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Assalam CK : baru try widget ini...terima kasih perkongsian, ana follow CK #404

    ReplyDelete
  18. NICE.... ciut miut.. :D Terima kasih bnyk ya

    ReplyDelete
  19. Terima Kasih,
    Saya dah cuba banyak widget untuk top commenter..
    finally, this one is the best.. :D

    ReplyDelete
  20. Salam CK,
    macam mana nak jadikan widget ni monthly...
    saya dah tukar varian numdays = 30..
    tapi bila masuk bulan baru.. tak tertukar pun..
    harap CK boleh bantu.. :)

    ReplyDelete
  21. salam ramadhan,
    mohon share widget top commentar ye..

    ReplyDelete
  22. salam hari raya..eda mahu share ini yer..best sangat..

    ReplyDelete
  23. tQ cikgu...dah copy widget ni....hehehe

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Nice widget. Sy copy & letak di blog ye. TQ cikgu

    ReplyDelete
  26. very nice sharee. nanti nak cuba lah :)

    ReplyDelete
  27. hihi.. sy copy ye.. comey... :)

    ReplyDelete
  28. tumpang copy&paste di blog ye!!

    ~wink~

    ReplyDelete
  29. Salam singgah petang cikgu...diana try kat blog diana....menjadi lah...tq cikgu....

    ReplyDelete
  30. Kita guna ye ^_^ Dah lama cari tutorial commenters ni. Terima kasih.

    ReplyDelete
  31. Kita share dekat blog. Mohon halalkan ye ^_^

    ReplyDelete
  32. saya punya tak jadi. tak tahu sebab apa?

    ReplyDelete
  33. Widget nie tak keluar gambar plak hari nie ...

    ReplyDelete