Estilo para tu galería

Y si dije en el título de esta entrada que era sencillísimo, así va a ser. Sólo tenemos que seguir tres pasos, a cual más fácil:

1. Crear una página estática


Vamos al Escritorio de Blogger y accedemos a la opción del menú denominada Páginas. Una vez allí pinchamos en el botón Página nueva.

Crear una página estática


2. Añadir el CSS directamente en la página


Interpretar HTML en entradas
Para que el nuevo estilo no afecte a las entradas normales y sobre todo, para no complicarnos, pegamos este CSS directamente en la página.

La única precaución que tenemos que tener aquí es que en Configuración de la página tengamos seleccionada la opción Interpretar HTML escrito, aunque tampoco es imprescindible... creo.

Este código llama a los selectores que habitualmente usa Blogger para el cuerpo de entradas y las imágenes que en él podemos subir, así que si tu plantilla usa selectores distintos (no es muy habitual que cambien precisamente estos), puede que tengas que cambiarlos.

<!-- SIEMPRE MANTENER ESTAS LINEAS A PARTIR DE AQUÍ ** NO BORRAR -->
<!-- ESTILO PARA GALERIA. SUBIR IMAGENES DESDE EL EDITOR, DE CUALQUIER MANERA Y DEJAR HACER A ESTO -->

<style>.post-body * {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;} .post-body {text-align: center !important;font-size:0 !important;line-height:0 !important;} .post-body br {height:0;width:0;display:none;} .post-body a, .post-body img, .post-body .separator, .post-body .separator a {clear:none !important; float: none !important; display: inline-block !important;*display: inline !important; zoom:1 !important; max-width: 100% !important;padding: 0 !important; margin:0 !important; border: 0 !important; font-size:0 !important;} .post-body img {width: 200px !important;max-width: 100% !important;height: auto !important;margin: 10px !important;background: white !important;padding: 10px !important;vertical-align: middle !important;-moz-box-shadow: 1px 1px 3px #999;-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;} </style>


3. Subir imágenes con el editor al libre albedrío


Ahora, una vez el CSS está en la página, ya sólo tenemos que añadir imágenes a discreción usando el correspondiente botón del editor. 

Como decía al principio, dará igual que las alineemos a la derecha, a la izquierda, que las centremos, que le demos un tamaño u otro. Ese CSS que pusimos anulará todos los estilos que se pudieran insertar intencionada o accidentalmente y las imágenes se mostrarán con un ancho de 200px, centradas en el cuerpo de las entradas y centradas también en vertical con respecto a cada línea o fila.

Cierto es que no todas tendrán la misma forma si son distintas, pero para que fuera de otra manera tendríamos que deformarlas forzando su redimensión (.post-body img {height: 200px;}) y me pareció más elegante dejarlas sin distorsión aún a pesar de lo antes comentado.

BLOG DE EJEMPLO

Busqueda