x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 22.4.16 - Tutorial

Mejorando ThemeXpose: FeatherLight

featherlight lightbox para Blogger

Hoy deseo compartir con quienes han optado como yo por una plantilla de ThemeXpose, un dato para mejorar esos deslices de estas plantillas.

¿Qué qué llamo deslices? Bueno, primero indico que hablo desde mi experiencia, pues hace unos meses le di un lavado de rostro a Mami507, mi queridísimo bebé virtual. Luego de probar diversas plantillas de terceros, me decanté por la Voux de ThemeXpose, un diseño simple que me gustó más que todo por lo responsive (ajustable a diversas pantallas) algo que le falta a las plantillas normales de Blogger.

Pero no todo en esta vida es color rosa, y pasado un tiempo noté algunos detalles (lo que llamo deslices) que me incomodaron un poco, no tanto como para cambiar de plantilla en la que ya había invertido tiempo de personalización, pero lo suficiente como para trastear en código y rastrear en la web hasta con dar con soluciones que me satisficieran; pues sí, si algo me incomoda no descanso hasta dejarlo lo más cercano a lo que deseo.

Uno de esos deslices que más me  incomodó fue la pérdida del Lightbox, o en lenguaje mundano, la capacidad de que las fotos de los post se mostraran detalladamente y en galería al hacerles click. Y entre tanta búsqueda y pruebas me he encontrado con un sustituto sencillo pero que evita que quién nos lee se salga del blog: FeatherLight.js



Sin más rodeos, vamos con las indicaciones para implementarlo ya en cualquier plantilla de Themexpose o de otros diseñadores que carezcan de Lightbox:


Como siempre, hacer copia de seguridad de la plantilla y dentro de la edición HTML buscamos ]]></b:skin> y dentro pegamos los estilos de Featherlight:

@media all{.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;min-width:30%;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0}.featherlight iframe{border:[email protected] only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:10px;margin-right:10px;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}

Buscamos ahora </head> y seguido a ello pegamos:

<script charset='utf-8' src='http://cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js' type='text/javascript'/>

Es necesario tener jQuery y asegúrate de pegar el script de Featherlight después de éste.

Esa sería la implementación de este script que por ahora solamente muestra imagen por imagen. Debo aclarar que su uso no es automático,  para aplicarlo a las imágenes de los post debemos agregar la siguiente pieza de código dentro de la etiqueta <a>
de la imagen desde la pestaña HTML en la redacción del post.

data-featherlight="image"

Yo como truco la he puesto en la Plantilla de las entradas que encontramos en Configuración > Entradas y comentarios.

Para finalizar, les comento que he realizado mi primer ebook (pdf) con la explicación, códigos y fotos de los resultados de los cambios hechos a mi plantilla y donde verán además de lo explicado aquí:

  • Página 404 realmente personalizada
  • Buscador personalizado que no deje página en blanco al dar error en la búsqueda
  • Botones de compartir en G+, Enviar por correo y LinkedIN (considerado extra porque no le tengo en mi plantilla)




Si conocen a algún blogger que se beneficie de este eBook, no lo duden y ¡a compartir 😉!


Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *