Exibindo avatar/foto nos comentários do Blogger

Por padrão, o Blogger não exibe fotos ou avatares dos comentaristas de seu Blog. É preciso ativar este recurso, diretamente nas configurações do Blogger. Isto é fácil, o pouco mais complicado é adicionar este recurso aos templates que não o possuem ativado, pois isto requer uma edição no código-fonte de seu Blog.

Ativar este recurso é bom para ajudar a identificar a pessoa que está comentando em seu Blog, e também fica mais fácil conhece-la. Anteriormente, mostrei várias maneiras de customizar os comentários de seu Blog, para melhorar o layout de seu Blog e também para otimizar os comentários, adicionando novos recursos como emoticons.
   -> Verifique os comentários de seu Blog antes de serem publicados
   -> Exibir confirmação de palavras ao publicar um comentário
   -> Configurando a Mensagem do Formulário de Comentários
   -> Configurando a posição do Formulário de Comentários
   -> Disqus - Otimização no formulário de Comentários de seu Blog
   -> Adicionando emoticons no formulário de Comentários de seu Blog

Para adicionar este recurso em seu Blog, você deve ir até o painel do Blogger, e ir em Configurações -> Comentários. Procure pela opção Mostrar imagens de Perfil nos Comentários? e marque a opção Sim. Vá até o final da página e clique no botão laranja Salvar Configurações. Este é a maneira simples de adicionar imagens ao seu Blog. Caso o seu template seja personalizado e este recurso não tenha sido aplicado a ele, você deve fazer uma rápida edição no código-fonte de seu Blog. Para isso, acesse o painel do Blogger e vá em Layout -> Editar HTML. Antes de fazer a edição, faça o backup de seu template para evitar erros. Agora, marque a opção Expandir modelos de widgets e pressione CTRL + F. Procure pela seguinte tag:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Caso não encontre esta tag, então você deverá procurar pela seguinte tag, e substitui-la pela tag acima, que não foi encontrada em seu Blog. Se você encontrou a tag acima, não siga esta etapa.

<dl id='comments-block'>

Agora que você já adicionou a tag que ativa as fotos, você deverá seguir os próximos procedimentos para que este recurso funcione com êxito. Procure pela seguinte tag:

<a expr:name='data:comment.anchorName'/>

Substitua esta tag pelo seguinte código:

<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <div expr:class='data:comment.avatarContainerClass'> <data:comment.authorAvatarImage/> </div> </b:if>

Salve o seu template verifique se os avatares já estão em seu Blog. Esta foi uma ótima dica, e que é importante para o template de seu Blog, por otimizá-lo. Você também pode seguir as dicas citadas no início deste artigo para otimizar os comentários de seu Blog. Qualquer tipo de melhora poderá influenciar bastante em seu layout e também na qualidade de seu Blog.