Avatar nos comentários do Blogger

Avatar nos comentários do Blogger

6 10 99
Avatar nos comentários do Blogger 10 6 99

Temos mais um recurso em comemoração aos 10 aninhos do Blogger – a possibilidade de mostrar (ou não) os avatares dos comentaristas na nem tão nova assim caixa de comentários abaixo incorporada.

O Blogger oferece três formas de posicionamento da caixa de comentários: página inteira, pop up e postagem abaixo incorporada. Essa última foi lançada no ano passado e trouxe um ar mais profissional aos nossos blogs, porém sem o uso de avatares, que foi mantido nas duas outras opções.

posicionamento dos comentários

Hoje foi anunciado no Blogger Buzz que agora está disponível o uso de avatares também para a terceira opção. Para ativar esse recurso, entre no painel do Blogger,  procure por configurações e na aba comentários encontre Mostrar imagens de perfil nos comentários? Marque a opção sim.

configurando

Como na vida dos usuários do Blogger nem tudo são flores, o recurso NÃO  funciona em templates personalizados; somente nos templates disponibilizados por eles.

Graças à astúcia e à boa vontade dos metabloggers, o mistério já foi desvendado.

O Sergio Estrella e o Marcos Lemos anunciaram no Twitter a solução:

Entre no html do template, marque expandir modelos de widgets e procure por:

<dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' shape='rect'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' rel='noindex,nofollow,noarchive' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Substitua tudo por:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>

<div class='comment'>

    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
      <b:if cond='data:comment.favicon'>
        <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
      </b:if>
      <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
        <p><data:comment.body/></p>
      </b:if>
    </dd>
<dd class='comment-footer'>
  <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
      <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
  </span>
</dd>

</div>

  </b:loop>
</dl>

Visualize o blog e se tudo estiver ok, salve o template. Este será o resultado:

resultado

E eu vou continuar sonhando com um sistema de comentários semelhante ao dos blogs que usam a plataforma Wordpress, com direito à nome/url/email #prontofalei

39 Comments
Comments
  1. Testei no meu e deu direitinho!
    Quem sabe um dia, ao menos houve alguma mudança.

    ResponderExcluir
  2. Olá Juliana! Testei mais ngraçado que funciona com os outros mais comigo não fica só um quadradinho sem imagem e no meu perfil tem..rs

    ResponderExcluir
  3. No meu não deu certo! No meu não dá nada certo: o destaque do comentário do autor e esse agora do avatar. Aff!
    Mas sei que com minha curiosidade, fuçando aqui e ali, como sempre faço, eu vou conseguir!

    Marco Damaceno

    ResponderExcluir
  4. Oi Ju,vi essa ferramenta desde que troquei meu template pelo seu...pena que ñ rola.

    Testei a dica (sem os asteriscos) no meu (songs),dei Ctrl +F procurei por:

    <*a *expr:name='data:*comment*.anchorName*'/>

    Deu texto não encontrado.

    Abraços

    ResponderExcluir
  5. Consegui instalar no meu blog de testes, mas como a área de comentários é customizada, o layout do blog ficou meio "torto" o_Ô

    ResponderExcluir
  6. Usuário do Blogger sofre. Quando eu estiver com tempo disponível irei fazer uns testes, mas pelo que li a respeito este recurso já tão atrasado ainda chegou de muleta e deixa muito a desejar.

    Abraço.

    ResponderExcluir
  7. Quando você pede para colar abaixo o seguinte código, você acabou esquecendo de colocar o " <*/b:if> ", eu acho o.o

    Deu erro na hora de salvar o template, mas depois eu vi como o código pronto deveria ficar e adicionei o <*/b:if>, funcionou agora. =)

    ResponderExcluir
  8. @Marco, passe lá no HTMHelen, talvez mudar o CSS ajude. ;)

    ResponderExcluir
  9. @Juliana Sardinha, no meu template veio uma modificação que aparece os avatares nos comentários, mas eles são escolhidos por mim..um para o autor e outro pros leitores.

    Ele também fornece o link do comentário, se quiser passa lá e veja como é o efeito dessa modificação. Bem melhor que esse do blogue.

    ResponderExcluir
  10. Excelente. Testado e aprovado..

    Abraços e mais uma vez obrigado Juliana.

    Ps.: Tbm espero por um sistema de comentários semelhante ao dos blogs que usam a plataforma Wordpress.

    ResponderExcluir
  11. Oi, Ju.

    A mudança é bem-vinda, mas também vou continuar sonhando com o sistema do WordPress. :D

    Abraço.

    ResponderExcluir
  12. adorei a dica e já apliquei nos meus blogs...
    vc reparou que com o avatar nos comentarios gera um certa lentidão?? eu achei.. mas o efeito é tão bacana que eu resolvi ariscar! :-)

    ResponderExcluir
  13. ja e um começo, ainda esta meio longe do sistema do WordPress mais uma dia quem sabe xegamos la =)

    Agora so falta poder colocar paginas numeradas =)

    ResponderExcluir
  14. É Juliana,, um dia agente ainda chega la...

    ResponderExcluir
  15. Oi, Juliana. Que pena: tentei usar o código novo, mas não consegui localizar expr:name='data:comment.anchorName'. Bom final de semana!

    ResponderExcluir
  16. Isso é bem engraçado. Porque se eles vão utilizar o Friend Connect, porque atualizar a caixa de comentários?

    ResponderExcluir
  17. Fantástico, Juliana!
    Muito Obrigado por mais essa dica! Tentei colocar o avatar dentro da moldura (linha de contorno) dos comentários, mas não consegui. De tudo gostei! Está muito bom para um aprendiz dessa maravilhosa ‘arte de bloggar’.
    Aproveito para te agradecer... Estou utilizando um dos seus templates no meu blog, o Writer II. Excelente! Em poucos dias a visitação aumentou bastante e os elogios não param de chegar... Estou todo-todo feliz!
    Felicidades! Abraços, Renato_ò/
    * Também sonho com a chegada do sistema de comentários do Wordpress para a nossa plataforma...

    ResponderExcluir
  18. Mas por exmeplo, pq pra mim postar aki nao consigo escolher uma imagem?

    ResponderExcluir
  19. Solitiei a inscrição e fui recusado.

    Muito obrigado pelo excelente apoio.

    ResponderExcluir
  20. Stefanato, aqui no DB não estou usando este recurso

    André, de nada (seja lá o que for)

    ResponderExcluir
  21. Ai que legal Juliana!!!! Fiz e deu certinho no meu blog tb, já que antes não dava certo porque meu template tb é personalizado. Adorei!!!
    Muito obrigada pela dica, mais uma vez!

    Paz e luz a ti,

    Lucy ♥

    ResponderExcluir
  22. good post article use avatar blogspot,Thanks

    ResponderExcluir
  23. Consegui, mas não consegui achar o código "<'a expr:name='data:comment.anchorName'/>" ao invés disso eu coloquei abaixo do código "<'data:commentPostedByMsg/>", e deu certo.

    Agora será que tem como aumentar o tamenho dos avatares? aqui os avatares ficaram praticamente minúsculos

    ResponderExcluir
  24. Não consegui porque, na hora de salvar, apareceu o seguinte comentár: "Mais de um item encontrado com o id: HTML3. Os IDs de itens devem ser únicos e exclusivos." Gostaria que alguém me ajudasse a resolver o problema.

    ResponderExcluir
  25. Juliana, não consegui! Procurei essas linhas no meu modelo mas não acho nada, já li a versão do Marcos e do Icebreak mas até agora não consegui.

    ResponderExcluir
  26. Uau! Perfeito. Funcionou muito bem!

    Muitíssimo obrigado! Afinal quantas vezes você salva nossos blogs!

    ABraço

    ResponderExcluir
  27. Segui o tuto conforme apressentado aqui no DB e de tudo certinho no meu novo blog, o Gamescola.

    ResponderExcluir
  28. Juliana,
    obrigada pela dica, mas tentei 2 vezes e não consegui. O avatar só aparece no preview, quando mando postar ele desaparece. Já havia tentado essa manobra pelo blog IceBraker e não tinha dado certo. Será que é problema do template?

    ResponderExcluir
  29. Oi, Juliana!!! Obrigada pelas dicas! Seu blog tem me ajudado muito! Suas explicações são sempre muito claras e objetivas. Sempre dá certo. Mas dessa vez, ainda que seguindo suas sugestões, apenas consigo visualizar minha foto. Não vejo as fotos dos que deixaram comentários, mesmo que já tenham hospedado suas fotos. Como proceder? Abração!

    ResponderExcluir
  30. Ah, eu não consigo achar onde aceitar que eu adicione imagens : (
    alguém me ajuda?

    ResponderExcluir
  31. por favor me ajude a encontrar expandir modelos de widgets, quando clico em editar HTML só aparece "ir para um widget" .

    ResponderExcluir
  32. O meu não funciona :( Quando substituo toda essa primeira parte do código pela segunda, aparece uma mensagem de que há um erro na tag '/div'

    ResponderExcluir
  33. Olá, queria saber se eu passando meu blogger para vc editar, vc poderia fazer todas as configurações? Eu já tentei e não estou conseguindo....

    ResponderExcluir

ATENÇÃO: Caso esteja com dificuldades com seu blog, abra um tópico no Fórum de Ajuda do Blogger que nós iremos te ajudar a resolver.


Os comentários passam por um sistema de moderação. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;

 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top