Hoje vamos aprender a personalizar os comentários das postagens. De forma que fique organizado estruturalmente para facilitar modificações. Isso da mesma forma que fiz aqui no Códigos Blog.

Antes de tudo quero dizer que é bom você fazer backup do template e que essa modificação é feita diretamente da página “Editar HTML”, não é aceita (eu acho, nunca testei pra falar a verdade) no Design de Modelo (nova forma de fazer seu template).

Pretendo desenvolver vários modelos e disponibilizar aqui no Códigos Blog, então o modelo de hoje é esse da imagem abaixo:

1 – Entre em “Editar HTML”.

2 – Marque a caixa “Expandir modelos de widgets”

3 – Procure (Ctrl + f) por:

<div  expr:class=\'data:post.postAuthorClass\' expr:id=\'data:widget.instanceId +  &quot;_comments-block-wrapper&quot;\'>
<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>
</div>

Substitua tudo por:

<ol class=\'commentlist\' style=\'margin:  0; padding: 0;\'>
<li class=\'comment\' id=\'comment\'>
<b:loop values=\'data:post.comments\'  var=\'comment\'>
<div  class=\'comment-body\' id=\'div-comment\'>
<div class=\'comment-author\'>
<dt  expr:class=\'&quot;comment-author &quot; + data:comment.authorClass\' expr:id=\'data:comment.anchorName\'>
<b:if cond=\'data:comment.favicon\'>
<img class=\'avatar\'  expr:src=\'data:comment.favicon\' height=\'32px\' width=\'32px\'/>
</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>
<span  class=\'says\'>diz:</span>
</dt><span style=\'float:  left;\'><b:include data=\'comment\'  name=\'commentDeleteIcon\'/></span><a  expr:href=\'data:comment.url\' style=\'float: right; margin: -8px 5px 0 0;\'  title=\'Link para esse comentário (permalink)\'><img  src=\'http://codigosblog.net/servidor/imgcomentarios/permalink.gif\'/></a>
</div>
<div class=\'comment-meta  commentmetadata\'>
<data:comment.timestamp/>
</div>
<b:if  cond=\'data:comment.isDeleted\'>
<span  class=\'deleted-comment\'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</li>
</ol>

4 – Cole o seguinte código CSS ANTES de ]]></b:skin>:

.commentlist {padding: 0;text-align: left;}
.commentlist li {margin: 5px 0 0 0; padding: 0;list-style: none;}
.commentlist li ul li { margin-right: -5px; margin-left: 10px;}
.commentlist p {margin: 10px 5px 10px 0;}
.children { padding: 0; }
#commentform p {margin: 5px 0;}
.nocomments {text-align: center;margin: 0;padding: 0;}
.commentmetadata {margin: 0;display: block;}
.post_thumbnail {padding: 6px; background: #fff; border: 1px solid #ddd; margin: 0 10px 10px 0;}
h3#comments, h3#respond_title  {margin: 0 0 2px 0; font-size: 14px; color: #000; font-width: normal; padding: 0;}
.avatar-image-container {
float: left;
padding: 3px 3px 0px 3px;
border: 1px solid #ccc;
margin: -5px 8px 0 0;
}
.comment-body {
margin: 0 0 10px 0;
padding: 4px 4px 0 4px;
background: #f0f0f0 url(http://codigosblog.net/servidor/imgcomentarios/commentbody.jpg) repeat-x;
text-align: left;
}
.comment-body p {
padding: 8px;
color: #4f4f4f;
font-size: 12px;
text-align: left;
}
.comment-author {
font-size: 15px;
color: #fff;
font-width: bold;
margin: 5px 0 0 0;
}
.comment-author a{
color: #fff;
}
.comment-meta {
font-size: 12px;
color: #fff;
}

O código acima em CSS pode ser modificado, basta trocar a imagem (http://codigosblog.net/servidor/imgcomentarios/ commentbody.jpg), cores, tamanhos, etc.

Não tenha medo de testar! Testar é a melhor forma de aprender HTML. (Cansado de dizer isso, mas é a mais pura verdade).

Até mais...