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 .



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




Até mais...