Imágenes en los comentarios (1) : Firma Controlada.

Compartir

Como lo prometido es deuda, vamos a comenzar por desgranar algunos de los trucos que hemos utilizado en la programación de los blogs que hemos diseñado en los últimos meses.

El primer truco que nos gustaría explicar es aquel que nos permite "firmar" los comentarios de los administradores del blog. Este truco lo puedes ver tanto en El Diario de Adán como en Blogs con EÑE o en este mismo blog.

Lo denominamos "Firma controlada" porque podemos elegir si queremos mostrarla o no en cada uno de los comentarios. Si la insertáramos directamente en el HTML de nuestra plantilla aparecería siempre al final de cada comentario del administrador.

Los pasos a seguir son muy sencillos:

(1)Diferenciar los comentarios del Administrador:

Para poner en marcha este truco, primero debemos diferenciar los comentarios del administrador de los del resto de usuarios del blog.

Accedemos a la edición HTML de nuestra plantilla y, con los artilugios expandidos buscamos la parte del código que corresponde a los comentarios y añadimos lo que está 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 == "ADMINISTRADOR"'>
<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>

Donde dice ADMINISTRADOR tienes que poner exactamente el nombre que aparece cuando haces un comentario en Blogger. En nuestro caso es "BanakaBanaka!!".

Simplemente con este paso y un poco de CSS, ya puedes diferenciar los comentarios del autor en cuanto a colores y fondo, pero de eso ya se ha encargado excelentemente Rosa en una entrada de su Escaparate

(2)Códigos admitidos en comentarios:

Es sabido por todos que Blogger permite la inclusión de ciertos códigos o etiquetas html en sus comentarios.

Las más habituales y usadas son:

<a></a>(enlaces) <b></b>(negrita) y <i></i>(cursiva)

Sin embargo, hay otras, menos usadas, que también podemos utilizar:

<strong></strong>(negrita) <em></em> (texto enfatizado)

Para la realización de este sencillo truco vamos a utilizar la etiqueta <em></em>, por ser de las menos utilizadas (el efecto es igual que <i></i>) aunque también podríamos utilizar la etiqueta <strong></strong>.

(3)Preparando la firma:

Lo primero que tenemos que hacer es preparar la imagen con que vamos a firmar. Ésta puede estar en cualquier formato, y es preferible que no sea excesivamente grande, de unos 45 ó 50 píxeles de alto como máximo.

A continuación, volveremos a la parte de edición de nuestra plantilla, y nos situamos en la zona de CSS.
Justo antes de ]]></b:skin> pegamos lo siguiente:

.blog-author-comment em {
background: url(http://URL DE TU IMAGEN DE FIRMA) no-repeat top;
display:block;
height: 50px;
width: 100px;
padding-left:100px;
}

En rojo tienes señalados los lugares donde debes poner la URL de tu imagen y las medidas de la misma. Modificando el valor de padding-left podemos situarla en cuanto al borde izquierdo de los comentarios. Si queremos que la firma se situe independientemente de eso, a izquierda o derecha de los comentarios y bajo ellos, el código es el siguiente:

.blog-author-comment em {
background: url(http://URL DE TU IMAGEN DE FIRMA) no-repeat top;
display:block;
height: 50px;
width: 100px;
float:right;
}

Donde deberás sustituir "float:right" por "float:left" si quieres que la firma salga a la derecha o a la izquierda respectivamente.

(4)Firmando.

Tan simple como poner la etiqueta <em></em> al final de los comentarios.

Un comentario de un administrador antes de ser enviado quedaría de la siguiente manera:




Y el resultado es que al publicarse el comentario del administrador, la etiqueta se sustituye por la imagen de nuestra firma.

Si por cualquier razón no deseas que la firma salga, simplemente no pongas la etiqueta.

El mejor ejemplo, el primero de los comentarios a esta entrada.

Así de fácil!!

En sucesivas entradas veremos alguna variación y puntualización más sobre este truco.