Partimos de la base de que las imágenes se suben mediante el editor de entradas y luego se pincha en ellas para añadir una leyenda (habilitado sólo desde la pestaña Redactar). Si lo hacéis así, en principio se obtiene algo como esto.
 |
| Un bicho |
Pues bien, el truco consiste en aprovechar que a la celda correspondiente al texto del pie, Blogger siempre le asigna automáticamente una clase determinada. Esta es tr-caption.
Sabiendo esto, sólo tenemos que incorporarla a nuestro CSS y asignarle las propiedades que queramos:
.tr-caption { font-family: Arial, Helvetica; font-weight: bold; color: red; }
|
| Un bicho grande |
Hemos escogido una fuente muy escandalosa adrede para que veáis la diferencia, pero ahí podéis poner a vuestro gusto itálica, negrita, cambiar el color, el tamaño y por supuesto la tipografía. En algunos casos incluso podría ser interesante usar una tipografía del tipo de las que imitan la escritura manual. Supongo que eso estaría bien para fotografías de viajes comentadas mediante este sistema y cosas similares.
Y para redondear recordamos también el posible uso de esta otra clase que corresponde a la tabla completa de imagen+leyenda y que nos permitía realzar el conjunto: tr-caption-container.
table.tr-caption-container { padding: 10px; background: #ffffff; box-shadow: 1px 1px 5px #000000; }
td.tr-caption { font-family: Courier, "Courier New", monospace; }
td.tr-caption { font-family: Courier, "Courier New", monospace; }
|
| Un bicho grande y colorao |
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola, muy bueno el post, ¿se podría hacer algo similar el el gadget "Imagen" de blogger, en el pié de foto?
ResponderEliminarSaludos
Me acabo de dar cuenta de que mi respuesta no apareció, por lo que me toca rehacerla.
EliminarIntenté decirte que sí, pero que la clase que tendrías que usar sería la de .Image. Esto afectaría a todas las imágenes que incluyas en el blog mediante el gadget Imagen. Si lo que quieres es modificar sólo algunas de ellas, entonces tendrías que localizar su id que sería #ImageX. Por ejemplo:
#Image2, Image4, Image5 {border: 1px solid #000000;}
Es muy sencillo como deces Oloman, pero se ve chulo y además hay muchas personas que no tienen ni idea de cómo hacer estos cambios, así que es muy útil oportuno ;)
ResponderEliminarBuen finde...
Con el tiempo que llevo haciendo esto hay cosas fáciles que nunca he explicado y sobre las que siempre se me olvida hablar, pero es algo a lo que de vez en cuando pongo remedio ;)
EliminarComo siempre, muchas gracias Oloman.
ResponderEliminarSaludos
Y cómo siempre... No hay de qué Gildo ;)
EliminarTal como dices, es muy útil para blogs de viajes. Gracias por resolver siempre nuestras dudas ;)
ResponderEliminarFelipe, te saqué en el post de hoy (25-Ene). ¿Lo viste? ;)
EliminarLo acabo de ver. Siempre es un honor ser citado en la biblia del blogging :D
EliminarHola Ooman, llevo tiempo intentando poner un marco a mis fotos en el blog pero todo lo que encuentro es para modificar el HTML en la plantilla y no me atrevo a meterme con cosas complicadas... Ya he tenido alguna que otra mala experiencia.. He visto como has enmarcado la ultima foto con el tema de de la leyenda pero, o soy muy torpe o no sé como lo has hecho.. Tengo algunas preguntas y espero que me leas y me ayudes, ¿ Ese código que das sirve para lo que yo quiero??? Y si sirve supuestamente ¿donde tengo que poner el código ultimo que das??. Porque soy bastante torpe en esto y no entiendo donde debo pegar ese código. En redactar no, desde luego, entonces es el HTML del editor de entradas o donde... XD, ten paciencia conmigo, jajajaja... Gracias y espero que me digas todo bien masticadito¡¡¡... Saludos¡¡...
ResponderEliminarEl último código servirá para obtener el resultado que ves, sólo en fotografías incorporadas en las entradas y a las que además incluyas leyenda.
EliminarSólo tienes que editar la plantilla (edición HTML), buscar una etiqueta skin de apertura y otra de cierre. Entre ambas es dónde va en Blogger el estilo (CSS). Justo antes de la etiqueta de cierre es dónde tienes que añadir ese código que viste aquí.
Una vez grabados los cambios, todas las imágenes con esas características que dije al principio te aparecerán con ese marco. Si no tienes sistema de sumarios puedes incluso hacer Vista Previa para comprobarlo antes de grabar.
Creo que también te vendrá bien ver este enlace... ;)
Muchas gracias por contestar Oloman, aunque ya te digo que cuanto mas me meto en esto menos sé... Por lo que deduzco de la única manera que puedo ponerle un borde a mis fotos es modificando la plantilla de HTML y ya te digo que no me atrevo por ciertos problemillas que tuve al principio de empezar con mi blog. Te pongo la dirección por si te quisieras pasar y ver las cosas que he ido poniendo: http://soandoconperros.blogspot.com.es/ El caso es que ya me niego a modificar la plantilla y he intentado subsistir a base de gadgets y similares, aunque soy consciente que hay cosas que no se pueden poner sin meterte en el HTML de la plantilla. Para ti será muy fácil... para mi se me hace un mundo¡¡¡. Aunque ya te digo que algunas cosas si las he ido haciendo, pero al principio que era más valiente... Ahora me da miedo jorobar algo y quedarme sin el blog... Asi que mi pregunta es si hay algun forma de poner aunque sea un recuadro a cada foto sin hacer tanto lio... Tipo gadget o similar... Gracias y perdona si me extiendo mucho¡¡. Saludos
EliminarSólo sé una manera y es incorporar el estilo en cada post que publiques, pero eso es un auténtico engorro.
EliminarVamos a ver... Cuando modificas la plantilla NUNCA puedes perder tus entradas o sea, lo principal, el contenido del blog. A lo sumo su estética, que sería como el continente. Además, siempre puedes reinstalar la plantilla y que la estética sea la del principio (antes de modificaciones).
Añadir además que existe la posibilidad de guardar copia de seguridad de ambos (entradas y plantilla) por separado. La primera no te va a hacer falta en la vida (99% de probabilidad), pero la segunda es más que recomendable precisamente para no arriesgar nuestro diseño, repito DISEÑO, cuando hacemos cambios en la plantilla.
Otra lectura recomendada: Cambiar la plantilla ¿quién dijo miedo?
Seguro que puedes hacerlo tú misma, pero como acabo de abrir la "tienda", sólo añadir que por un pequeño coste lo puedo hacer yo (ver banner arriba derecha).
Ok Oloman tendré en cuenta tu propuesta... ;) En cualquier caso si me decido a hacerlo yo, creo que he visto en tu blog como poner recuadros a las fotos, eso sí claro modificando la plantilla.. jeje.. Bueno, ya te digo que al principio lo hice, ahora quizás me he vuelto mas cómoda y tampoco me gustaría recargar demasiado el blog, que no sé si has entrado, es más visual que otra cosa.. En realidad lo uso más como web que como blog para vender las cosas que hago y la estética es indispensable para mí.. Bueno, no te quiero aburrir, te agradezco muchisimo tu paciencia y si me decido a contratar tus servicios me pondré en contacto contigo¡¡... Eres super majo Oloman¡¡¡.. Saludos¡¡¡
EliminarEstá fenomenal, pero el "contenedor" de la leyenda es demasiado grande para mi gusto, sobre todo porque ya subo las imágenes con marco, se podría hacer más pequeño? Gracias
ResponderEliminarYo pienso que ya es bastante pequeño, así que no imagino cómo lo estás haciendo Adra ¿Me pasas una entrada dónde lo tengas que lo vea?
EliminarGracias por responder :) Igual no me expliqué bien, mi blog es de fotos y las subo desde el editor de picasa. Antes de subirlas le pongo un marco de ese mismo editor que se llama "desviar sombra" porque me encantaba el efecto que resultaba en la primera plantilla que tuve, que era la simple. Luego cambié a la travel (que la he requetetoqueteado tantísimo que vuelve a parecer la simple,jajaja) y ahí ya no era lo mismo... Intentando recuperar aquel efecto es que llegué a este post, y a este otro y al final no sé como he usado cosas de los dos, y el resultado no me disgusta del todo. Si subo las fotos sin el marco quedan así y las que ya lo tenían, que no me apetece ponerme a quitárselo a todas porque son unas setenta, quedan así Eso es lo que yo decía que era, que es demasiado grande.
EliminarHe probado ajustando los paramétros y también a quitarles el marco on-line en google plus a las fotografías, pero ¡Oh! a muchas no puedo quitárselo porque en su momento las edité con el editor de google plus y ahora resulta que son intocables desde que el pinche editor que me de funcionar sin más de un día para otro, cuando intento a acceder me dice que no funciona el editor con mi versión de windows (uso vista) y en la ayuda de google dicen que actualice navegador, tarjeta gráfica y SO, lo tengo todo actualizadísimo, pero nada.
Ay, Dios, siento muchísmo el rollazo que te he metido. Muchas gracias por tu tiempo, por ser tan amable y por este curro tan fantástico que haces. Soy fan :)
Saludos
Pues vas a dejar de serlo pronto porque mi respuesta va a ser muy escueta: yo veo las dos imágenes de los dos enlaces que me pasas, exactamente igual :(
EliminarDe todas formas, si te he entendido, las imágenes hasta ahora publicadas tienen un efecto incorporado desde un editor (no desde CSS, no desde tu plantilla). Sí es así eso no tiene otro arreglo que no sea editarlas y recortarlas para quitar el marco previamente añadido... y volverlas a subir, claro.
No ;) No voy a dejar y sí, si que me has entenedido. Lo que pasa es que después de dejarte el comentario al final me decidí a reeditar todas las fotos, las que no pude hacer on-line las volví a subir esta vez sin marco. Muchísimas gracias igual. Saludos
EliminarOK :)
EliminarEntonces sí que te di la respuesta acertada pero ya la aplicaste por tí misma antes de que te la ofreciera XD
Muy bueno señor oloman me fue muy util
ResponderEliminarHola. He hecho lo que dices, pero quiero ponerla un poco más grande y aunque le cambio el tamaño no hace efecto el cambio. Me deja el mismo tamaño todo el tiempo. ¿Sabrías a qué es debido? Gracias ;)
ResponderEliminarHola Haliem. Si me pasas una dirección dónde tengas puesta una foto con texto al pie, te lo veo sin problemas.
EliminarHola! ¿como se haría si la imagen no esta en una entrada, si no que es un Widget?
ResponderEliminarGracias!
Hola Silver Books. Precisamente en el primer comentario de esta entrada preguntaron lo mismo y ahí mismo contesté. Si es algo distinto continúa allí mismo la conversación.
Eliminar