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:
Depois que você aplicou o css deve colocar o código que aparecerá no template, para isso encontre o trecho abaixo:
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:
/* CommentsSubstitua tudo pelo seguinte CSS personalizado:
----------------------------------------------- */
#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;
}
/* CommentsOs termos em azul é o que você poderá modificar para deixar as cores da tabela adequada ao seu blog.
----------------------------------------------- */
#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;}
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'>Depois substitua tudo por esse:
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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>
<ul class='commentlist' style='margin: 0; padding: 0;'>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.
<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='"#comment-" + 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='"#comment-" + 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>