Customizar avatar/foto nos comentários do Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

É possível agora exibir a foto, um avatar, do visitante que deixa um comentário no seu blog do Blogger. Essa foi uma das poucas novidades do Blogger para seu serviço nesse ano de 2009. Mas há um pequeno problema: quando a pessoa não tem foto ou publica com Open-ID, aparece um ícone padrão que fica fora do padrão da página. Mas é possível colocar uma imagem que você queira no lugar do ícone e manter o modelo de Avatar/fotos. Veja abaixo como mudar isso.

 

Para saber como ativar o serviço de imagens nos comentários leia o tutorial:

 

Veja como ficam os comentários de visitantes do [ Ferramentas Blog ] que têm e que não têm fotos:

 

comentario-sem-avatar

 

Eu modifiquei o código para que, quando não há um Avatar/Foto a ser exibido, que apareça o ícone escrito “Sem Imagem”. Essa funcionalidade eu aprendi no código-fonte do GuiaGoogleWave.com, layout criado pelo Sergio Estrella que é um dos nossos editores lá. Percebi que ele apenas adicionou um trecho bem simples e fácil de configurar e que se adequa a qualquer modelo de template do Blogger.

 

A primeira coisa a fazer é criar a imagem que vai colocar para aparecer quando não há uma Avatar. Ela será o padrão de imagem e precisa ter as medidas certas que são de 37 por 37px. Sei que é pequeno, mas essa media é padrão do serviço. Ao criar a imagem, envie para uma hospedagem, que recomendamos que seja o PicasaWeb (Como enviar imagens para o PicasaWeb) e copie a URL dessa imagem (como ensinamos no artigo citado logo aqui) para usar no código que vamos ensinar abaixo.

 

Agora abra o painel do Blogger e clique no menu “Layout” ~> “Editar HTML” e procure pela linha no código CSS:

 

/* Content
———————————————– */

 

Ou procure por algo semelhante, onde estão as definições dos comentários de seu blog. Logo abaixo disso cole o seguinte trecho, modificando apenas o que está indicado de vermelho:

 

div.avatar-image-container {background:url(http://URL_da_Imagem) no-repeat center center;}
div.avatar-image-container img {display:none;}
div.avatar-image-container img.delayLoad {display:block;}

 

Salve o modelo e veja o resultado em seu Blog. Espero que fique bom o resultado. Ele vai se aplicar a todos os posts, inclusive os antigos. Mas é importante verificar se o seu template já não tinha essa função incorporada, se for o caso, basta você procurar pelas linhas que constam a imagem do ícone.

 

Outros artigos que podem te ajudar:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

2 Comentários

  1. Marcos,
    são estes detalhes sutis que dão muito certo, que para mim fazem toda diferença na apresentação! Ficou ótimo!
    Abração no 6

    Responder

  2. Ô mano, tu não fazes ideia do quanto me ajudou com esta postagem, fazia dias que estava tentando fazer isto e outras cositas mas, porém não conseguia tudo por não estar pondo o CSS antes desse content aí que você colocou.

    Valeu, mesmo!
    \o/

    Abrass,
    Misael M.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.