;  MY LIFE: GALERIA DE IMAGENES DE OLOBLOGGER PARA UNA UNICA ENTRADA

06 julio 2014

GALERIA DE IMAGENES DE OLOBLOGGER PARA UNA UNICA ENTRADA

El otro día Oloblogger nos dejó un post para poner las imágenes de nuestro blog en cada entrada con marco blanco, algo de sombra y bien ordenadas. Todo eso con CSS exclusivamente.
Me pareció una forma muy sencilla de dar a nuestras fotos un toque más original, así que empecé a probar cositas para poder ponerlas sólo en la entrada que yo quisiera y no en todo el blog, y ver cómo podía personalizar el marco a mi gusto.

¿Cómo podemos colocar este efecto en una única entrada y no en todo el blog?

Muy sencillo. Copiamos el código que nos da Oloblogger en la entrada que estamos redactando. Tenemos que tener en cuenta varias cosas:

1. Debemos colocarnos en la parte HTML de la entrada ( no en redactar ).
2. Darle a "interpretar HTML escrito" (en opciones)
¿Cómo podemos personalizar el marco? 


Debemos irnos a la parte de ".post-body img" e ir modificando a nuestro gusto.

1. Si queremos cambiar el color al marco deberemos buscar la línea donde ponga "background: white" y cambiar el color (white) por el que nosotros queramos.
2. Si queremos cambiar el grosor al marco buscaremos la palabra "padding" y le asignaremos un tamaño (a mayor número mayor será el grosor, por ejemplo 40 px viene a quedar como una diapositiva). 

3. Si queremos modificar la sombra deberemos buscar "box-shadow" y darle los valores que queramos (Ojo! El código que nos da Oloblogger está hecho para funcionar también en varios exploradores por lo que cuando cambiemos el valor tendremos que poner los mismos a "moz-box-shadow" y "webkit-box-shadow" para que se vean con ellos).También podemos cambiar el color de la sombra. Simplemente modificamos el #999 y ponemos el código de color que queramos (Tabla de colores).
4. Hacer las fotos más grandes: modificamos el "width: 200px" (con cuidado de no subir mucho el número porque si no las fotos quedarán una bajo de la otra y el efecto galería se perderá un poco).

¿Y si queremos poner texto en nuestra entrada?

Pues para que quede bien, alineado como queramos y no nos de problemas deberemos eliminar del código lo siguiente:

"font-size:0 !important;line-height:0 !important;.post-body br {height:0;width:0;display:none;}"

Nota: si ponemos algún enlace en la entrada adoptará algunas de las cualidades de las imágenes por ejemplo la del zoom, por lo que es mejor poner los justos o retocar si vemos que nos quedan algo raros.


Bueno pues para que se notaran bien las modificaciones de las que os habla he utilizado unos colores un poco fuertes pero quería que vierais la diferencia. El marco lo he puesto en Cyan y la sombra en Fucsia (queda fatal pero creo que así se nota más lo que se puede hacer) además de ponerle un grosor de 20 px.

Espero que os guste. Si lo utilizáis en vuestro blog compartir un enlace en comentarios.

Un saludo.