Truco para Blogger: Slider con efecto responsive para las imágenes

Share

Sé que esto ha estado abandonado últimamente, pero en verdad no se me ha dado el tiempo para hacerlo (entre tanto proyectos personales, cosas del trabajo y pereza por la lluvia) me he puesto a pensar que éste puede ser un buen espacio para dar a conocer los pocos conocimientos que he adquirido sobre la plataforma Blogger, y que a continuación comparto con ustedes.

En esta ocasión he decidido escribir sobre un nuevo slider (o lightbox) para blogger con efecto responsive, verán: 'Responsive' significa que se adapta a cualquier tipo de pantalla,  desde un monitor de escritorio hasta el teléfono que usamos día a día. Si tú como yo, usas muchas imágenes en tus posts de blogger, verás que es complicado visualizarlas correctamente en pantallas pequeñas, por lo que Image Lightbox, el 'carrusel' de fotos del que les hablo será de gran ayuda.

Antes que nada, éste tutorial está basado en el desarrollo de código de Osvaldas, y aunque hay varias cosas que no explican claramente, trataré de ser lo más preciso posible. Pero primero te recomiendo hacer una copia de seguridad de tu plantilla, ya que si algo sale mal o no puedes corregir lo guardado, te será de mucha ayuda, ahora si, comencemos:

Dentro de tu plantilla de Blogger (Inicio → Plantilla → Edición HTML) presiona las teclas Ctrl + F y dentro del cuadro de búsqueda que aparece en el código de la plantilla busca ]]></b:skin> y encima de ella agrega el siguiente código:

#imagelightbox
{
    position: fixed;
    z-index: 9999;

    -ms-touch-action: none;
    touch-action: none;
}

Ya que lo hayas agregado, tendrás que hacer uso de un servicio de hosting, es decir: una plataforma para guardar tus archivos en la nube y que estén disponibles para su uso mediante enlaces, ya que agregaremos un archivo .js que puedes obtener aquí, guardándolo en un bloc de notas con la extensión .js. Lo siguiente es buscar la etiqueta </body> en tu plantilla y agregar encima de la misma el siguiente código:

<script src='jquery.js'/>
<script src='https://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/imagelightbox.js'/>
<script>
$( function()
{
$( &#39;a&#39; ).imageLightbox();
});
</script>

Como verás, en la segunda línea aparece el enlace del archivo .js enlazado directamente desde la web del autor del código, misma que almacena el documento haciéndolo funcionar, o si gustas, puedes reemplazarlo con el tuyo usando una cuenta de Google Drive u otro servicio de hosting.

Con estos sencillos pasos ya podrás tener un slider responsive para tu blog que funcionará con todas las imágenes de los posts y en cualquier dispositivo, sólo queda un paso más: Entra a Blogger → Configuración → Entradas y comentarios y selecciona "NO" en la opción de "Mostrar imágenes en lightbox" para que no se sobrepongan uno ante otro.

Cualquier comentario es bien recibido, espero que este mini tutorial haya sido de su ayuda. ¡Saludos!