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.
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, por isso o passo 1(ativar avatar) não existe mais no blogger, porém, para blogs com modelos de template da web mais antigos o código do passo 2 pode ser necessário
- Acesse, faça login no blogger.com
- Clique em Detalhes
Configurações(atualização 2011 a aba Configurações mudou para Detalhes) - Clique em Comentários
- Procure por Mostrar imagens de perfil nos comentários? e marque a opção Sim
- Clique em SALVAR CONFIGURAÇÕES Clique para aumentar
1. Ativar avatar nos comentários do BlogSpot
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.
- 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
3. Adicionar o código no Css para mudar avatar do BlogSpot
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
Css para imagens no comentário com 35 pxPrecisa 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:
Css para imagens no comentário com 35 pxImagem que será usada:
Css para imagens no comentário com 35 pxImagem que será usada:
Css para imagens no comentário com 35 pxImagem que será usada:
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.
Css para imagens no comentário com 50 pxImagem que será usada:
Css para imagens no comentário com 50 pxImagem que será usada:
Css para imagens no comentário com 50 pxImagem que será usada:
- Aparência de comentário do autor no Blogger
- Regras para colocar no comentários do blog?
- Adicionar formulário de comentário no BlogSpot
- Excluir comentário no post do BlogSpot
- Dicas: Como tirar proveito de um comentário em blog ou site
- Gadget de comentário para site, do Friend connect
- Aumentar ou diminuir imagem no paint
valew pela dica em cara.
ResponderExcluirObrigada
ResponderExcluirconsegui resolver resolver o problema que tinha
:)
boa vlw
ResponderExcluirExcelente! Valeu mesmo pela dica!
ResponderExcluirExelente
ResponderExcluirMuito boa a dica... eu não entendo nada de HTML ou CSS, o jeito é vir nos tutoriais!
ResponderExcluirParabéns, resolveu meu problema!
opaa resolvi o problema aqui vlw aew POST maravilhosoooo ;D
ResponderExcluirda uma passadinha depois no meu blog
www.enterprisedownloads.net
Abraços
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...
ResponderExcluirLUCIANA MORAES
ResponderExcluirPrimeiro, 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
Não equece de Expandir modelos de widgets
ResponderExcluirvaleu obrigado pela dica funciona sim ...
ResponderExcluirParabéns pelo blog. Tutoriais bem explicado, impossível não entender.
ResponderExcluirComo faço para colocar o "leia mais" do lado direito, já que com esse código sempre fica do lado esquerdo.
Obrigada.
Kátia Fernandes
ResponderExcluirO 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
Olá FT. Questão 1.Observei que quando posto um comentário aqui no seu blog a minha imagem não aparece . Por que?
ResponderExcluirQuestã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.
Kátia Fernandes
ResponderExcluirA 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ã.
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.
ResponderExcluirObrigada.
Kátia Fernandes
ResponderExcluirPara 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.
Olá FT
ResponderExcluirFiz 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ç.
Kátia
ResponderExcluirÉ 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.
Kátia
ResponderExcluirAlterei 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.
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.
ResponderExcluirVoltei 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.
Kátia
ResponderExcluirTalvez 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
Como diria o povo daqui...Eta cabra baum da peste!
ResponderExcluirDeu 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...
eu quero tirar este simbolo do blog,tem como?
ResponderExcluirFabricio Santana
ResponderExcluirSe 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.
Olá Lizandro, tudo bem com você? Espero que sim;)
ResponderExcluirPois 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
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.
ExcluirBacana seu tuto, segui as dicas mas não funcionou...
ResponderExcluirtalvez seja porque uso um template minima (antigo) modificado, daí os avatares de comentários de anônimos e alguns outros não aparecem.
De qualquer forma parabéns, está muito bem explicado.
Cordial abraço.