By
Anteriormente les había hablado sobre un código que al insertarlo en la plantilla de nuestro blog, hacía que las imágenes se mostraran con un efecto cuadrícula al verlas publicadas. Pues bien, este código no funciona con algunas plantillas prediseñadas por una versión del jQuery utilizado en la elaboración de la misma, pero para aquellos que quieren mostrar sus imágenes de una forma más organizada les traigo un tutorial sencillo para que lo puedan hacer.
Antes que nada, necesitan subir las imágenes que van a ingresar al post e insertarlas normalmente. Después damos clic en el apartado superior izquierdo que dice 'HTML' para poder accesar al código que le da forma al post:
Cuando veamos el contenido, tendremos que copiarlo y pegarlo en un documento de word cuidando de no modificar ni borrar algún elemento, una vez pegado en el procesador de textos, procederemos a anular (o eliminar) los siguientes valores presionando Ctrl + B ó Ctrl + L (para usuarios de Office 2013) donde nos aparecerá un recuadro como éste:
En el recuadro de Buscar: escribiremos los valores que se explican abajo, y en el segundo que dice Reemplazar con: lo dejaremos en blanco.
¿Qué valores vamos a reemplazar y qué significan?
- 1em: Este valor agrega un espacio a la derecha e izquierda de cada imagen subida a blogger, al borrarla, las imágenes se aprecian más juntas unas de otras.
- <br />: Este valor se puede 'traducir' como un salto de línea (o un enter) para juntar más las imágenes alineadas en vertical.
- <div class="separator" style="clear: both; text-align: center;">: Este valor es un separador entre una imagen y otra, prácticamente borra todo espacio que haya arriba y debajo de la imagen.
Cuando hayas sustituido los tres valores anteriores por el espacio en blanco (asegurándote de reemplazarlos todos) copias el código HTML de tu documento en Word y lo pegas en el borrador de blogger, borrando el primero que generaste. Al dar clic en 'REDACTAR' en la parte superior izquierda de donde escribes el post, verás que los espacios tanto del texto como de las imágenes se han borrado. Pero hay algo más: todo el contenido está alineado a la izquierda porque en el tercer valor el atributo text-align: center; desaparece. Pero no te preocupes, puedes seleccionar una imagen y centrarla en las opciones de edición de texto de arriba (al alinear una se alinean todas, al no tener separaciones) y si el texto aparece muy junto, puedes agregar saltos de línea con la tecla enter.
A continuación un ejemplo de las imágenes sin los valores anteriores y alineadas al centro:
Sin duda esta es una opción que resulta muy útil si manejas varias imágenes en tus posts, lo que hace más fácil la navegación de tu blog y más llamativo.
¡Hasta la próxima!
Publicar un comentario