Distinguir comentarios del administrador del blog (cambiando firma y color)

En un blog en donde el autor debe participar en los comentarios ya sea para responder preguntas y dudas o para dejar su opinión sobre otro comentario, queda muy bien distinguir los comentarios del administrador con otros colores de fondo o cosas similares. La verdad este truco queda muy bien en todos los blogs. Pueden ver un ejemplo en mi blog.
[1] Vamos a Diseño > Edición de HTML y vamos a expandir los artilugios, luego buscaremos unas lineas como las de a continuación y agregaremos lo que aparece en negrita:

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

[2] Guardamos por seguridad y ahora ya podremos agregar las lineas de css, para eso agregamos lo siguiente antes de ]]</b:skin>:

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

Recuerden que pueden hacerle modificaciones en el css editando lo que está entre { y }.
[3] Luego de esto podremos agregar una firma para los comentarios del administrador... Solo debemos modificar esta parte del código agregado anteriormente, agregando lo que está en negrita:

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

Donde dice imagen.png debemos pegar la url de nuestra imagen. Por ejemplo, esta es la firma que yo diseñé:

[4] Ahora unas lineas de css para la imagen de nuestra firma. Recuerden que deben pegar el siguiente código antes de ]]</b:skin>:

.firma {
display:block;
width: 45px; /* el ancho de tu imagen */
height: 28px; /* la altura de tu imagen */
padding-left: 90%; /* la ubicación de la imagen */
}

Espero que les haya gustado esta entrada y que les sirva de algo. Un saludo


(les recomiendo esta pagina apra hacer las firmas: http://www.mylivesignature.com/)


Fuente: http://www.todoblogger.com/page/121