Blogger Tips: Πως βάζουμε στο blog μας το gadget ΤΟΠ ΣΧΟΛΙΑΣΤΕΣ και ΠΙΟ ΠΡΟΣΦΑΤΑ ΣΧΟΛΙΑ

Σε πολλά blog σίγουρα θα έχετε δει στην δεξιά (συνήθως) πλευρά να φαίνονται τα πιο Πρόσφατα σχόλια των μελών καθώς και οι Τοπ σχολιαστές.

Έψαξα και βρήκα κάποιου κωδικούς οι οποίοι είναι εύκολοι και μπαίνουν σαν Gadget στο HTML/Java Script.

1) ΤΟΠ ΣΧΟΛΙΑΣΤΕΣ:

Ο κώδικας που θα χρησιμοποιήσετε είναι ο πιο κάτω.

Είναι λίγο μεγάλος. Τον κάνετε copy-paste στο Gadget (HTML/Java Script).

*Όπου υπάρχει κόκκινο χρώμα ( var maxTopCommenters = 8; ) μπορείτε να αλλάξετε ανάλογα με το πόσα σχόλια και τι μέγεθoς avatar (var sizeAvatar = 33; ) θέλετε να φαίνονται. 

<style type="text/css">

.top-commentators {

margin: 3px 0;

border-bottom: 1px dotted #ccc;

}

.avatar-top-commentators {

vertical-align:middle;

border-radius: 30px;

}

.top-commentators .commenter-link-name {

padding-left:0;

}

</style>

<script type="text/javascript">

var maxTopCommenters = 10; 

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 = 'No top commentators at this time.';

var txtAnonymous = '';

//

var sizeAvatar = 33;

var cropAvatar = true;

//

var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipwAPitBAgOOY0jdReipxocnPEQkkA03v4o_xJVyDyby_dQ6IgOALWkBZAp1BLSWaJ-3BVEw3mF_vQau-gOmRd_wNIvFvIBDlRXKSJHl-WzVRwOsjFpcwlQPHHxSnR3HLHIllBxTD6yEyv/s1600/avatar_blue_m_96.png" + sizeAvatar;

var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv6Qayn67IX8WmVIbqdVzMGJf_B1zvD6KnqlSeXE6fDNSumcArjmEyVa3mNdghyR86M5J0UDntCQvHLFxqMNDwqATTAkHoYbqKu_q3DDQF_tznB2xy5myT04ZnBfCKUd6PO6X2YfDCG-QN/s1600/avatar1.png' + sizeAvatar;

var urlMyProfile = '';

var 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 = '<img class="avatar-top-commentators" 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="commenter-link-name" 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;

      }

  }

  if(json && json.feed && json.feed.entry && json.feed.entry.length) 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 && json.feed && json.feed.entry && json.feed.entry.length && 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;

  });

  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-commentators">');

    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>

2) ΠΙΟ ΠΡΟΣΦΑΤΑ ΣΧΟΛΙΑ

Ο κώδικας που θα χρησιμοποιήσετε είναι ο πιο κάτω.

Τον κάνετε copy-paste στο Gadget (HTML/Java Script).

- Όπου http://helplogger.blogspot.com/ το αλλάζετε βάζοντας το λινκ (url) του blog σας.

- Όπου υπάρχει κόκκινο χρώμα μπορείτε να κάνετε τις δικές σας αλλαγές

numComments = 5, ( αν θέλετε περισσότερα απο 5 σχόλια να φαίνονται αυξήστε τον αριθμό)

avatarSize = 60, (αν θέλετε μικρότερο ή μεγαλύτερο μέγεθος avatar)

results=5 (ισχυει το ιδιο με το πρωτο)

<style type="text/css">

ul.helploggercomments{list-style: none;margin: 0;padding: 0;}

.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}

.helploggercomments 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;}

.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}

.helploggercomments 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 = 60,

roundAvatar = true,

characters = 40,

showMorelink = false,

moreLinktext = "More »",

defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ppuTcEibumwWIMl1o6oHaPTjXaT-BibbrDGXeOk-nUr9FsvAQfwN6zhw0lCxmOLc8I_kuIFa2OhhXNDTJmZxtYMdE-aGh6ahZPDE7Hs9S0IttZU0X47m_Q0CNFCCnm7shZGdxql74_X1/s1600/default-avatar.jpg",

hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>

<script type="text/javascript" src="http://helplogger.blogspot.com/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script>

Good Luck ! :)