Tutoriais Blogger Vanessa S.
Imagem Personalizada para Comentários OpenID / Anônimos/ Url ou perfis sem foto
Você já aprendeu como incluir avatar nos comentários do blog.
Viu que, por regra, os avatares só serão visíveis para aqueles usuários que comentam no seu blog, usando perfil do Google.
Mas é possível personalizar uma imagem padrão para que apareça também quando comentados usando o OpenID, ou para comentários anônimos.
[alerta]
Atenção: O sistema de comentários do Blogger mudou! A eficácia da dica aqui apresentada não se aplica ao novo sistema de comentários.[/alerta]
Neste tutorial você vai aprender a incluir uma imagem padrão para os comentários que não forem assinados usando conta google, onde aparecerá uma mesma imagem para todos os comentários anônimos ou com OpenID.
Atenção: para utilizar este recurso, primeiramente você deve ter ativado o avatar nos comentários em seu blog. Caso ainda não tenha, ative-o seguindo este tutorial.
2º passo:
Você deve escolher uma imagem no tamanho 36×36 para utilizar, uma boa sugestão, use uma imagem icone padrão do blogger.
Segue abaixo uma imagem modelo, para que você possa tomar como base as medidas.
Salve a imagem abaixo em seu pc e hospede-a no seu site favorito. Depois de hospedada, guarde a url da imagem pois você irá precisar dela para incluir no código.
Entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole ACIMA dela:
.avatar-image-container img {
background: url(URL-DA-SUA-IMAGEM) no-repeat center;
float:none;
}
.avatar-image-container {
background: url(URL-DA-SUA-IMAGEM) no-repeat;
}
.avatar-image-container.avatar-stock img {
display:none;
}
Salve e pronto!
Não se esqueça que a imagem acima é apenas um modelo, você pode usar a imagem que quiser, desde que ela tenha um tamanho máximo de 36×36 e lembre-se de incluir o endereço da sua imagem no local destacado em vermelho!
Agora toda vez que alguém comentar em seu blog , como anônimo ou usando OpenID, vai aparecer uma imagem personalizada, padronizando e melhorando mais a aparência da sua área de comentários.
Fiz tudo como explicado e não deu certo, pelo contrário, sumiram as imagens que já estavam nos comentários.
Eu tentei. Mas, ele fica em todos os avatares. e ainda aparece como se fosse uma marca d'água
Clau, acabei de fazer e deu certinho.
Obgda.
Clau, muito obrigado. Sempre sigo teu metablog.
Mas, a exemplo de alguns outros aqui, também tive substituído tudo, inclusive os que postaram logados.
Edson
É que eu acabei atualizando o post e inclui um código mais simplificado, para tentar ajudar o pessoal que usa os novos modelos de designer de modelo…inclui um código mais "generico", digamos assim 😉
mas vc pode usar qualquer 1 dos 2…
Clau, se não me engano está ocorrendo algo estranho: No comentário 8, você postou o código diferente do post…
#comments-block .avatar-image-container img {
background: url(URL-DA-SUA-IMAGEM) no-repeat center;
#comments-block .avatar-image-container.avatar-stock {
background: url(URL-DA-SUA-IMAGEM) no-repeat 36% 36%;
NO ORIGINAL:
.avatar-image-container img {
background: url(URL-DA-SUA-IMAGEM) no-repeat center;
float:none;
}
.avatar-image-container {
background: url(URL-DA-SUA-IMAGEM) no-repeat;
}
.avatar-image-container.avatar-stock img {
display:none;
}
Olá !!
No meu não funfou não… alterou tudo…
Mas valeu pelo tutorial !!
Um beijo
Vlw pela dica, ja stou usando em meu blog !
Como por varias imagens ??
Tipo varias imagens diferentes ??
won a dica é ótima, funcionou perfeitamente no meu blog. Bjos e obg XD
geovanni
Fico feliz que tenha dado certo! Obrigada pelo retorno.
Ja tinha descobrido isso depois que postei e funciona!
Mas valeu!
geovanni
Experimenta estipular o valor, incluindo width e height nos trechos correspondente a imagem (.avatar-image-container img e .avatar-image-container)
Eu entendi o que o Frango Perneta quis dizer!
é que se a imagem for maior que 32×32 não aparece o resto,oq ele quer sabe( e eu tambm ) é se tem como almentar a area da imagem no css?
Valeu!
Frango Perneta
Use um editor de imagem para aumentar ou diminuir o tamanho da imagem.
Oi, o avatar esta em 36×36 px teria como aumentar ?!
e como eu seria ?!
VLW salvo o meu blog
Oi Clau, descobri pq no meu mudou tudo.
Na verdade qdo fazemos esta personalização ela entra em todos os comentários, mesmo dos quem entram com a conta Google, onde nesta fica embaixo da imagem, como meu ícone estava pequeno, dava para ver os dois, aumentei o ícone de quem faz o login pelo Google e passei a não ver mais o ícone que programei para OpenID e anônimo.
Fica a dica escolha ícones pequenos ou do mesmo tamanho de quem entra pela Conta do Google para um não o sobrepor outro.
Bjs
vlw mw ajudou muito
blogsorridentes
Se há como fazer isso, eu desconheço.
Olá, eu gostaria de saber se posso colocar uma imagem para os usuários e outra para os Anônimos, tem como fazer isso?
—
Obrigado!
Gloria
Não sei te informar. Sugiro que vc envie essa dúvida diretamente no Forum Oficial do Blogger, pois somente um funcionário do próprio Blogger poderia te esclarecer essa dúvida mais corretamente.
Obrigada pela visita.
É possivel ver a URL de um anonimo na parte das estatísticas do blog? Lá é registrado quem visita o blog, mas será que registra todos os visitantes?
Se puder me ajudar……
valeu mais nao deu!
Oi Clau, eu tenho uma dúvida e quando um menino comentar e depois uma menina, tem como deixar diferente para cada um?
Isa
Vc deve ter feito alguma coisa errada sim, pq este código é exatamente o que eu uso tanto no MB qto nos templates gratuitos e até nos exclusivos que faço, e nunca ocorreu nenhum problema. Não sei o q pode ter acontecido no seu blog, a única que coisa que posso sugerir é que vc volte como estava antes então. Lamento, mas não tenho como ajudar.
Oi Clau, no meu ele mudou tudo até mesmo o do autor da postagem, os das pessoas que entra pela conta google… Fiz algo errado??
testeievoce
Este código muda todos os comentários com perfis indisponíveis, anônimos, url e openid.
Oi Clau…
Mais uma vez… Parabéns!!!
Bom eu coloquei este código no meu blog, só que todos os avatares mudaram, inclusive o que eu usei pela conta do Google, não teria como mudar apenas os que não possuem avatar???
Bjs, Isa
@Admin AC/DC:
Do blogger, que eu saiba não..
Tem Como por varias Imagens nos Comentarios ??
Olha, seu blog é muito 10, visito ele a vários meses, mas depois que você mudou o template ele não carrega diteito, fica uma forma nenhuma, ele carregouu de forma certa uma vez, todo rosa não é? Bem, agora não mais…
Só comentei pra avisar, obrigado por tudo.
@@HERCULYS???:
Já tinha sim, mas pra evitar que o pessoal não veja, eu destaquei o aviso em negrito…e destaquei em vermelho o local pra incluir a url da imagem.
Obg.
e mais vc nao falo no post q tem q bota o codigo vc falo
*(Clique na imagem para ampliá-la e salve no seu pc)
depois vc ja foi pra parte de copiar o codigo.
Para os inesperientes como os que tentaram e nao deu certo ai nos comentarios vc tem q diser q eles tem q hospedar e bota o link no codigo.
Pq eles tao salvando a imagem e copiando o codigo q ta ai e colocando direto no html ai por isso o dessas pessoas nao deu certo ok vlw bjos
@HERCULYS???:
O local para incluir a url da imagem hospedada está marcado no código sim.
Basta observar em:
#comments-block .avatar-image-container img {
background: url(URL-DA-SUA-IMAGEM) no-repeat center;
#comments-block .avatar-image-container.avatar-stock {
background: url(URL-DA-SUA-IMAGEM) no-repeat 36% 36%;
Acho que vcs que andam desatentos heim?rs
De qualquer forma, obrigada pelo toque e pela visita.;)
cara amiga vc esqueceu de colocar no post onde colocar a url da imagem hospedada o pessoal esta apenas copiando o codigo como vc falo no post mas nao fala de botar o link da imagem no codigo es as pessoas nao adivinham obrigado visita ae se possivel http://www.xsampx.com
@Wellington Holanda:
É que para cada px que vc aumenta na borda, interefe na medida das margens.
Vc vai ter q tentar incluir ou editar as medidas de "margin e padding", e ir testando até atingir o resultado que vc quer.
Sobre bordas, dá uma lista neste tutorial:
Personalizando Bordas no Template
Ele pode te ajudar a conhecer mais sobre bordas.
Obrigada pela visita e pelo comentário. Volte sempre!
Olá Clau.
Bom, em relação a bordas nas imagens… Tem como você explicar um pouco mais como que é? Bordas em formatos "pontilhados" e etc.
Eu tentei aumentar os px da borda e a imagem acabou se alinhando cada vez mais pra direita a cada px que eu aumentava. Estranho não? ;O
@Willian Rodrigues:
Este código funciona na maioria dos templates, inclusive é esse código que utilizo para incluir imagem nos comentários dos templates que faço, tantos os gratuitos, quanto os exclusivos.
Pode ser que não tenha funcionado, pq seu template já deve ter sofrido bastante modificações, a única solução é você ir testando até ver se dá certo. Infelizmente não tem como eu te ajudar.
Muito Obrigado pelo Post, e parabéns pelo site, mais esse não da certo por nada, to desesperado para ver se funciona mais por enquanto nada!
Um Abraço!
Vlw pelo post mas naum deu certo!
Oi Clau!
Mudei novamente meu layot (passa lá para vc, afinal de contas só consegui por causa deste seu blog).
Thanks a lot!!!!!!
Mariza 🙂
PS: mas ainda vou aprender a destacar o comentário do autor rsrsrsrs