Comentarios del autor del blog con color diferente

A menudo me preguntan cómo modificar el aspecto de los comentarios para conseguir que los del autor del blog tengan un color de fondo diferente, un borde, un color de texto distinto... Cualquier cosa que los haga destacar de los demás.

Conseguir esto es muy fácil ya que tan solo tendrás que añadir unas líneas en el código de la plantilla y algo de CSS para darle la apariencia deseada.

En la siguiente imagen puede comprobarse el resultado:

Diseño>Edición de HTML>expandimos artilugios

Busca en tu plantilla el siguiente código y añade lo que he resaltado en color rojo.

Este si la plantilla pertenece a las nuevas que ofrece blogger en su Diseñador:

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

<b:if cond='data:comment.author == data:post.author'>
<div id='ComenblJTEAutor'>
<p><data:comment.body/></p>
</div>
<b:else/>

<dd class='comment-body' 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/>
</p>
</b:if>
</dd>

</b:if>

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

Este si la plantilla es antigua o no pertenece a lo descrito en el paso anterior:

<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'>
<div id='ComenblJTEAutor'>
<p><data:comment.body/></p>
</div>
<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>

Seguidamente, localiza la etiqueta ]]></b:skin> y justo antes añade estos bloques de CSS:

#ComenblJTEAutor {margin: 5px 0 0;}

#ComenblJTEAutor p {
background: #C2E4F1;
border: 1px solid #3399BB;
margin: 0 0 10px;
padding: 6px 10px;
}

Si no modificas el código y guardas la plantilla aplicarás a tus comentarios el diseño del que aparece en la imagen de ejemplo, al principio del tutorial.

Para cambiar su aspecto, atiende a lo siguiente.

La línea background: #C2E4F1; indica el color de fondo. Haz uso de la tabla de colores para obtener el código de tu color favorito (y reemplazar el anterior: #C2E4F1).

Puedes hacer uso de una imagen de fondo. Para ello, utiliza esta otra línea en lugar de background: #C2E4F1;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRkgsytSFNJOLQRLbSAvGs0-pY-6m8ubkRygU2E_9Wcm2iS2WAAnpTzXXpDbk1KOUAR3Z6F_7ZN8_leno1WTpQJld_3JQWflb4ZMFfasQ4LEDfSTJt815Mji78R0BHdN-g_i6ewN6if6Wm/") no-repeat scroll 0 -42px transparent;

El resultado:


Reemplaza la línea verde por la dirección de tu imagen si prefieres no utilizar la que ves en el ejemplo.

border: 1px solid #3399BB; Incluye un marco de 1 píxel de grosor, de estilo sólido (ver estilos de borde) y de color azul (la tabla de colores te permitirá, una vez más, personalizarlo).

En la línea margin: 0 0 10px;, el 10 representa el margen inferior. Aumenta o disminuye la cifra para cambiar la distancia.

padding: 6px 10px; Sirve para incluir un espacio entre el marco y el contenido. La cifra 6 representa el espacio entre el borde superior y el inferior mientras que el 10 marcará la distancia entre el texto y el borde izquierdo o derecho.

Guarda la plantilla una vez hayas terminado.