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

tutorial-instagram-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.

tutorial-instagram-scrolling-1

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.

tutorial-instagram-scrolling-2

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.

tutorial-instagram-scrolling-3

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

tutorial-instagram-scrolling-4
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.

tutorial-instagram-scrolling-5
tutorial-instagram-scrolling-6

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.

tutorial-instagram-scrolling-7tutorial-instagram-scrolling-8

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í.

tutorial-instagram-scrolling-9
tutorial-instagram-scrolling-10
tutorial-instagram-scrolling-11

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.

tutorial-instagram-scrolling-13

¡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.

tutorial-instagram-scrolling-14

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.

You Might Also Like

10 comentarios

  1. Me apunto este trabajillo hahaha y apenas este listo te invito a pasarte por el blog, porque si no te lo había dicho antes me encanta la plantilla que tiene tu blog. Besotes

    ResponderEliminar
    Respuestas
    1. ¡Hola Diana!
      Como siempre mil gracias por tus palabras :)
      ¡Avísame si te animas a hacerlo!
      Un beso

      Eliminar
    2. Ya lo puse y me quedo lindo, lastimosamente yo debo tener un error en el html o algo raro que yo misma puse de tanto trastear con cosillas de la plantilla y aparece una linea gris bien fea esto mismo me pasa en el menú desplegable que tengo arriba.

      Eliminar
    3. Hola Diana, he ido a tu Blog a verlo y tengo que decirte que te ha quedado muy bien.
      Es cierto que tienes el gadget como dentro de un recuadro gris y como bien dices tiene pinta de ser del mismo tono que las pestañas de las categorías.
      Si quiere quitar ese color yo buscaría el código de color en la plantilla y lo sustituiría o lo quitaría.
      Me parece que el código de color es el #7f7f7f :)
      ¡Un beso cielo!

      Eliminar
  2. Guapaaa!
    Me lo acabo de poner, veo que a ti no te salen flechas laterales, como las puedo quitar?
    Gracias de antemano!
    Un besito

    ResponderEliminar
    Respuestas
    1. ¡Cielo te ha quedado precioso!
      Para que las flechas no se vean tan solo tienes que hacer el Scrolling más largo, aumentando los px que señalo en la imagen de arriba. En concreto los que pone WIDT :)
      ¡Un besazo!

      Eliminar
    2. Gracias bonita!
      Lo he estado probando pero no me acaba de gustar como queda, así que lo dejo como estaba :) que tampoco queda mal jaja
      Un besazo.

      Eliminar
    3. A mi me encanta como te ha quedado pega mucho tu galería de Instagram con el diseño de tu plantilla ^^

      Eliminar
    4. Merciiii :)
      Aprovecho para hacerte una preguntita, es que me volví loca intentado solucionarlo pero no hubo manera.. a ver si tu que dominas mas en todo esto me puedes contestar.
      En todas las fotos que subo, me aparece un marco en color blanco, me gustaría que no saliera, sabes como debo hacerlo? :/

      Eliminar

Popular Posts

Flickr Images