Compartir !
  •  
  •  
  •  
  •  
  •  

bs

Hoy vamos a mostrar un pequeño truco para insertar sliders creados por nosotros mismos en nuestra blog o web creada mediante la plataforma de Blogger.

Existen servicios externos como POWr que nos permiten añadir un “Gadget” en nuestro blog de Blogger para mostrar un Slider, pero lo que hoy nos interesa es hacer nosotros mismos un Slider que publicaremos en nuestra página sin necesidad de tener gran cantidad de conocimientos técnicos.

Para realizar esta labor se va a necesitar una herramienta de creación de Sliders como es WOW Slider y una cuenta de Google para tener acceso a Google Drive, que es donde publicaremos originalmente el Slider que mostraremos.

Nota: Google Drive permite la publicación de webs realizadas mediante HTML y JavaScript.

Paso 1

Lo primero que tendremos que hacer es abrir WOW Slider y crear y configurar tal y como queremos nuestro Slider. Hay que tener en cuenta el tamaño del cual disponemos en nuestro blog a la hora de publicar el Slider, ya que irá dentro de un Gadget de “texto” en forma de <iframe> y si el tamaño es excesivo nuestra galería no se verá correctamente.

Nota: para poder visualizar el tamaño que disponemos podemos o ver el código HTML de nuestra plantilla de Blogger o una vez abierta la web en el navegador (por ejemplo Google Chrome) usar la herramienta de “inspeccionar elemento” hasta que demos con la sección correspondiente.

wow

 

Una vez que guardamos y publicamos nuestro proyecto de WOW Slider, veremos que se nos genera una carpeta con todas las funciones necesarias para su funcionamiento, las imágenes y dos ficheros HTML, donde uno es la propia galería y el otro el <iframe>.

Paso 2

En este paso, una vez que ya tenemos nuestros ficheros del Slider creado, tendremos que acceder a nuestra cuenta de Google Drive y publicar nuestra galería. Para ello tendremos que crearnos una Carpeta pública en nuestra unidad de Drive y dentro de dicho directorio subiremos todos los ficheros que nos fueron generados por WOW Slider (todos los archivos que publiquemos dentro de dicha carpeta han de ser Públicos).

sl

Una vez que tenemos los ficheros publicados en nuestra cuenta de Drive (Google ya no dispone del antiguo visualizador donde veíamos cómodamente las webs que alojabamos y las URLs necesarias para la publicación) tendremos que obtener el ID de nuestra carpeta donde están alojados; para ello tenemos que pinchar sobre nuestra carpeta (en mi caso se llama Slide1), click derecho y Compartir, donde nos saldrá la siguiente ventana donde podemos ver nuestro ID de la carpeta.

sha

Una vez tenemos nuestro ID, el formato de la URL de visualización de nuestro fichero index.html que corresponde con el Slider es el siguiente (antes este enlace se podía obtener facilmente desde Drive):

https://googledrive.com/host/0B76xvUIy1vNTdHpVLWZabnYyYnc/index.html
  •  podemos ver que le indicamos al navegador el host (que es nuestra carpeta Slide1 con el ID=0B76xvUIy1vNTdHpVLWZabnYyYnc) y que el fichero es index.html

Una vez comprobamos que nos funciona nuestro fichero index.html en el navegador y lo visualizamos pasamos al siguiente paso.

Paso 3

Ahora es el momento de introducir el <iframe> en Blogger. Para ello podemos o crearlo nosotros mismos o hacer un “Copy+Paste” (Copiar y pegar) del index_iframe.html que nos generó WOW Slider.

Para introducir el <iframe> en un Gadget de Blogger tendremos que seleccionar el Gadget de de HTML/JavaScript y pegar dentro lo que copiamos anteriormente. Si no queremos que tenga título este Gadget tendremos que introducir alguna etiqueta con el texto vacío, donde con simplemente escribir en el título del mismo <h1></h1> nos servirá.

gad

Este texto copiado hay que hacerle una modificación para su funcionamiento, solo tendremos que cambiar el “src” que me indica la fuente de la URL por la que anteriormente probamos. Una vez modificado esto el Gadget con nuestro Slider deberá de funcionar y tendremos disponible en nuestro blog la galería que nosotros creamos.

slee

Luis Miguel García Macías
CTO en Design Up Spain. Web Developer, especialista en SEO, emprendedor y apasionado de las nuevas tecnologías.

Compartir !
  •  
  •  
  •  
  •  
  •