Post sobre |Dicas blog, Pc

Colocar avatar nos comentários de seu BlogSpot

Vou mostrar como permitir avatar, foto ou imagem do autor de comentário no blogger, e também como fazer para aumentar o tamanho dessa imagem, já que ela fica com um tamanho pequeno.

Atualização 2013, esse post era para interface antiga do blogger, com a nova interface isso não é mais válido e o código abaixo já não funciona, até porque o avatar de perfil do comentário virou padrão nos blogs do blogger, o passo 1(ativar avatar) eu removi desse post pois não existe mais, porém, para blogs com modelos de template da web mais antigos o código do passo 2 pode ser necessário

imagem pouco maior nos comentarios do blogspot
São 3 procedimentos, para alguns basta ativar a opção no blogger(1), mas se a imagem dos autores do comentário não aparecer, é preciso inserir o código no Html do blogger(2), e outro código Css opcional que garante imagem para todos comentaristas(3), e então, vai aparecer a imagem escolhida por você quando um anônimo ou outra pessoa que não tem foto no perfil comentar.
2. Adicionar o código Xhtml para avatar no blogger
    Se você fez o procedimento acima, verifique em um post com comentários para ver se as imagens dos autores de comentário apareceram, se não apareceram você deve adicionar um código no Html de seu blogger.
  • Acesse o blogger.com
  • Clique em Layout(Design)
  • Clique em Editar Html
  • Por segurança faça um backup do html do blogger(Baixar modelo completo)
  • Marque a opção Expandir modelos de widgets
  • Localize esse código <dl id='comments-block'> e substitua por esse:

    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    Você pode usar as teclas de atalho Ctrl + F para localizar mais rápido

  • Depois localize <a expr:name='data:comment.anchorName'/> e logo após/abaixo dele adicione:

    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

  • Clique em SALVAR MODELO

Até aí está praticamente pronto, as imagens vão aparecer, porém, as imagens dos comentaristas do blogger e OpenId vão ficar menor, e, os comentários de anônimos e alguns outros ficarão sem imagem, fazendo parecer algo despadronizado, para resolver isso você tem as opções abaixo.
Você pode escolher uma das imagens abaixo para substituir o avatar de quem não o tiver, ou pode escolher uma imagem que você quiser, essas imagens você já deve ter visto, pois são meio padronizadas na web, bem abaixo e, ao lado de cada exemplo tem um código Css que aumenta a imagem e torna elas num tamanho único.

Atualização 2012 Talvez os códigos de estilo abaixo não funcionem mais, você pode testar para ver, isso porque após uma atualização do blogger, que faz os comentários terem opção de respostas, provavelmente ele mudou os elementos ou a organização deles.

substitui avatar, imagem exemplo 1 média substitui avatar, imagem exemplo 2 media substitui avatar, imagem exemplo 3 média substitui avatar, imagem exemplo 1 pequena substitui avatar, imagem exemplo 2 pequena substitui avatar, imagem exemplo 3 pequena avatar rosa

    3. Adicionar o código no Css para mudar avatar do BlogSpot

  • Estando logado no blogger, clique em Design
  • Clique em Editar Html
  • Faça uma cópia de seu modelo, por segurança.
  • Você deverá localizar esse código:

    ]]></b:skin>
    Clique aqui e veja imagem

  • Exatamente antes/acima desse código ]]></b:skin> pode adicionar um desses códigos abaixo, e depois clique em SALVAR MODELO



Esse código Css é para deixar o avatar do comentário com 35 pixeis e você pode usá-lo para escolher uma imagem que gostar para repor os avatares que não existem nos comentários, você deve substituir http://Endereço.web_do_Avatar.gif por um endereço e imagem existente.
.avatar-stock img{background:url(http://Endereço.web_do_Avatar.gif) center no-repeat}.avatar-image-container img{background:transparent;width:35px;height:35px}



Ou escolha e use apenas um desses códigos abaixo que padronizei, é só adicionar no Css do Html de seu blogger, Como mostrado logo acima(3)

As imagens de avatar que usei ao lado são ilustrativas, para você ver mais ou menos como ficariam os avatares

Expl: Imagens de avatar nos comentarios, menor 1 Css para imagens no comentário com 35 px
Precisa copiar todo o código, você pode clicar na caixa de texto e usar as teclas de atalho Ctrl + A para selecionar todo o código.
Imagem que será usada:
avatar default, padrão para anônimos e qum não tem avatar

Expl: Imagens de avatar nos comentarios, menor 2 Css para imagens no comentário com 35 px

Imagem que será usada:
avatar default

Expl: Imagens de avatar nos comentarios, menor 3 Css para imagens no comentário com 35 px

Imagem que será usada:
avatar default


imagem rosa nos comentáriosCss para imagens no comentário com 35 px


Imagem que será usada:
avatar default


Esses códigos abaixo aumentam a imagem do avatar para 50 pixeis, porém, em alguns modelos de BlogSpot não fica muito bem, e principalmente a imagem do blogger, pois é ampliada demais para seu tamanho original que é em média 17 px.
O código também é bem maior, devido a necessidade de alinhar o avatar.


Expl: Imagens de avatar nos comentarios, maior 1 Css para imagens no comentário com 50 px

Imagem que será usada:
avatar default

Expl: Imagens de avatar nos comentarios, maior 2 Css para imagens no comentário com 50 px

Imagem que será usada:
avatar default, padrão

Expl: Imagens de avatar nos comentarios, maior 3 Css para imagens no comentário com 50 px

Imagem que será usada:
avatar default

27 comentários:

Colocar avatar nos comentários de seu BlogSpot2009-11-02T00:38:00-02:00
  1. valew pela dica em cara.

    Responder
  2. Obrigada
    consegui resolver resolver o problema que tinha

    :)

    Responder
  3. Excelente! Valeu mesmo pela dica!

    Responder
  4. Muito boa a dica... eu não entendo nada de HTML ou CSS, o jeito é vir nos tutoriais!

    Parabéns, resolveu meu problema!

    Responder
  5. opaa resolvi o problema aqui vlw aew POST maravilhosoooo ;D

    da uma passadinha depois no meu blog

    www.enterprisedownloads.net

    Abraços

    Responder
  6. Olá. adorei a dica...é bem simples, porém, não consigo encontrar de forma nenhuma esse trecho....a expr:name='data:comment.anchorName.... para poder substituir.....ja fragmentei pra ve se assim poderia achar apenas com palavras chaves...mas nada adiontou, por acaso existe outra forma de resolver o problema com avatares? por favor me ajudem...

    Responder
  7. LUCIANA MORAES

    Primeiro, esse que voc~e citou não era para ser substituido.
    Talvez algo faltando em seu template, tenta entrar em contato com o site onde você pegou ele.

    Você pode tentar também criar um blog de teste com o mesmo modelo do seu para tentar resolver esse problema, aí tentar adicionar o segundo trecho de código como indicado acima em(2. Adicionar o código Xhtml para avatar no blogger)

    um pouco antes/acima de

    <b:if cond='data:comment.authorUrl'>

    ou, se não encontrar, tente uma linha acima de

    <a expr:href='data:comment.authorUrl'


    Eu indiquei usar um blog de teste porque pode ir sem medo de errar, mas se quiser usar o seu..., aí tenta um comentáriopara ver se deu certo, não esqueçe de usar as teclas de atalho para localizar e não perder muito tempo

    Responder
  8. Não equece de Expandir modelos de widgets

    Responder
  9. valeu obrigado pela dica funciona sim ...

    Responder
  10. Parabéns pelo blog. Tutoriais bem explicado, impossível não entender.
    Como faço para colocar o "leia mais" do lado direito, já que com esse código sempre fica do lado esquerdo.
    Obrigada.

    Responder
  11. Kátia Fernandes

    O código desse post não deve influenciar no 'leia mais'(jump-link).

    Mas para que o 'Leia mais' fique do lado direito leia o comentário desse post, clique

    Responder
  12. Olá FT. Questão 1.Observei que quando posto um comentário aqui no seu blog a minha imagem não aparece . Por que?
    Questão 2. É sobre o gadget perfil. Tem como customiza-lo? Queria alterar o gadget do Perfil não só em sua aparência, mudando fontes, cores e colocando uma imagem diferente da que está gravada no perfil, e criar uma nova direção para ele, por exemplo, para uma página do próprio blog, onde eu pudesse apresentar um perfil mais completo.Veja bem, aqui não se trata do "SOBRE" do menu, mas do gadget, pois gostaria que ao clicar na imagem ou no "ver meu perfil completo..." ele fosse direcionado para uma página específica e não para à página padrão do Blogger ou seja,para o perfil do usuário. Isso é possível?
    Um abç e obrigada.

    Responder
  13. Kátia Fernandes

    A questão do seu avatar não aparecer aqui pode ser 3 coisas, uma, que acho quase impossível, pode ser alguma coisa relacionada a esse blog em questão, ele sofre de alguns 'bugs', tem códigos que consigo alterar em outros blogs do blogger, porém aqui não, um é a questão das estrelas de classificação que acabei retirando por não conseguir mudar o código que alterava o fundo delas, só ocorria aqui. Segunda, se você trocou seu avatar o google pode ter excluído o antigo(em desuso), antes ele mantinha o avatar antigo nos comentários. Terceira e mais provável, pode ser um bug do blogger, nos comentários ele usa uma cópia reduzida do avatar original, e, ele gera essa cópia no momento em que você adiciona seu avatar no perfil, nesse momento pode ter ocorrido algum erro do sistema do blogger e ele ter gravado uma Url invalida para usar no comentário. Tenta comentar em outro blogspot que tenha avatar e se a mesma coisa ocorrer mude o avatar de seu perfil, pode até usar o mesmo, mas tente mudar o nome da imagem antes de usar no blogger, veja como alterar seu perfil do blogger

    Sua outra pergunta vou mostra uma maneira fácil de criar um perfil, comentarei aqui, me surgiu um imprevisto então, só amanhã.

    Responder
  14. Valeu amigo. Ficarei aguardando e pesquisando outros artigos seus para fazer minhas mudanças. Ah, uma pergunta bem "abestalhada":Como mando um e mail via fomulário pra você. É que gostaria de saber uma questão sobre mudança de endereço de blog, procurei aqui, mas não encontrei nenhum artigo sobre este assunto.
    Obrigada.

    Responder
  15. Kátia Fernandes

    Para fazer um gadget de perfil diferente para uma outra página, você pode fazer um post que não será publicado, iniciar uma postagem só para usar a imagem e o código dele(tipo um rascunho), colocar uma pequena foto, uma descrição e um link acima de ambos com o seu nome, esse link para a página que você deseja que seja vista como perfil, você pode usar o editor de postagem para mudar a fonte dessa descrição, aí, você clica na opção Editar Html da área de criação dessa postagem e copia o código ali gerado, esse código você poderá usar como código de gadget para adicionar na lateral, para ver como adicionar códigos na lateral do blogger clique aqui.

    Você talvez precise saber criar link no post

    Se você usa o editor antigo de postagem pode ver como fazer imagem-link no post

    Eu queria postar isso com mais detalhes mas estou com pouco tempo no momento.

    Quanto a outra pergunta sobre mudança de nome do blog eu nunca tive vontade de postar, acho que isso é algo simples, um pouco pessoal de cada e já tem muito artigo sobre o assunto na web, mas pode usar os comentários do blog, mesmo sendo algo que você acha 'uma pergunta bem abestalhada' não é vergonha perguntar.

    Responder
  16. Olá FT
    Fiz o passo a passo todo certo, só que a imagem que coloquei para os leitores que não têm avatar, aparece também por baixo da imagem do autor. Não sei o que aconteceu. Pode me ajudar. Veja no post cheguei.
    Um abç.

    Responder
  17. Kátia

    É que você usa uma imagem com fundo transparente, até aqui aconteceu, na época eu não pensei nessa possibilidade, vou ver se tem uma maneira de mudar o código para isso não ocorrer, depois respondo aqui.

    Responder
  18. Kátia

    Alterei os códigos, como você pode ver no seu comentário acima, o problema sumiu aqui porque alterei meu Html também.

    Você precisará substituir apenas o código do Css, no seu caso, use as teclas de atalho Ctrl F para localizar .avatar-image-container

    e até o próximo caracter fecha-chaves} é o código responsável pela personalização do avatar, aí, pode substituir por um dos códigos acima que você usou e, como você colocou o endereço de emotion para avatar de quem não tem avatar(ou anônimo), você deve colocar ele novamente. Seria melhor passar seu Html para um blog de testes e fazer nele primeiro.

    Responder
  19. Fiz o procedimento, mas o que aconteceu é que o avatar do autor que ficava com uma figura sobreposta ficou normal, mas o avatar do leitor desapareceu.
    Voltei a colocar o codigo anterior e então aparece o avatar do leitor, porém o do auotr fica com duas imagens, ou seja, sob a imagem aparece também a imagem do avatar do leitor.Confuso, né?! Acho que não vai ter conserto...

    Bjão. Obrigada.

    Responder
  20. Kátia

    Talvez você tenha errado ao colocar o endereço Url da imagem.

    Mas, se não for isso, pode colocar essa linha no seu Css do HTML:

    .blog-author img{background:#fff}

    Assim a sua imagem do autor ficará com um fundo branco que irá tapar a imagem usada para avatar dos anônimos, porém, se outra pessoa que usa um avatar como o seu, esse aparecerá com aquele defeito

    Responder
  21. Como diria o povo daqui...Eta cabra baum da peste!
    Deu certo, funcionou direitinho. Olhe, mas por favor quando responder explique no miudinho, pois ainda sou muito analfabeta nesses códigos e trololós...
    Um abç e muito obg
    Até a próxima dúvida...rsrsr...

    Responder
  22. eu quero tirar este simbolo do blog,tem como?

    Responder
  23. Fabricio Santana

    Se você se refere ao avatar que aparece quando outro blogueiro usuário do blogger comenta não sei se tem como mudar isso, quase certo que não, isso ocorre quando a pessoa não usa foto no seu perfil do blogger.

    Mas, não sei se é seu caso, os blogs do blogger vem com um B vermelho que fica no topo do navegador, isso é o favicon e dá para mudar.

    Responder
  24. Olá Lizandro, tudo bem com você? Espero que sim;)

    Pois bem, venho aqui pois preciso de sua ajuda, já nem sei o que fazer mais:apliquei este tutorial há tempos, e o resultado foi ótimo! As imagens haviam ficado maiores tal como eu queria, tanto que apliquei em dois blogs meus.

    No entanto passado todo este tempo, os avatares dos comentários de meus blogs, ora deixaram de aparecer, ora aparece o avatar de quem está comentando, junto da imagem ''por baixo'', aquela que colocamos no html no caso de um comentarista for anonimo e assim não deixar te der uma imagem de fundo.

    Achei que podia ser alguma outra configuração que eu tivesse feito, ou mudança no html, mas não. Apliquei o mesmo template em um blog de testes e deu o mesmo erro. Assim conclui que esta dica que adorei e apliquei, deixou de funcionar. O problema é que vim até aqui, verifiquei os trechos corretos e exclui, no entanto mesmo assim, agora não volta mais ao normal.

    Ficaria desde já muito agradecida, se pudesse me ajudar, pois já não mais o que fazer para ter os avatares nos comentários de volta :(

    Muito obrigada desde já pela atenção,
    um abraço a ti
    Lucy

    Responder
    ...Respostas
    1. Isso ocorreu após o blogger lançar a opção de resposta nos comentários, o blogger usa uma folha de estilo externa e provavelmente ele mudou algo nela para se adequar ao novo código, o que acontece com alguns blogs é que devido as alterações no Html ele não atualiza o código desses blogs, você pode clicar aqui e testar o que diz para fazer com o seu modelo num blog de testes para ver se dá certo, se não, comenta aqui.

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!