Descripción en las imágenes del blog (II)

En la entrada anterior aprendimos a instalar un marco para las imágenes del blog en el que podíamos escribir una frase para describir la fotografía.

Para realizarlo, era necesario acceder a la plantilla, encontrar una etiqueta específica y agregar un bloque de CSS que daría el estilo necesario al recuadro. Pero con este otro truco tan solo necesitaremos pegar el código en la entrada, sin necesidad de editar la plantilla.

Lo primero que debes hacer es subir la imagen que deseas describir. Puedes utilizar un servicio de alojamiento gratuito o simplemente subir la imagen a blogger ^[+] y copiar su URL ^[+].

Una vez tengas la imagen, accede a una entrada cualquiera y, en el modo "Edición de HTML", inserta el código que te muestro a continuación:

Código:

<table cellspacing="0" cellpadding="0" align="center" style="background: #ccc; margin-left: auto; margin-right: auto; text-align: center;" class="tr-caption-container"><tbody>
<tr><td style="text-align: center;"><a style="margin-left: auto; margin-right: auto;" imageanchor="1"><img src="URL DE LA IMAGEN"/></a></td></tr>
<tr><td style="color: #000; text-align: center;" class="tr-caption">AQUI LA DESCRIPCION</td></tr>
</tbody></table>

Sustituye URL DE LA IMAGEN con la dirección de la imagen que previamente alojaste.

La frase que describirá la fotografía debe incluirse en donde dice AQUI LA DESCRIPCION (borrando eso antes).

Finalmente publica la entrada.

Modificar el recuadro

Si no editas el código, tu imagen con descripción tendrá este aspecto...




Cambiar el color de fondo o el color del texto es muy sencillo y podrás hacerlo con las siguientes instrucciones:

background: #ccc; (en la primera línea) representa el color de fondo (gris). Puedes cambiarlo editando el valor hexadecimal -#ccc- e insertando cualquier otro color que encontrarás en la tabla de colores.

color: #000; (en la octaba línea) representa el color del texto de la descripción. Cambia #000 (negro) por tu color favorito.

El recuadro aparecerá "por defecto" de forma centrada. Para alinearlo a la izquierda, cambia el término center por left. En caso de querer alinearlo a la izquierda, utiliza right.

Nota:

Para no estar copiando el código cada vez que desees describir una imagen, haz uso de la plantilla de entrada que ofrece blogger.