sexta-feira, 18 de setembro de 2009

Personalizando o avatar nos comentários

Blogger

Caso seu template seja convertido do Wordpress, siga o tutorial: Personalizando avatar nos comentários de templates convertidos (Wordpress para Blogger).

O Marcos Lemos (Ferramentas Blog) é gente boa demais! Ele faz um tutorial ensinando a colocar avatar nos comentários e no próprio post deixa uma cobrança disfarçada de elogio para nós (Ariane, HTMHelen, Juliana Sardinha e MamaNunes) fazermos posts ensinando a personalizar o recurso.

Agradeço a confiança do Marcos e já estou publicando a minha contribuição. Na verdade eu tive que aprender a personalizar para o próprio HTMHelen. Mesmo com o código as imagens não apareceram nos comentários “de cara”, então tive que personalizar o CSS.

Faça tudo em um blog de testes primeiro!

1. Ativando o recurso

  • Configurações » Comentários.
  • Marque Sim para a pergunta Mostrar imagens de perfil nos comentários?
  • Salve.

Teste. Caso o seu template seja original, pode ser que funcione sem precisar alterar nenhum código. Caso não funcione, prossiga:

2. Inserindo o código

Siga o tutorial do IceBreaker. Teste novamente. Pode ser que os avatares não apareçam ainda porque o CSS ainda não está ajustado.

3. Ajustando o tamanho da imagem

Insira o seguinte código na folha de estilos do Blogger, sendo que onde está escrito 55 você insere os valores desejados de largura (width) e altura (height).

div.avatar-image-container {width:55px; height:55px;}
div.avatar-image-container img.delayLoad {width:55px; height:55px;}
]]></b:skin>

4. Imagem alternativa

Caso o usuário não tenha avatar ou qualquer erro/lentidão impeça que ele apareça, você pode estipular uma imagem padrão, que na verdade é um background. Use seu editor de imagens favorito (recomendo o IrfanView) para redimensionar a imagem para o tamanho exato que você estipulou acima.

Para hospedar a imagem você pode usar o próprio Picasa ou seu host de imagens favorito.

Para que isso funcione é preciso ter estipulado as medidas corretamente no passo 3. Veja o código que eu usei aqui no HTMHelen:

div.avatar-image-container {background:url(http://enderecodaimagem.gif) no-repeat center center; width:55px; height:55px;}
div.avatar-image-container img {display:none;}
div.avatar-image-container img.delayLoad {display:block; width:55px; height:55px;}
]]></b:skin>

5. Bordas, margens e espaçamento

24/09/2009 → O código anterior não estava escondendo a borda padrão do avatar, então foi acrescentada a seguinte linha:
#comments-block .avatar-image-container img {border:0px;}

Caso você já tenha lido e praticado o tutorial Margens e espaçamento, está craque no assunto. Mas para quem ainda não teve oportunidade, segue o exemplo completo de como precisei fazer todos esses ajustes aqui no HTMHelen:

dt.comment-author {padding-left:20px; padding-bottom:20px;}

dd.comment-body {padding-left:20px;}

div.avatar-image-container {margin:0px; padding:0px; padding-left:20px; padding-right:5px; background:url(http://lh3.ggpht.com/_HlIyV_enpD8/SrNrveaWOsI/AAAAAAAAHns/S5DR5UrDbGw/s800/avatar-comentarios.gif) no-repeat center center; width:55px; height:55px;}

#comments-block .avatar-image-container img {border:0px;}

div.avatar-image-container img {display:none;}

div.avatar-image-container img.delayLoad {display:block; padding:0px; margin:0px; width:55px; height:55px;}

]]></b:skin>

Resultado com um comentário usando OpenID e outro usando a conta do Blogger:

Avatar

A palavra exemplo não foi usada à-toa. Você precisará ajustar pixel a pixel para que o avatar fique bem encaixado no leiaute, porque isso depende totalmente de todas as customizações que já foram feitas antes.

Até mais!

51 comentários:

  1. Ontem eu tentei várias coisas pra tentar personalizar o tamanho e posicionamento das imagens mas não consegui...parabéns por decifrar esse enigma! rs

    ResponderExcluir
  2. Olá Helen, obg pelas visitas e pelos comentários.

    Sobre aquele artigo do Homer Simpson comunista, eu traduzi ele há um tempão atrás, quando ainda tinha ilusões socialistas. Por isso o caráter meio panfletário.

    Sobre a forma desastrada como mandei o povo em dúvida procurar a Juliana, eu realmente pensei que estava ajudando a divulgar o trabalho dela. Hehehe!

    Mais uma coisa que tem me deixado intrigado, não sei se vc já notou, mas o google indexa os blogs que estão no Blog Roll da sua coluna lateral (inclusive o meu). Como o seu blog tem milhares de páginas de postagem, eu tb tenho milhares indexações levando para sua página. Não sei se isso é bom ou ruim. Me dá uma luz.

    Abraço!

    ResponderExcluir
  3. Falei no Dicas Blogger que ia conseguir! No meu template que é convertido do wordpress o códeveria ser colocado em outra parte diferente do que foi explicado no Icebreaker.
    Valeu pela dica do CSS!

    Marco Damaceno

    ResponderExcluir
  4. Parabéns por decifrar "o código secreto" \õ/
    Consegui instalar perfeitamente no meu blog de testes, agora é só passar para o oficial!

    ResponderExcluir
  5. Gostei, simples e prático. Valeu por compartilhar.
    =]

    João Paulo

    ResponderExcluir
  6. oi Helem gostei do seu site visita o meu ai se em caso de parseria avisa ok valew abraço

    ResponderExcluir
  7. Fiquei famosa agora!...rs
    Sim, eu volto sempre, leio tudo e aprendo muito aqui.
    Eu não testei ainda, esta dica de hoje mas, tentarei. Depois voltarei para dizer se deu certo para mim.
    Obrigada...por tudo!!!

    ResponderExcluir
  8. Oi Helen,
    Excelente a sua dica. Eu já tinha visto como ativar esse recurso, mas a sua dica pra customizar os estilos foi maravilhosa!
    Adorei e deu hipercerto!
    Seu blog é ótimo, virei mais vezes aqui.

    Bjks,
    .::Clau::.

    ResponderExcluir
  9. Helen, ótimo artigo, só gostaria de saber uma coisa: Pq a 'imagem alternativa' não fica com os 55px quadrados determinados?

    ResponderExcluir
  10. @César Sá, a imagem alternativa é um background, portanto ela tem que ser recortada nesse tamanho antes para se encaixar perfeitamente no quadrado.

    Se precisar, me passe o link do blog onde dá erro.

    ResponderExcluir
  11. Helen, eu recortei a imagem sim, 55px exatamente, porem ela não fica quadrada, é cortada na parte de cima e embaixo. Você pode ver no blog q já ativei o recurso: www.pegaorato.com.

    Obrigado pela ajuda

    ResponderExcluir
  12. @César Sá, eu olhei o código fonte do seu blog e você vai ter que trocar div por #comments-block. Por exemplo, onde está escrito:

    div.avatar-image-container {

    substitua por:

    #comments-block .avatar-image-container {

    E assim em todo o código que coloquei neste post.

    ResponderExcluir
  13. Obrigado, ficou do jeito que eu queria :D

    ResponderExcluir
  14. Nossa isto era tudo que eu precisava obrigado!

    ResponderExcluir
  15. Olá Helen cheguei ao seu blog por indicação do Marcos Lemos e já encontrei aqui algumas dicas bem legais que implantei no meu. Infelizmente nessa me enbananei um pouco. fiz o do passo tres e parei por ai mesmo. Um forte abraço!

    ResponderExcluir
  16. vlw aí hein kra, agr aquele B n vai mais encher o saco... ou kra, teria como vc faze um tuto pra tira o link da imagem

    tipo, num comentário do admin do blog aparece o B e nele tem um link, teria como vc faze um tuto pra tira?

    s vc fize, eu sei q é chato fica mandando email mas por favor manda pra thiago_khar@hotmail.com

    vlw

    ResponderExcluir
  17. Thiago, apesar de você não ter escrito em português eu acho que entendi.

    Atualmente o blog está de férias por motivos acadêmicos e profissionais. Tudo indica que eu volte a escrever para o HTMHelen em março.

    Até mais!

    ResponderExcluir
  18. Oi Helen
    Deixa eu falar..por que só os primeiros comentarios praticamente aparece o avart e o resto só aparece a uma outra iamgem qualquer? é erro do blogger né? alguem ja conseguiu resolver isso??
    Beijos e obrigada pela ajuda

    ResponderExcluir
  19. Bacana Helen, finalmente disvendado o misterio do Avatar que não aparecia, vão te chamar de Mister "M" da Internet rsrrs Estou brincado beijoss no seu coração e fica com Deus!

    ResponderExcluir
  20. Valeu muito obrigado, funcionou certinho no meu blog.

    Já te adicionei nos meu favoritos!!!

    ResponderExcluir
  21. Oi, Helen! Obrigada elas dicas!
    Fiz tudo conforme você explicou, mas só apareceu a minha foto. Não consigo visualizar as fotos dos que deixam seus comentários (mesmo que essa pessoa já tenha hosedado foto em seus perfis). Como proceder para que as fotos das pessoas também apareçam? Abração!

    ResponderExcluir
  22. [Não aceite]

    é so para ver se o ícone vai diminuir

    ResponderExcluir
  23. Wagner, aceitei. Como você pretendia ver o avatar sem eu aprovar? Só no preview (onde ele realmente fica menor)?

    ResponderExcluir
  24. Helen, eu queria saber se tem como eu aumentar a distancia da imagem para o nome do comentarista ? agradeço desde já ;-)

    ResponderExcluir
  25. Marcos, o código que demonstrei já prevê esse espaço em padding-right, você pode aumentar o valor.

    Para mais informações sugiro o post Margens e espaçamento interno.

    Até mais!

    ResponderExcluir
  26. Oi Helen, faz pouco tempo que leio aqui mas já achei bem legal! Tou vendo o que posso mudar no meu site tudo mais, e nessa daí eu queria por umas bordas arredondadas na imagem, mas mesmo com o
    #comments-block .avatar-image-container img {
    display:none;
    border: 2px white;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    }
    eu não consegui, pode me dizer como faço?

    ResponderExcluir
  27. Oi! UHAEUHA
    Nossa, seu tuto me ajudou muito, já tinha recorrido a outros, mas esse além de simples ta muito prático!
    Parabéns e obrigada.

    Mas tenho uma dúvida, como faço pra separar um comentário do outro? DDDD:
    Eu li seu post de espaçamento, mas sinceramente não entendi. AUEHAUHAE'
    Sou burra --'

    .... O que eu faço? t_t

    ResponderExcluir
  28. Helen, não consegui, olha o meu blog é vmaultimate.blogspot.com
    Não funcionou :(

    ResponderExcluir
  29. Nossa , me ajudou muito obrigada , olha o resultado : www.iCarly-news.blogspot.com

    ResponderExcluir
  30. Helem, eu fiz tudo certinho, mas não estou conseguindo tirar aquela borna cinza das fotos do comentaristas (aqueles que usasam suas próprias fotos) to lutando contra essa bora e já to perdendo de uns 10 x 0, me ajuda.

    ResponderExcluir
  31. Dimmy, coloque o link de um post onde ocorre o problema.

    ResponderExcluir
  32. Já fiz de tudo, tentei vários códigos, mas nao consigo fazer a imagem do comentarista. Só aparece o link do perfil dele. AHHHHH! (desespero rsrs)

    ResponderExcluir
  33. helen tudo bom ... "Eu consegui fazer o que vc passou" .. na realidade a imagem de fundo até que consegui ... mais meu problema é que aquele código do icebreaker já existia em meu template...

    Então eu num fiz nenhuma modificação... apenas no css ... Configurei minha conta do Google com um avatar ... mais quando fiz um comentário ele num aparece nada .. apenas a imagem de background ...
    Vc sabe me dizer se existe outra configuração para os templates novos do Blogger???

    At-é +++

    ResponderExcluir
  34. nosso blog, se você disser o endereço do blog que está com problema, talvez eu possa chutar qual é a causa.

    ResponderExcluir
  35. nosso blog, eu comentei no blog agora e está funcionando perfeitamente. Muita inocência da sua parte querer que apareçam fotos de perfis que não têm fotos.

    ResponderExcluir
  36. Aff... pensei que tinha que configurar no Gmail ... achava que era uma conta unica do Google para meu avatar... Também isso aconteu pelo fato de seu primeiro template no Blogger ... pois uso apenas o Wordpress... e estou acustumado a deixar comentários apenas em sites Wordpress (pois é onde que busco informações para construir o tema) inserindo apenas o meu E-mail... e meu gravatar já aparece...
    Brigadaum e ateh +++

    ResponderExcluir
  37. Olá, Helen. Eu instalei o CSS no meu blog. Funcionou. Entretanto, recentemente, eu respondi um comentário e a imagem que apareceu foi o background e não a imagem do meu perfil na conta do Google (que é a minha foto aí do lado). Como posso resolver??

    PS: Seu blog é muito bom.

    ResponderExcluir
  38. Thiago, é preciso estudar o código do seu template para descobrir o problema. :(

    Você tentou o tutorial para templates convertidos?

    Faça em blog de testes primeiro.

    Até mais!

    ResponderExcluir
  39. Olá Helen. Passei o dia tentando ajeitar os comentários. Mas foi em vão. Vi o CSS de cabo a rabo e estudei todo o código que o Icebraker e o Lemos passaram. Nada. Fiz um blog de testes que acabou dando o mesmo resultado que o blog oficial.
    Se puder dar uma olhada e me explicar onde eu estou errando, eu ficarei grato.
    Eis o blog: Adoráveis Tribais
    Tem comentários no terceiro post.
    Obrigado.

    ResponderExcluir
  40. Thiago, eu não faço frilas mais, sinto muito.

    Boa sorte!

    ResponderExcluir
  41. Nossa me ajudou demais!!!! Ótimo artigo.

    ResponderExcluir
    Respostas
    1. Que bom! Mas para o novo modelo de comentários do Blogger com níveis este tutorial não funciona mais. :(

      Excluir
  42. Cheguei aqui pelo Ferramentas Blog.

    Há séculos que estava procurando uma solução para associar uma imagem aos comentaristas anônimos e que não têm avatares.

    A sua dica veio a calhar.

    Só que eu não sei configurar muito bem e há algumas distorções :(

    ResponderExcluir
    Respostas
    1. Carlos, este tutorial é de 2009. O código novo dos comentários do Blogger, além de ter mudado muito, ainda está em fase beta, quando eu penso que entendi eles mudam de novo e detonam minha formatação. Quando eu achar que o Blogger não vão mudar mais estudo o código para fazer outro tutorial. Obrigada e até mais!

      Excluir
  43. Bom seus códigos ( você foi a unica que descreveu de forma clara sem bagulets e outras baboseiras, parabéns)

    ResponderExcluir
    Respostas
    1. Este tutorial é tão antigo… O código do Blogger já mudou tanto desde então. Que bom que ainda serve para alguma coisa.

      Excluir

Posts relacionados