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

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.

Subir || Bajar

43 opiniones:

@

Hola a Tod@s y bienvenid@s, este es un ejemplo de cómo se debe colocar la etiqueta para firmar los comentarios del administrador.

Saludos,

@

Incluso podemos escribir culaquier texto y firmar:


Y luego seguir escribiendo.

TwitterBoy :

Excelente como siempre,Iván muy bien explicado y muy sencillo de implementar.

Saludos.
@twittBoy

Gem@ :

Está muy bien Iván eso es lo que yo hice con ese icono que ves al comienzo de cada comentario, sólo que no hice uso del css ;)

@

Chelo y TwitterBoy muchas gracias por su comentario y visita.
TwitterBoy te lo acabo de poner en tu blog... tardando estás en ir a probarlo.

Gem@ es un honor contar con un comentario tuyo en mi blog, muchas gracias!!

Un beso,

@

Gem@ lo olvidaba, lo del CSS verás que tiene su razón de ser en la continuación de esta entrada.

veinteañera :

Genial el truco!!! voy a ver que tal queda en mi blog!

Un besito

Pd: el diseño de vuestros blogs es alucinante, me sigo quedando con la boca abierta

@

veinteañera el diseño de tu blog también está muy bien, y por lo que sé es todito tuyo, verdad? Tu también te lo curras eh!

Gracias por tu visita!!

Rosa :

Saludos!

Por fin encontré un ratillo para pasarme...y como imaginaba mi "fisgoteo" al código fuente era correcto, así que la entrada número 2 al respecto no me pillará por sorpresa...

¡Genial el truquillo!

@

Jejejeje!! Hoy es un día de sorpresas, primero Gem@, luego Pizcos con "Blogs con EÑE" y ahora tu, Rosa que te pasas a dejar un comentario...
Tengo una sonrisa que me da la vuelta a la cara!!
Sí, con lo que te gusta a ti trastear con el CSS me imagino que ya sabrás por dónde irán los tiros...jejejeje!!
Gracias por tu comentario
Un beso

veinteañera :

Jajajaja chicos ya sois toda una revolución en el mundillo este de los blogs -ya he visto la entrada en el blog de Pizcos y últimamente os veo por todos los lados, lo que me alegra^^-

Me alegra mucho porque vuestra idea de blogs con eñe es "revolucionaria" y sin duda los diseños de vuestros blogs aparte de resaltar un gran contenido no dejan indiferentes.

Un beso Iván.

P.d.: jajaja mi mínima esta muy customizada, pero a parches y trompicones jajaja, espero aprender de vosotros :)

@

jejeje!! veinteañera tu mínima-special está muy muy bien, muy ligera y agradable visualmente, de parches y trompicones nada... No te hagas de menos, oye!!

Tú sigue probando y arriesgándote a hacer cosas nuevas, guarda siempre una "copia segura" de tu plantilla y no tengas nunca miedo a meter la pata, el "Control-Z" tiene que echar humo en tu equipo, es lo normal...

Y vuelve por aquí en poco tiempo, que le pondremos un poco de gracia a esto de las firmas!!

Fabiana :

Está buenísimo el truco, cuanto tenga un tiempito pongo manos a la obra. Pasa por mi blog, tengo algo para tí.
PD: Acabo de descubrir que era seguidora anónima, grrrr.

Σ=o) Pau :

Me encanta el truco de la firma :) y al ser con css no pesa mmm... buscaremos un gatito adoc jejeje :D si hay algo que me gusta es trastear mi blog, mi plantilla pasó de ser minima a minina :D
Y cuando veo los trucos en sus blog alucinó porque sin miedo a trastear puedes tener la casa que deseas sea simple o yan compleja e impresionante como la de ustedes.

Besos ronroneados en mi abrazo :)

@

Hola Pau, qué tal, gatita?

Muchas gracias por tu visita. Ya hemos visto que has estado trasteando también por la web. Gracias por tus comentarios, estamos muy contentos.
A ver si "robo" algo de tiempo al curro en el taller y continúo con la siguiente entrada.

Un saludo y muchos marramiaus!!

atajar :

ya pude ponerlo buenisimo a ver si lo extreno en cuanto me dejen comentarios un abrazo

Bonzu Pipinpadaloxicopolis III :

¿No se puede cambiar por otro texto que no sea la etiqueta <em></em>?

@

Hola Bonzu y gracias por tu comentario.

Puedes utilizar las etiquetas <i></i>, <b></b>, <em></em> o <strong></strong>. Tan sólo tienes que cambiarlo en:
.blog-author-comment em

Eso sí, tanto <b></b>, <em></em> como <strong></strong> van a darte un resultado similar resaltando la tipografía al escribir tus comentarios, por eso utilizo el <em></em>, porque en mi caso es el que nunca usaba.

Avatar ya lo he visto, muy bien, eh!!

Saludos.

@

Atajar, quería decir Atajar
jejejeje!!

Dédalus :

Vi vuestra página con Lilí, en BCN, y guardo una de las P en plata que os encargó, para celebrar los cincuenta de Pere. Os portasteis estupendamente y está más que agradecida.
Yo también te agradezco, Iván, que hayas pasado por mi página. Cerré los comentarios, porque no daba abasto. Ahora voy más tranquilo...

Un abrazo.

@

Dédalus un placer tenerte por estos lares. Me alegro que también tengas un "Punt de Llibre". Gracias por tu comentario. Tu blog es adictivo, lo sabías? Felicidades.

Trecarunga creo que ya lo has descubierto gracias a @TwittBoy, pero lo explico para todos:
Tan sólo tienes que utilizar las demás etiquetas de texto,es decir:
-<em></em> para una firma
-<strong></strong> para otra
-lt;i></i> para otra más
-<b></b> si aún necesitas más

Lo único a tener en cuenta es que ya no puedes utilizar esas etiquetas para resaltar texto, ya que te saldría la imagen de la firma.

Pero lo mejor , un ejemplo práctico; en los comentarios de esta entrada de Blogs con EÑE se ven las tres firmas distintas. Ahí "ocupé" las etiquetas <em>, <strong> e <i>.

Espero haberte aclarado algo,
saludos!!

TRECARUNGA :

Si, @TwittBoy me lo aclaró pero gracias de tyodos modos Ivan!! ;)

Global Metion Blog :

Ivan una pregunta cual código puede hacer que el fondo de los comentarios no sea colores es decir sea con imágenes como en este ejemplo http://www.farandulista.com/2009/04/02/scarlett-johansson-para-moet-chandon/#comment-71920
mira los comentarios yo ya tengo las imgenes solo me falta el código, por cierto ese fondo son 3 imagenes la de arriba la de abajo y la de al lado

justo así lo quiero
Repito ya tengo las imágenes sólo quiero el código para ponerlo

@

Global Metion Blog para la imagen de fondo tienes que incluirla en el CSS de los comentarios, en:
background: url(http://URL_DE_TU_IMAGEN) repeat top;

Y para la imagen superior y la inferior, crear dos nuevas etiquetas con IDs diferenciadas y asignarles un background a cada una.

Siento no poder atenderte un poco mejor, pero con el vieja y la exposición a las puertas, tengo muchos menos tiempo!!

De todas maneras, en Pizcos Blog tienes un completo tutorial en tres entradas para hacer algo similar pero sólo con CSS (mejor, cargará más rápido):
Estilizar comentarios
Estilizar comentarios 2
Estilizar comentarios 3

Saludos!!

Jorge (el_manchego) :

Muy bueno el truco, lo acabo de implementar. :)

- Sabes que me quede sorprendido el día que vi el Diario de Adán. Me dejaste (o Adán me dejo) y sabia ni que onda.

Pero bueno, déjame felicitarte por este blog de BanakaBanaka!!

Un saludo

@

Hola Jorge /el_manchego) y muchas gracias por tu comentario.
Me alegro que te gustase El Diario de Adán. Nuestro es sólo el diseño y la programación... de ponernos los pelos de Punta se encarga sólo Adán.

Saludos,

Jorge R. :

Hola Ivan: Si, me parecio muy bueno el diseño del diario. Y tambien gracias por tu comentario en mi blog... igual yo ya tengo mucho sin pasar estas fechas de Semana Santa en m pueblo.

Un saludos.

*Disculpa la falta de acentos comento desde una computadora sin acentos.

Mujer Pez :

Yo no se , como hacerlo, no me salen estas etiquetas en mi plantilla

@

Hola, Mujer Pez, no sé, la verdad es que yo tampoco lo veo en tu plantilla en la página de inicio, aunque sí en las individuales; debes de ser algo de la configuración del blog.

Jorge perdona por no haberte contestado antes. Precioso el último vídeo de tu blog.

Saludos!!

Sidhe and Darky Dragonseeker :

Hola Iván!
Muchas gracias por el excelente dato... somos dos admins y esto no sirve para diferenciarnos con más estilo xD

Saludos,
•• Sidhe

@

jejeje, de nada, Sidhe, para eso está pensado precisamente.

Además, me acabas de recordar que esta entrada tiene una segunda parte que aún no he publicado...

Ya he estado por tu blog, muy bien montado y bonito diseño.

Un saludo!!

Sidhe and Darky Dragonseeker :

Pues estaré esperando esa entrada para ver que otros truquillos tiene!!

Mira tú que bien ^^ muchas gracias, me alegro que te haya gustado. Ni a años luz con el tuyo... pero bueno, se hace lo que se puede!!!

•• Sidhe

José Pinto :

Amigo Iván, gracias por ésta entrada,realmente
muy interesante. He seguído el tutorial al pie
de la letra pero no he conseguído que aparezca
la firma al pie de los comentarios. Agradeceri
a tu ayuda al respecto. Mi e-mail:
mitesterlab@gmail.com

@

Hola Jose Pinto, no he encontrado el código de los comentarios en la plantilla de tu blog... al ser una plantilla prediseñada, puede que sea y funcione de otra manera.

Vuelve a colocar el código y asegúrate de copiarlo todo bien porque debería funcionar.

Por cierto, en el css de las barras de desplazamiento, te falta una "/" justo al inicio del código que copiaste, en la parte comentada, por eso no te aparece la barra superior.

Un saludo!!

Ascesino96 :

hola ivan, preciso tu ayuda!!!
como hago pa' que el gadget mio de últimos comentarios funcione, dame el codigo que utilizas en el tuyo y ahi lo copio en el mio plisss, bueno, gracias, chau!!

@

Ya te entiendo, Ascensino96, el código que yo utilizo es exactamente éste que explica Rosa en el Escaparate, tan sólo he cambiado las imágenes y el tipo de letra, por lo demás, lo puse exactamente como ella dice.

Inténtalo y si tienes problemas, envíame tu email mediante el formulario de contacto.

Emaleth :

Hola Iván, verás hay algo que no acabo de entender, he colocado el codigo tal y como explicas, una vez echo, fuí a dejar un comentario, y resulta que no sale la diferencia...

El caso, es que si no te importa, pases por mi blog: mastvtv.blogspot.com y me digas si hay algo mal echo...

Un saludo

@

Hola Emaleth y gracias por tu comentario.
He pasado por tu blog y resulta que no veo ninguno de los códigos que deberías tener para que se mostrasen las firmas.

Ponlos y avísame si quieres que le eche un vistazo.

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)