Customizar avatar/foto nos comentários do Blogger

É 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:

• Avatar/Fotos nos Comentários do Blogger

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

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:

• Modificar as medidas da caixa de comentários padrão do Blogger
• 5 dicas para conseguir mais comentários no seu Blog
• Customizar, modificar e criar Templates para Blogger