Personalizar nuestros comentarios

El pasado 17/04/09 recibí un comentario de Zorra que decía así:

"Hola Sisco: Quisiera saber como puedo lograr que en mi blog mis comentarios aparezcan como los tuyos aquí, es decir de diferente color y la firma sobre el lado derecho? Gracias y besos!"

Ante todo disculpa mi tardanza y ahora nos ponemos manos a la obra:

Las instrucciones que os daré son para la plantilla Mínima y estan extraidas del blog de Rosa. Las explicaré en tres pasos.

1er. Paso: Configurar formulario de comentarios.

Una vez configurado el formulario para ser mostrado como una entrada incrustada a continuación, haremos lo siguiente:

2º Paso: Mostrar los comentarios del autor resaltados.
Accedemos a nuestra plantilla - Edición de HTML - Expandir plantillas de artilugios y buscaremos el código que corresponde al bloque de comentarios y añadiremos el código resaltado en rojo:

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

Seguiremos en nuestra edición de la plantilla y buscaremos:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Una vez localizado el código anterior, a continuació le añadiremos lo que os resalto en rojo:

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

Gracias a estas últimas líneas podemos personalizarlo a nuestro gusto, color fondo, grosor y color del borde.

3er. Paso: Colocar una firma en cualquier de los lados del comentario.

Una firma similar a la que yo muestro en mis comentarios la obtendréis en My Live Signature.

Si ahora queremos colocar una imagen que sirva como firma de nuestros propios comentarios, y para ello buscaremos esta parte del código anterior y añadiremos lo que os muestro en rojo:

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

Ya solo nos queda añadir antes de ]]></b:skin> este otro código:

 .firma {
display:block;
width: 58px;
height: 32px;
padding-left: 90%;
}

Mediante estas otras líneas podéis controlar el ancho (width) y alto (heigth) de nuestra imagen, en padding-left: 90%; la posición de la misma, el valor left podéis variarlo por rigth o center.

Espero sea de vuestra utilidad y recordad que ante la duda, un buen consejo es hacer siempre una cópia de vuestra plantilla.