Ativando foto nos comentários e Correções

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.