Cómo eliminar el espacio entre imágenes de blogger

By martes, mayo 12, 2015 No hay comentarios


Como sabrás, cuando suben un montón de imágenes en Blogger, éstas se alinean hacia abajo, haciendo que, para quienes trabajamos con muchas imágenes, sea molesto dar scroll continuo a todo el post. Sin embargo hoy te tengo varias alternativas para que tus imágenes puedan verse en cuadrícula, aprovechando el espacio vertical, alineando las imágenes horizontalmente.


Para lograr este cometido, tendemos la ayuda de un código que nos facilita blogxpertise.com, mismo que pegaremos debajo de <head> en nuestra plantilla (recuerda teclear Ctrl + F para ingresar en el cuadro de búsqueda de la plantilla lo que quieres encontrar).

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
 $('.post-body').find('img').each(function(n, image){
        var image = $(image);
        image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
    });
});
//]]></script>



Lo que hace este código es que, elimina el atributo 1em, que es el que por default incluye un espacio entre cada imagen, sin embargo blogger no lo hará todo por ti, ahora es turno de poner a trabajar la barra de retroceso de tu teclado: coloca el mouse y da clic del lado izquierdo de una imagen (a un lado, no sobre la imagen) y presiona dos o tres veces la tecla con la que borras texto, con esta acción, estás eliminando los saltos de línea <br /> que alinean de forma automática las imágenes hacia abajo.

Algo que debes de tener en cuenta es que, si manejas plantillas de diseñador (es decir, descargadas o compradas en alguna web de diseñadores) es probable que el código no funcione por una cuestión de la versión de JQuery que puede manejar la plantilla que adquiriste, pero aún así puedes acomodar tus imágenes en modo cuadrícula de forma manual gracias al editor de texto de Word.

Cuando termines de subir y agregar tus imágenes a blogger, da clic en Formato HTML en la parte izquierda de tu panel de edición, a continuación copia todo el contenido (un método fácil de hacerlo es con Ctrl + A) y pegarlo en un nuevo documento de Word. Cuando lo tengas en un tu procesador de textos, procederemos a sustituir el atributo 1em por simplemente em presionando las teclas Ctrl + B y seleccionando la pestaña Reemplazar. En la primera línea escribiremos 1em que es el valor a sustituir, y en la segunda escribiremos por lo que será sustituido, por ejemplo con simplemente em que al no tener valor numérico automáticamente lo detecta como cero. PERO OJO: si en la dirección de cada imagen aparece 1em en la url del archivo, es probable que se sustituya también y el archivo de imagen no pueda verse, así que igual puedes sustituir 1em por valores decimales como 0.1em, 0.2em, etcétera.




Cuando hayas terminado de sustituir todos los 1em (verás que es más fácil de lo que parece) puedes eliminar también los saltos de línea, para ello en el cuadro de Reemplazar texto (Ctrl + B) escribimos en el primer campo <br /> que es el código que se traduce como un ‘enter’ en HTML, y el segundo campo que indica ‘Reemplazar con:’ simplemente lo dejamos en blanco, para indicar que queremos que <br /> sea eliminado.

Ahora copiamos todo el contenido de nuestro procesador de texto (en esta ocasión con Ctrl + E) y lo sustituimos (borrando el HTML que teníamos antes en la plantilla), de esta forma, al copiarlo y seleccionar la opción Redactar veremos que se han borrado los espacios que por default blogger impone a las imágenes, ahora sólo queda alinearlas dando clic en la parte izquierda de la imagen y presionando la tecla con la que borras texto, con lo que lograrás un efecto cuadrícula como el que adopto para mi otro blog, viendo un ejemplo en este enlace.

Espero que este mni tutorial haya sido de tu ayuda, cualquier duda, comentario o mentada será plácidamente contestado en los comentarios.

Publicar un comentario