30.7.14

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 ! :)

19 σχόλια:

  1. Ωραία και τα δυο! Μπορεί να τα ξαναβάλω αυτά!
    Ευχαριστούμε Μαράκι μου!
    Συνέχισε έτσι!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Τα θυμαμαι που τα ειχες και απο σενα ειχα παρει την ιδεα μαλλον κοριτσακι μου.
      Φιλακια

      Διαγραφή
  2. :))) Και αναρωτιόμουν για τους τοπ σχολιαστές! :)
    Έχασα τη δεύτερη θέση ε για να απουσιάζω γενικώς ! :(((
    Φιλάκια αγαπάκι μου!
    (γράψε μου για το new job!)

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Ε τωρα που εμαθες κανε μια δοκιμη..
      Φιλια πολλλα μανουλα

      Διαγραφή
  3. Το κατάφερα!!
    Σ'ευχαριστούμε πολύ Μαράκι:))))

    ΑπάντησηΔιαγραφή
  4. Ανώνυμος31/7/14, 12:57 π.μ.

    Πολύ καλό Μαράκι μου!!! χαχα γέλασα πολύ με την εικόνα!!!! σμουάτςςςς

    ΑπάντησηΔιαγραφή
  5. Αν ξέρεις κι άλλα χρήσιμα.. δώσε!
    Συνήθως μπερδεύομαι.. αλλά εδώ τα βρίσκω κατανοητά γιατί σε σελίδες με τρικ,παρά τις φιλότιμες προσπάθειες..
    τα προσπερνώ

    Η γνώσει πρέπει να μοιράζετε.. έτσι αποκτά αξία..

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Μορφεα μου οσο μπορω βοηθαω κ το κανω να φαινεται πολυ απλο γιατι αρκετοι δυσκολευονται με τους αγγλικους ορους. Οτι βρισκω ενδιαφερον το μοιραζομαι μαζι σας
      Καλημερα

      Διαγραφή
  6. μαράκι δωρεάν μαθήματα θα πρέπει να σε πληρώνουν .....χαχαχα δες στο για δουλειά και αυτό για σκέψου το κοριτσι όμορφο φιλια

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Λες να το σκεφτω να το κανω επαγγελματικα?? Χεχε

      Διαγραφή
  7. Ω, ευχαριστώ, το σκεφτόμουν καιρό και τα έβαλα τώρα! Στα πρόσφατα σχόλια μπορείς να μου πεις πιο αναλυτικά τι αλλάζουμε διότι δεν μου δούλεψε;

    Καλό βράδυ!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Άστο, το βρήκα. Εσύ μια χαρά το είχες βάλει και με κόκκινο, εγώ πήγαινα και άλλαζα και άλλα!

      Ευχαριστώ και πάλι!

      Διαγραφή
    2. Χαιρομαι που βοηθησα Γιωργο μου
      Να σαι καλα

      Διαγραφή
  8. Μπράβο σου που το βρήκες...
    Η wordpress δεν συνεργάζεται με το blogger, εδώ ούτε οι αναρτήσεις μου φαίνονται και λαμβάνω με mail μόνο ότι έχει σχέση με τη wordpress... αλλά δεν ήρθα να γκρινιάξω, ήρθα να σου ευχηθώ, έναν υπέροχο μήνα!

    ΑΦιλάκια πολλά πολλά!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Τι βασανο κ αυτο
      Σε ευχαριστω πολυ κυρια Στεφανια
      Καλο μηνα

      Διαγραφή

Τα σχόλια όλων είναι καλοδεχούμενα εφόσον δεν προσβάλλουν τον συγγραφέα και τον αναγνώστη,
Ευχαριστω