Agregar imágenes en nuestro sitio o blog, es algo sencillo. Pero al tratar de colocarle un texto descriptivo a la imagen la tarea se complica bastante. En especial cuando se quiere que el texto permanezca junto con la imagen, ya sea por debajo o por arriba.
Es por eso que a lo largo de esta entrada veremos un sencillo pero útil recurso con el cual podremos agregar imágenes en nuestro sitio/blog con un pie de foto sin despeinarnos.
Obviamente las posibilidades son infinitas, esta solo es una, que se me ocurrió mientras paseaba al perro por el parque. Y gracias a Diana Reyes me decidí a publicarlo. En fin, la forma de agregar una imagen mediante este método es la siguiente:
Agregando lo anterior para cada imagen que insertemos en nuestro sitio/blog, obtendremos algo muy feo y nada agradable. Algo así:
Unicornio nadando, IMPOSIBLE!
Esto se arregla ingresando a Diseño>Edicion HTML y agregando justo antes de la etiqueta ]]><b:skin/>
Si realizamos lo anterior con éxito, la imagen que habíamos insertado ahora tendrá esta apariencia:
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
Pie de foto transparente
Con lo anterior se cumple con el objetivo, pero se podría hacer un par de cosas mas con esto. Por ejemplo, jugando un poco con la propiedad position y una etiqueta span mas tendríamos algo como esto:
Unicornio nadando, IMPOSIBLE!!
El código que debes agregar con cada imagen es el siguiente:
Mientras que lo que se agrega en Diseño>Edicion HTMLjusto antes de la etiqueta ]]></b:skin> es:
Posición de la imagen
Al igual que cualquier otra imagen, este código puede alinearse a la iquierda, derecha o centro. Solo que para esto es necesario agregar antes de ]]></b:skin> el siguiente código:
Este código es aparte de los otros códigos, este solo es para alinear nuestra imagen. Su utilizacion es de la siguiente manera:
Cargando...
Deja tu huella y comenta!
Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
Me ha gustado especialmente lo de hacer semitransparente el texto. Queda bonito, y no deja de ser útil y práctico. Yo lo podría utilizar para poner un enlace al autor, si es una foto con licencia CC y no es mía, por poner un ejemplo. O una descripción del instrumento, equipo, captura de pantalla, etc... Hay muchas posibilidades.
José GDF, así es, las posibilidades para utilizar y colocar un pie de foto a una imagen tiene muchísimas posibilidades. Y en particular aquí como lo presento se pueden colocar incluso imágenes, posiblemente que se vea cuando pase el mouse, etc... Solo es cuestión de ponerse a experimentar un poco :P. Buen Dia!
Diana Reyes, de nada:D, avísame si tienes algún problemita ;)
muy bueno el tutorial; pero cómo se haría el primer ejemplo? es decir, para que el texto quede al pie de imagen, llevo toda la mañana con eso no doy con la tecla, podrías ayudarme? Muchas gracias
muy bueno el tutorial; pero cómo se haría el primer ejemplo? es decir, para que el texto quede al pie de imagen, llevo toda la mañana con eso no doy con la tecla, podrías ayudarme? Muchas gracias
Unicornio nadando, IMPOSIBLE!
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
que se publicó
Deja tu huella y comenta!
Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional
Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.