Personalizando avatar nos comentários de templates convertidos (Wordpress para Blogger)

Caso seu template tenha sido feito a partir de algum modelo original do Blogger, use o primeiro tutorial: Personalizando o avatar nos comentários.

Alguns leitores já estavam reclamando problemas para personalizar o avatar nos comentários por usarem templates Wordpress convertidos para Blogger. Eu estava sem tempo para ver melhor isso, até que resolvi ativar o recurso de avatar em um dos blogs que administro e que usa template Wordpress convertido. Vou partilhar aqui os códigos que resolveram a minha situação.

1 :: O código na tag

Há aqueles que nem chegam à parte de personalização do avatar porque não conseguem encontrar o local correto de inserir o código na tag, já que sem esse código o avatar pode até aparecer, mas você vai ter dez vezes mais trabalho para ajustá-lo decentemente.

Se o template que você usa mostra os comentários numerados sem você ter adicionado nenhum código para isso, é muito provável que, quando expandir modelos de widgets, ao invés do seguinte código:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Você encontre esse:

<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>

Ou ainda:

<ol class='commentlist' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Caso já tenha estudado sobre listas, você percebeu que no primeiro código (padrão do Blogger) é utilizada uma lista de definição, enquanto nos dois últimos é utilizada a lista numerada, por isso os comentários são numerados sem nenhum script extra.

O mais importante é entender que a primeira modificação no código, como o IceBreaker mostrou, deve ser feita nessa tag <ol>. Então o seu código, independente de qual dos dois seja, deve ser substituído por:

<ol class='commentlist' id='comments-block' expr:class='data:post.avatarIndentClass'>
<b:loop values='data:post.comments' var='comment'>

2 :: O código do avatar

Com esse código não há muito problema, basta inserí-lo imediatamente acima da linha de código que diz:

<b:if cond='data:comment.authorUrl'>

Então fica:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

3 :: Folha de estilos

O código da folha de estilos muda também. Segue um exemplo que você terá que ajustar até ficar tudo encaixado no seu blog. Esse código já tem todas as modificações esmiuçadas no tutorial anterior: tamanho, imagem alternativa, borda, margem e espaçamento.

#comments-block .avatar-image-container {margin:0px; padding:0px; padding-left:10px; padding-right:0px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN48hp_YD2dzRw-VeoN0Hsy0Xf7qW_6lIcKS0j3Z-k2KUbBNAHdK7qZKkvGbRPy6tOmgAIHSWjturMfOXltgxnLZJXpFjVwN-m3_luDdMYJlcy-8PvLJcp1lzSst8AXi9nwv4Wur7Xg2KS/s800/avatar-vovo55.jpg) no-repeat center center; width:55px; height:55px;}

#comments-block .avatar-image-container img {display:none; border:0px; width:55px; height:55px; padding-top:0px; padding-left:-10px;}

#comments-block .avatar-image-container img.delayLoad {display:block; margin:0px; width:55px; height:55px;}

]]></b:skin>

A imagem desse código de exemplo é a vovozinha desse primeiro comentário. O print é do blog onde todos os códigos deste post foram aplicados:

Até mais!