El pie de foto es una pequeña y breve descripción que podemos añadir a las imágenes que tengamos en el blog. Esta descripción da información precisa sobre la foto y nos ayuda a comprender dicha imagen.
Por ejemplo, al añadir la foto de una persona podemos insertar un pie de foto que dé el nombre de la persona, su cargo, un mérito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabrá quién es, o qué hizo esa persona.
Por el lado de SEO estas descripciones también nos ayudar a posicionar las imágenes en los buscadores ya que esta información también sirve para los robots.
Blogger nos da la opción de añadir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.
Por ejemplo, al añadir la foto de una persona podemos insertar un pie de foto que dé el nombre de la persona, su cargo, un mérito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabrá quién es, o qué hizo esa persona.
Por el lado de SEO estas descripciones también nos ayudar a posicionar las imágenes en los buscadores ya que esta información también sirve para los robots.
Blogger nos da la opción de añadir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.
 |
| Cachorros en el jardín |
Lo que haremos será añadir un pie de foto a las imágenes, pero a diferencia del pie de foto tradicional éste estará situado encima de la misma imagen y le agregaremos un fondo semitransparente, de modo que el resultado sea como este:
Si quieres tener un pie de foto como estos sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> agrega estos estilos:
.caption {Ahora cada vez que quieras ponerle un pie de foto a tus imágenes usa este código:
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200; /* Color de fondo */
background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */
color: #000; /* Color del texto */
font-size: 14px; /* Tamaño del texto */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
<div style="width:400px; padding:10px; margin:0 auto;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Ahí verás dónde se añade la descripción de la foto, así como la URL de la imagen.
El tamaño de la imagen se cambia modificando lo que está en negrita.
En el primer código que añadimos están los estilos para el pie de foto. Verás que el color de fondo está dos veces, primero en código hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomará el primero, el hexadecimal, pero sin la transparencia. En la secciónColores puedes obtener el código tanto en hexadecimal como en RGB.
La imagen estará centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este código:
El tamaño de la imagen se cambia modificando lo que está en negrita.
En el primer código que añadimos están los estilos para el pie de foto. Verás que el color de fondo está dos veces, primero en código hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomará el primero, el hexadecimal, pero sin la transparencia. En la secciónColores puedes obtener el código tanto en hexadecimal como en RGB.
La imagen estará centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este código:
<div style="width:400px; padding:10px; clear: left; float: left;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>En realidad es el mismo, sólo hemos añadido una flotación a la izquierda y quitamos el margen. El resultado es el siguiente.
Lo mismo podemos hacer si queremos alinear la imagen a la derecha.
<div style="width:400px; padding:10px; clear: right; float: right;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>Y se verá así:
¿Y si quisiéramos que el pie de foto aparezca sólo cuando se pase el cursor por encima de la imagen?
En ese caso quitamos los estilos que hayamos puesto y en su lugar agregamos estos:
.caption {
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200;
background: rgba(234, 242, 0, 0.6);
color: #000;
font-size: 14px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}
El resultado en cualquiera de los casos me parece que es mucho más atractivo que el nativo de Blogger (aunque en gustos se rompen géneros), además que podemos personalizarlo a nuestro gusto cambiando el color de fondo, tamaño, tipo del texto, y estilos extra que se le pueden agregar según la creatividad de cada quien.
No hay comentarios: