Como añadir el gadget de Instagram a pie de blog en forma de scrolling

Hoy quiero enseñaros la forma en la que yo conseguí añadir el gadget de Instagram al blog.
Pero no de forma normal, si no a pie de blog y de forma de scrolling. Como lo tengo yo instalado vaya.
Tal y como dije en la entrada donde os recomendaba plantillas para blogger, esta opción no venía per-diseñada en mi plantilla y tuve que añadirla yo.

¡Vamos al lío!

Para empezar vamos a ver los dos tipos de casos que nos podemos encontrar en las plantillas de blogger.
Podemos tener la suerte de tener la plantilla con un "contenedor" (como a mi me gusta llamarlo) Footer ampliado como vemos en la siguiente imagen. Si es así, puedes saltarte los siguientes pasos e ir directamente a la opción de añadir HTML.



Si por el contrario, te pasa como a mí que tenía la plantilla sin ningún "contenedor" Footer, tendrás que añadirlo tu mismo con la ayuda de HTML.



Antes de empezar, recuerda hacer una copia de seguridad de tu blog, que nunca se sabe lo que puede pasar.

Para añadir los apartados Footer debemos de irnos a Plantilla → Edital HTML

Hacemos click dentro del recuadro para marcarlo (da igual donde lo hagáis) y Pulsamos Ctrl + F si estas en Windows o Cmd + F si estas en IOS.

Os aparecerá un pequeño buscador donde debéis poner: <!-- content wrapper end -->

Os desplazáis unas lineas abajo hasta casi llegar a la parte de Copyright y añadís el siguiente código HTML

<!-- Footer Starts-->

<div id='footer-wrapper'>
<div id='footer'>
<b:section class='footer-new' id='footer-new1'/>
<div style='clear:both'/>
</div>
</div>

<b:section class='footer-new' id='footer-new2'/>
<div style='clear:both'/>
<b:section class='footer-new' id='footer-new3'/>
<div style='clear:both'/>

<!-- Footer Ends-->

Tal y como veis en la imagen.



¡Y listo! Seguidamente os vais a Diseño y ya os deberían aparecer los contenedores con 3 apartados para gadgets.


Ahora podemos irnos directamente a añadir nuestro Instagram.
Vamos a la famosa pagina SnapWidget y añadimos nuestros datos como podéis ver la siguiente imagen. Es muy importante que en el apartado de "Widget Type" selecciones Scrolling que es el formato alargado en el que van pasando las imágenes solas.




Si le dais a Preview podréis ver el efecto que os comento, y si le dais a Get Widget obtendremos el código HTML que necesitamos para añadirlo al Gadget.



Una vez tengamos el código volvemos al apartado de Diseño, y hacemos click en el segundo Footer (muy importante) y le damos a añadir Gadget de HTML y copiamos el código tal y como nos lo dio la página de SnapWidget.

Y os quedaría una cosa así.





Como veis queda algo pequeño y no llega a ocupar el 100% del pie de blog.
Para modificarlo es muy sencillo, tan solo tenéis que modificar los números que os enseño en la imagen de abajo hasta dar con las medias adecuadas.



¡Y listo quedaría una cosilla así!
En mi caso lo más difícil fue crear los contenedores, busqué mucho por internet y al final tuve que mezclar códigos de un lado y otro hasta dar con el resultado que yo quería.



Recordad que si tenéis alguna duda o en algún momento del proceso os quedáis atascadas, podéis dejarme vuestras dudas por comentarios o escribirme un email a info@alexxa26.com y lo veremos juntas con más detalle.

¡Un beso enorme! y nos leemos el viernes.