08/10/2015

Tutorial: Gadget "top comentarista" para blogger com avatar.

||


Ohayooo bunnie's, como vai indo o dia de vocês? O meu vai bem calmo, passei lendo e visitando alguns blogs. E decidi a partir de hoje indicar um blog aleatoriamente, a cada postagem. Hoje vou indicar um blog que esta começando, não tem muitas postagens então visitem e comentem: Dricéa. <3 Hoje prometi trazer dois tutoriais,  agora vou ensinar como colocar top comentarista no blog.

Para quem não sabe, esse gadget serve para mostrar os leitores que mais comentaram no seu blog, vai aparecer o nome e a imagem do comentarista. Esse é muito legal porém tem algumas limitações.

Top comentarista sem avatar, mostra uma quantidade maior de comentários 2.000 comentários no total. Enquanto esse só conta os últimos 500. Se possui muitos comentários o sem avatares é o melhor. Top comentárista com avatar é ideial para contar apartir de uma data, exemplo os mais comentadores da semana ou do  mês. O com avatares é o único que te oferece essa opção.


1. Vá em Layout e adicione um Gadget. Escolha HTML/Java Script e dentro dele cole:

<style type="text/css"><!--.top-commenter-line {margin: 3px 0;} .top-commenter-avatar {vertical-align:middle;}
--></style><script type="text/javascript">// <![CDATA[
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See <a href="http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html">http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html</a>//
// CONFIG:
var maxTopCommenters = 5; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anônimo", "SEUNOME"]; // exclude these usernames
var maxUserNameLength = 60; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 16;
var cropAvatar = true;
//
var urlNoAvatar = "<a href="http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s%22+sizeAvatar+%22/avatar_blue_m_96.png%22;">http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png";</a> //<a href="http://www.blogger.com/img/avatar_blue_m_96.png">http://www.blogger.com/img/avatar_blue_m_96.png</a> resizeable
var urlAnoAvatar = '<a href="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&#038;s=">http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&#038;s='</a> + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs &#038; 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 &#038;& author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "<a href="http://www.blogger.com/profile/%22;">http://www.blogger.com/profile/";</a>if(author.gd$image &#038;& author.gd$image.src &#038;& authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = '<a href="http://www.google.com/s2/favicons?domain=">http://www.google.com/s2/favicons?domain='</a> + parseurl.hostname;
}
}
if(urlMyProfile != "" &#038;& authorUri == urlMyProfile &#038;& urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "<a href="http://img2.blogblog.com/img/b16-rounded.gif%22">http://img2.blogblog.com/img/b16-rounded.gif"</a> &#038;& 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' &#038;& txtAnonymous != '' &#038;& 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 &#038;& 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 &#038;& entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe &#038;& authorUri != "" &#038;& 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="<a alt="json-in-script&#038;callback=showTopCommenters%22'" href="http://%27+window.location.hostname+%27/feeds/comments/default?redirect=false&#038;max-results=200&#038;start-index=" ndxbase="">http://'+window.location.hostname+'/feeds/comments/default?redirect=false&#038;max-results=200&#038;start-index='+ndxbase+'&#038;alt=json-in-script&#038;callback=showTopCommenters"</a>></'+'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 &#038;& 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="<a href="http://%27+window.location.hostname+%27/feeds/comments/default?redirect=false&#038;max-results=200&#038;alt=json-in-script&#038;callback=showTopCommenters%22">http://'+window.location.hostname+'/feeds/comments/default?redirect=false&#038;max-results=200&#038;alt=json-in-script&#038;callback=showTopCommenters"</a>></'+'script>');
// ]]></script>

Configurando:
5 em vermelho: é a quantidade de comentaristas que vai aparecer na lista.
0 em laranja: é a quantidade de dias que o gadget contará. Se você quiser "Top comentarista do mês" deverá colocar o número 30, de 30 dias (atenção, coloque apenas NÚMEROS, não escreva a palavra "dias"). Se você quiser contar todos os últimos 500 comentários, deixe como 0 mesmo.
SEUNOME em azul:  são os comentadores que não serão contados, recomendo que você coloque o seu nome (atenção: coloque o nome da sua conta do blogger  ou Google+ o que você usa para comentar).

Créditos: FYD, YA.

9 comentários:

  1. Lindo! <3

    http://penseeadistance.blogspot.com.br/

    ResponderExcluir
  2. Uma boa dica, quem sabe eu não uso em algum layou!!! ^^ ♥♥♥♥
    Lindo o layout, o blog, e super me ajuda as postagens!!!
    BijOs!!! *-*

    Visite e Siga||♥Universo Paralelo♥

    ResponderExcluir
    Respostas
    1. Tomara que sim =3
      Obrigada fico feliz por saber disso. ♥

      Excluir
  3. Yo, sweetheart! ♥ Não tinha visto esse layout maravilhoso ainda, da última vez que vi o blog, estava com aquele do Zelo que eu amava muito, mas enfim nunca usei top comentaristas, mas sempre via uns modelinhos que davam até vontade de usar... Não imaginava que fosse tão simples. É um ótimo tuto!

    Há vagas para afiliação? Gostaria muito que o BC e o EK fossem afiliados.

    Carinhosamente, Jheni. * e m p i r e k a w a i i & q u i n z e o u t o n o s *

    ResponderExcluir
    Respostas
    1. Hihi eu troquei tem poucos dias, eu também gostava muito daquele layout t.t mas já estava na hora de trocar. Sim é bem simples. ♥

      Tem vagas sim ^^ vou deixar uma mensagem no seu blog.

      Excluir
  4. Achei bem legal e fácil!
    Seu layout está lindo como sempre <3
    http://o-hyeah.blogspot.com.br/

    ResponderExcluir
  5. nossa, como ainda não tinha conhecido esse blog pft ? *o*
    estava olhando os tutoriais, sem dúvidas irão me ajudar muito!! sou "nova" nesses assuntos de html e tals k, achei várias coisas que procurava. Talvez eu use esse gadget quando eu fizer um outro layout, via em outros blogs e imaginava algo tão mais trabalhoso, kk. Ah, e que layout mais lindooo! Parabéns pelo blog ♥ \o
    sahhworldtutoriais.blogspot.com

    ResponderExcluir