Comentarios en el pie del post con imagen : El Escaparate de Rosa

Me pregunta Cristian a través del tagboard como podría hacer para que la palabra "comentarios" en el pie de las entradas, se viera dentro de una imagen, un bocadillo de texto era lo que Cristian ponía como ejemplo.

Para conseguir dicho efecto, he "tirado" una vez más del CSS, y es que mediante CSS se puede conseguir casi cualquier cosa en el blog. :-)

En primer lugar he tenido que hacer la imagen del bocadillo para que coincidiera con el tamaño del "x comentarios", y lo he hecho con el Paint, le he puesto el fondo blanco ya que es el color de fondo de mi blog y así el fondo de la imagen se confundirá con el fondo del blog y mostrará solo el bocadillo.

En el CSS de la plantilla hemos de localizar esta parte:

.comment-link {

Y justo a continuación, añadimos esto:

background-image: url("Url de nuestra imagen");
background-repeat: no-repeat;
border:none;
padding:6px;

}

He puesto en padding el valor 6, pero este valor habrá que variarlo en función de la imagen que coloquemos como fondo de "X comentarios".
Para mi bocadillo el 6 está bien, y esta es la dirección del bocadillo de texto por si queréis usarlo:

http://img526.imageshack.us/img526/6429/feedcontadormm5.gif

El resultado:

Con el mismo añadido a vuestra plantilla se puede poner cualquier otra imagen, eso si, habéis de procurar que no sea muy grande, la imagen del bocadillo para que os hagáis una idea mide 102 x 31.

22 comentarios:

Victor: Hola Rosa, urgentemente revisa tu correo por que te mandé mi problema, gracias.; 11/5/07
Victor: Hola de nuevo creo que ya no hay problema por que no se que hice y ya la pude poner en su lugar, gracias de todos modos.

:); 11/5/07
Anónimo: Bien! Eso era lo que buscaba, voy a ver si lo puedo hacer en el blog. Gracias totales; 12/5/07
onix: Muchisimas gracias por tu inestimable ayuda , tus explicaciones son tan claras que a la primera me salio perfecto muchisimas gracias!!!!!; 13/5/07
Anónimo: Hola onix, he visto la estrellita...jeje, y las chicas en acción..; 13/5/07
DyDy: Hola, gracias por toda tu ayuda me ha sido muy útil en mi blog y también he aprendido muchas mas cositas gracias a lo que aquí he podido leer,les quiero compartir el código que puse yo en mi blog para añadirle la imagen al comentario siguiendo tus instrucciones:

background-image: url("http://i160.photobucket.com/albums/t162/hotlyts24/commentbuttons/3.png");
background-repeat: no-repeat;
border:none;
padding:22px;; 14/7/07
Anónimo: Hola disculpa que te moleste pero sabes he puesto una imagen para los comentarios y bueno quiero borrar la palabra que dice "comentarios" pues afea mi imagen-botón que considero está muy bonito..espero que me ayudes a saber que código borrar para que no muestre esa palabra tan molesta "comentarios". espero me ayudes. Mi blog para que veas de que hablo es EL MEJOR SABOR; 21/11/07
Anónimo: Walter, esa imagen que has puesto es apropiada para la página de etiquetas , donde veo que también la pusiste, pero no para la principal. Si retiras el "comentarios" no se marcará el número de comentarios recibidos y entonces si que quedará mal...; 21/11/07
Smanobeto: Hola Rosa, primero que nada decirte que me gusta la nueva imagen aunque las "lineas"(top-bottom)de la sidebar no me convencen(beuno de hecho ni el diseño de mi blog nada me convence jeje).Okey la Pregunta¿Puedo colocar el "Publicar un comentario en la entrada"pero, pero dentro del post, algo como esto: "Haz click para hacer tu comentario" he probado con todos los comment-link que he visto pero no se si es que no funcionan dentro del post o falta codigo ya que me envia a una pagina en blanco. Disculpa la molestia pero te agradeceria la ayuda.; 29/2/08
Anónimo: Silvestre no se a que te refieres exactamente con "dentro del post"...; 29/2/08
Smanobeto: El link "publicar un comentario en la entrada" que este ubicado tambien dentro del articulo o entrada.
TITULO
..
cuerpo de la entrada
...
Haz tu comentario(aca el link)
...
Fin de la entrada.
Es para que el usuario vaya directamente a la cajita de "Haga su comentario".; 1/3/08
Anónimo: Silvestre, eso no es posible, no podemos incluir el código para los comentarios dentro del código para el cuerpo de entradas, no sería correcto y la plantilla daría error al guardar.; 1/3/08
Smanobeto: Lástima..Gracias Rosa!; 3/3/08
Sergio Gil: Hola Rosa

No se que pasó pero no me funciono !

Este fue el codigo que añadi

background-image: url(http://img185.imageshack.us/img185/7792/feedcontadormm5ahg9.png);
background-repeat: no-repeat;
border:none;
padding:6px;

}

y quedo asi:

a.comment-link {
background-image: url(http://img185.imageshack.us/img185/7792/feedcontadormm5ahg9.png);
background-repeat: no-repeat;
border:none;
padding:6px;

}
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/transparent; no-repeat $startSide 45%;
padding-$startSide:14px;
}

Pero lamentablemente no me funciono.

Sera que hice algo mal ?

tu imagen del bocadillo la edite, le cambie el color y la guarde en imagesack como PNG con fondo transparente

Bueno si de pronto me puedes dar una pista esta sera bienvenida.

Slds,

Sergio Gil
www.migranfamilia.org; 15/8/08
Anónimo: Sergio Gil, si has visto la respuesta que te dejé en el otro comentario sobre como aumentar el color y tamaño de ese enlace, verás que el bocadillo has de colocarlo en el nuevo código:
.comment-link {
font-size:130%;
}; 15/8/08
Anónimo: Rosa: puse la imagen pero parte quedaba arriba de la leyenda para comentar. Leyendo la contestación que le diste a Sergio Gil me di cuenta que podía aumentar el tamaño de la fuente así que quité la imagen que no me convencía demasiado. Pero ahora hay una letra o símbolo que no puedo quitar y que varía según el tamaño que elija de fuente. Podrías fijarte qué es lo que está mal en el código?
Gracias y saludos!; 25/8/08
Anónimo: Graciela, ayudándote de este truco para encontrar código pega esto para buscarlo:
Ĭ¿Algo para opinar? Clic aquí para comentar.
Y una vez localizado borra el simbolito ese que no me explico de donde ha salido ...:-X; 26/8/08
Anónimo: Me había cansado de eliminarlo ayer y siempre aparecía. Hoy parece que le gané por cansancio jaja. Supongo que tiene que ver con que puse primero la imagen, estuve tratando de ubicarla para que no quede arriba del texto, después la quité, agrandé el texto de la leyenda, quité parte de la leyenda y al final apareció ese símbolo que por nada quería irse.
A pesar de que de 191 le pongo 300, la leyenda no se agranda tanto como cabría de esperar. Está bien lo que hago o tengo que hacer otra cosa para que ese texto se vea más grande?
Saludos y gracias Rosa!; 26/8/08
Anónimo: Graciela Ventimiglia, es que no me dices donde pones el 300 ni como...así que no puedo comprobar si está correcto o no...; 27/8/08
Anónimo: Ah disculpame, es que ese número estaba antes del simbolito que quería quitar. Pensé que lo habías visto y también pensé que era el porcentaje correspondiente al tamaño de la leyenda.
Ahora lo busco y ya no está más. Reformulo la pregunta: ¿cómo hago para agrandar la leyenda Clic aquí para comentar?
Gracias Rosa por tu ayuda y por aguantarme jeje.; 27/8/08
Anónimo: Graciela Ventimiglia, pues busca lo que digo en la entrada:

.comment-link {

Si no está, lo añades tu misma antes de ]]></b:skin> de esta manera:

.comment-link {
font-size:140%;}

Ahi disminuyes o aumentas el porcentaje para agrandar o disminuir el texto del enlace de comentarios, o sea, el "Clic aquí para comentar"; 28/8/08
Anónimo: comment-link estaba, pero font size no, así que lo agregué y ahora se ve bien grande.
Gracias mil Rosa!!!!!!; 28/8/08

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.