Como destacar los comentarios del autor en tu blog

Este es un truco tan sencillo como maravilloso ya que nos permite destacar los comentarios que escribimos como autores de nuestro blog entre los distintos comentarios de los lectores.

Guardamos nuestra plantilla actual como siempre antes de modificar nada. Entramos en edicion html y expandimos los artilugios. Una vez hecho esto buscamos la parte de codigo que hace referencia a los comentarios y añadimos el código en azul.


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<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>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>



Una vez añadido este codigo, tendremos que poner el estilo que queremos que tenga nuestro comentario asique buscamos la parte css de nuestra plantilla (justo encima de ]]></b:) y añadimos lo siguiente:


blog-author-comment {
margin:.25em 0 0;
}

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}


Con estos sencillos pasos haremos que nuestro comentario destaque sobre los demas, cosa que vendra muy bien a nuestros visitantes a la hora de resolver sus dudas y nos encuentren facilmente.

Para personalizar el estilo del comentario a vuestro gusto lo podréis hacer cambiando los valores de estas lineas:


border:1px dotted #254117;
background:#C3FDB8;

Espero que no os sea muy complicado y que os dirva de ayuda, aqui os dejo un ejemplo con mi comentario personalizado: