Personalizando os comentários do seu blog


Se você é um blogueiro assíduo e vive entrando em sites e fóruns de ajuda deve saber que o blogger é totalmente customizavel, ou seja, você pode mexer em tudo que é código, modificar e adicionar elementos sem problema algum, no entanto você tem que conhecer bem no que você irá mexer para não causar danos ao seu template e acabar perdendo todo seu trabalho.

Por isso vim mostrar a vocês como personalizar o campo de comentários, destacando o comentário do autor do blog e adicionando cores diferentes. Essa dica eu ví lá no blog a la carte, achei muito interessante e resolvi implementar mais um pouco, adicionei uma imagem para o autor e uma fixa para os demais usuários.

*Esse código será aplicado baseado no template mínima do blogger.

Vamos aplicar o código, mas primeiro veja como funciona as tags do código mínima:

• "comment-author" - O autor do comentário
• "comment-body" - Corpo do comentário
• "comment-timestamp" - Horário da postagem
• "comment-footer" - Rodapé dos comentários

Agora que você já está a par do código vamos aplicar no template:

Entre em "Layout" -> "Editar HTML" -> marque a opção "Expandir modelos de widgets" e encontre esse trecho do código:
/* Comments
----------------------------------------------- */

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
Substitua tudo pelo seguinte CSS personalizado:
/* Comments
----------------------------------------------- */
#comments {margin:1em 10px 1.5em;line-height:1.6em;}
#comments .comment-author {margin:.5em 0;}
#comments .comment-body {margin:.25em 0 0;}

#comments .comment-body p {margin:0 0 .75em;}
#comments p a {text-decoration: none;}
#comments p {margin-left: 10px;line-height: 1.1em;}
.deleted-comment {font-style:italic;color:gray;}

.commentlist ul {margin: 0;padding: 0;}
.commentlist li {list-style-type:none;padding:5px;margin-top: 0;}

.commentlist-author {color: #000000;background: #f6f6f6;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlist-general {background: #ffffff;
border-bottom: 1px solid #0000FF;border-right: 3px solid #0000FF;}

.commentlink-date {float: right;font-size: 80%;text-decoration: none;padding: 2px;}

.commentlink-author {color: #0000FF;text-transform: lowercase;float: left;}
Os termos em azul é o que você poderá modificar para deixar as cores da tabela adequada ao seu blog.

Depois que você aplicou o css deve colocar o código que aparecerá no template, para isso encontre o trecho abaixo:
<dl 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'>
<a expr:name='data:comment.anchorName'/>
<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 class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></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>
Depois substitua tudo por esse:
<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<img align='left' src='http://LINK_DA_IMAGEM_DO_AUTOR_DO_BLOG.png'/> <li class='commentlist-author' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>
</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>

</li>
<b:else/>

<img align='left' src='http://LINK_DA_IMAGEM_DOS_LEITORES.jpg'/> <li class='commentlist-general' style='margin: 10px; padding: 5px;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<span class='commentlink-author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>

</cite>
<span class='commentlink-date'><a class='commentlink' expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></span>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p style='margin-left: 0;'><data:comment.body/></p>

<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>
Lembrando que esses códigos foram aplicados no template mínima do blogger, caso seu blog tenha um modelo diferente, procure detalhadamente pelo código de comentários para não causar danos ao template. Visualize e depois salve para garantir.