Ontem publiquei uma postagem mostrando mais uma novidade, do Blogger. Porém hoje em dia a maioria não usa nenhum daqueles templates prontos disponíveis no painel de controle, e com isso fica impossível o funcionamento do recurso sem a presença do código avatar nos templates personalizados.

Hoje eu prometi que procuraria a solução, mas felizmente não será necessário. O Sérgio Estrella do blog Ice Breaker fez isso para nós. Fiz algumas modificações e agora está completa a explicação e logo no final fiz um tutorial para corrigir alguns “bugs”. Siga o tutorial abaixo e seja feliz:

Antes de começar o tutorial recomendo que faça um backup por segurança!

1º – Entre em “Configurações” -> “Comentários”.
Onde está escrito: “Mostrar imagens de perfil nos comentários?”. Marque: \”Sim\” e salve.

2º – Entre em “Layout” -> “Editar HTML”. Marque a caixa: “Expandir modelos de widgets”.

3º – Procure (Ctrl + f):

<dl id=\'comments-block\'>

Obs.: Caso você NÃO encontre o código acima, procure por:

<dl  class=\'comments-block\' id=\'comments-block\'> OU <dl  class=\'comments-block\'>

4º - Substitua o código encontrado por esse:

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

5º - Procure (Ctrl + f):

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

Cole o seguinte código ANTES:

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

6º - Salve.

• CASO SEUS COMENTÁRIOS FIQUEM DESSE JEITO:

Siga o tutorial abaixo:

1º - Procure (Ctrl + f):

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

E substitua TUDO por:

<span class=\'commentsavatar\'>
<b:if cond=\'data:blog.enabledCommentProfileImages\'> 
<data:comment.authorAvatarImage/> 
</b:if>
</span>

2º - Procure (Ctrl + f):

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

Cole o seguinte código ANTES:

<span class=\'commentsavatarL\'/>

3º - Procure (Ctrl + f):

]]></b:skin>

Cole o seguinte código ANTES:

.commentsavatar {
position: absolute;
padding-right: 40px;
}
.commentsavatarL, .commentmetadata {
padding-left: 45px;
}

4º - Salve as modificações.
Seu template deve apresentar a seguinte mudança:

Os templates podem variar a forma de corrigir esse tipo de defeito, talvez sejam necessárias outras modificações. Entre em contato caso não apresente sucessos nesse tutorial.

Abraços.