Desmembrando a Área de Comentários no Blogger

A área de comentários do blog é a área mais complicada de se entender para a maioria dos usuários do Blogger. Isto porque na maioria dos templates, esta área já sofreu muitas modificações, o que acaba dificultando a personalização desta área.
Nos templates padrões do Blogger, como o Minima, por exemplo, a área de comentário se apresentam de forma simples.
Eu já ensinei vários recursos e hack para personalização da área de comentários, todos eles você poderão conferir os link dos tutoriais, ao final desta postagem.

Ocorre que muitas vezes, o usuário não consegue localizar algumas linhas de códigos na hora de implementar algum hack, e isso ocorre justamente pelo fato de cada template apresenta a sua área de comentário de forma diferente, ou seja, já sofreram muitas modificações.

Afim de fazer com que você, leitor do Mundo Blogger, consiga ultilizar melhor alguns dos tutoriais de personalização dos comentários que já foram publicados aqui, resolvi criar este tutorial para que você finalmente consiga ENTENDER A ÁREA DE COMENTÁRIOS NO SEU BLOG e com isso consiga desvendar e identificar o que cada código significa.

Primeiramente, vamos entender os comandos da área de comentários nos templates padrões do Blogger (Minima)
Veja a imagem abaixo:

1. Entendendo o CSS

No templates padrões os estilos CSS da área dos comentários se apresentam desta maneira:

#comments h4 { /* se refere ao titulo dos comentários*/
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block { /* se refere ao container geral dos comentários */
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author { /* se refere ao autor dos comentários dentro do container geral */
margin:.5em 0;
}
#comments-block .comment-body { /* se refere ao corpo geral da mensagem dos comentários dentro do container geral */
margin:.25em 0 0;
}
#comments-block .comment-footer { /* se refere ao rodapé dos comentários dentro do container geral */
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p { /* se refere ao texto no corpo/mensagem dos comentários dentro do container geral */
margin:0 0 .75em;
}
.deleted-comment { /* se refere aos comentários deletados */
font-style:italic;
color:gray;
}

Para conseguir compreender melhor cada estilo CSS definido pelo Blogger, visualize a imagem acima, e vá se familiarizando, identificando cada trecho, observando no código os comentários que fiz para você conseguir saber a que se refere cada código.

2. Entendendo o HTML

Toda a área de comentários se inicia com o seguinte código:

<dl id='comments-block'>

ou

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

e termina com o fechamento das seguintes tags:

</b:loop>
</dl>

Em suma, as condicionais nos templates padrões, para área dos comentários se apresentam desta maneira:

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

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<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'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</b:loop>
</dl>

Agora vamos entender e desmembrar cada condicional desta, e aprender a identificar uma por uma.
Eu separei cada trecho em cores diferentes para sua melhor identificação e abaixo você encontra a descrição de cada item, discriminando suas repectivas funções.
Lembre-se sempre de ir visualizando na imagem para você ir entendendo ainda mais e ver como os itens do bloco de comentário foram distribuidos pelo Blogger:

id=’comments-block’ –> abre o bloco de comentários. Se refere ao container geral dos comentários.
Representado por esta linha:
<dl expr:class=’data:post.avatarIndentClass’ id=’comments-block’>

(*Note que esta linha se inicia com a tag: dl)
e lá no final de todo o código, temos o fechamento desta tag, representada por: </dl>
Isto ocorre porque o </dl> é o comando que encerra todo o código referente ao bloco de comentários.

Seguindo a 1ª linha de comando que abre o bloco de comentários temos uma linha que contém o comando “loop“.
<b:loop values=’data:post.comments’ var=’comment’>
O comando “loop” faz com que todos os comandos aplicados ao bloco de comentários se repitam, assim, sempre que for postado um comentário ele se aplicará igualmente aos demais, dentro do bloco de comentarios.

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

? abre o trecho referente ao autor do comentário.
E é encerrado com o fechamento desta tag, representada por: </dt>

<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

? abre o trecho referente ao corpo/mensagem do comentário.
*Note que esta linha se inicia com a tag dt = definição do termo
E é encerrado com o fechamento desta tag, representada por: </dd>

<dd class=’comment-footer’> ? abre o trecho referente ao rodapé do comentário dentro do bloco do corpo da mensagem.
(*Note que esta linha se inicia com a tag dd = descrição do termo)

<span class=’comment-timestamp’> ? se refere ao link da data do comentário
<b:include data=’comment’ name=’commentDeleteIcon’/> ? se refere ao icone para que o autor do comentário possa apagar um comentário publicado (aquele icone de lixeira que aparece no final de cada comentario)
O rodapé é encerrado com o fechamento da tag: </dd>

E bloco geral dos comentário é encerrado pelo fechamento das tag:
</b:loop>
</dl> ? encerra todo o código referente ao bloco de comentários.

Agora que você conseguiu entender cada comando e cada função, ficará muito mais fácil conseguir instalar alguns hacks e aprender a personalizar melhor sua área de comentários.

Nos próximos artigos, vou ensinar como aplicar estilos a cada item do bloco de comentários.
Para organizar melhor cada tutorial que será publicado, segue uma lista dos próximos tutorais que farão parte desta série:
– Personalizar toda a área de comentários. Aplicar estilos ao container geral (bloco de comentários – “comments-block”)
– Personalizar o comando que se refere ao nome do autor dos comentários. (alterar a cor do link, tamanho e tipo de fonte, e incluir cor de fundo ao nome do autor dos comentários – “comment-author”).
– Personalizar o corpo da mensagem dos comentários.(“comment-body”)
– Personalizar o rodapé dos comentários (“comment-footer” e “comment-timestamp”)