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.
El código final con todas nuestras modificaciones seria este:
Para crearlo haremos lo siguiente: 
