domingo, 14 de junio de 2015

Tutorial: Cómo Poner una Barra de Progreso en tu Blog.

En el tutorial de hoy os voy a enseñar una manera rápida y superfácil para poner una Barra de Progresión en vuestro Blog.

Con este sencillo truco podéis incluir en vuestros retos, lecturas, y cualquier post de tu blog una barra que vaya indicando el porcentaje que has realizado y cuanto te falta para terminarlo... y además es totalmente personalizable en cuanto a colores, por lo que podréis integrarlo en el diseño de vuestro blog sin que desentone.

Para poner estas barras de avance debéis de entrar en la web Language is a virus y seguir sus instrucciones.

Aun así voy a intentar guiaros y explicarlo paso a paso.


Vamos a imaginar que queremos poner una barra de progreso sobre un reto consistente en leer 50 libros, y ya hemos leido la cantidad de 10.


  • Entramos en la web indicada haciendo click aquí donde veremos la siguiente imagen.
  • Donde pone Current NaNoWriMo Word Count: Indicamos la cantidad de libros leidos (10 libros)
  • En el apartado Total NanoWriMo Word Goal: Indicamos la cantidad a alcanzar (50 libros)
  • En el apartado NaNoWriMo Bar Color indicamos el código del color que queremos poner a la barra si lo sabemos. Si no hacemos click donde pone "Pick a Color for your NanoWrimo Worl Meter" y nos desplegará una tabla de colores, marca el que más te guste.

  • Una vez seleccionado el color damos a "Calculate" y nos generará un código que es el que hemos de incluir en nuestro blog. Copiamos todo el código.

  • Vamos a nuestro blog y desde la Página Principal de Blogger seleccionas Diseño -- Añadir un Gadget -- HTML/Javascript
  • Pegamos el código y guardamos
  • El resultado sería una barra como esta
  • También podéis incluirlo (creo que es la opción más utilizada) debajo de una imagen o banner del reto, en esto caso seleccionariais Diseño -- Añadir un Gadget -- Imagen y pegariamos el texto donde indica Pie de foto. El resultado sería como el que veis en los retos del lateral de mi blog.

NOTA: Tened en cuenta que la barra no va avanzando sola, si no que cada vez que queráis aumentar el porcentaje realizado debéis volver a hacer los pasos indicados en la web y volver a pegar el código resultante en el lugar que teníais el anterior.



11 comentarios:

  1. Vaya entonces hay que ir actualizándolo no?
    Bueno de todos modos gracias es algo que me producía curiosidad al verlo en otros blogs y creo que yo también meteré alguna.
    Besos :)

    ResponderEliminar
  2. Hola!! Gracias por el tutorial:D Me llamaba la atención al verlo en otros blogs el saber cómo lo habían puesto xD No creo que vaya a poner ninguna en mi blog, pero sin duda es un tutorial muy útil y muy bien explicado ^.^
    Besos!!

    ResponderEliminar
  3. Me ha encantado este tutorial, quería saber como se hacia desde hace mucho. Voy a hacerlo para algunos retos que quería agregar a mi blog. Gracias por el tutorial!
    Besitos

    ResponderEliminar
  4. Yo lo intenté una vez pero al ver que tenía que ir actualizándolo yo manualmente se me quitó la idea jeje

    ResponderEliminar
  5. estos tutoriales van geniales!!
    graciaas!
    __cuchus__

    ResponderEliminar
  6. Gracias por el tutorial :3 Nunca se sabe cuándo pueden sernos útiles estas barritas :P

    ¡Besos!

    ResponderEliminar
  7. Lindaaa!!!
    adoro estas entradas! no sabes cuanto me ayudas n.n
    Un besito! pronto ya lo estaré usando esas barritas !

    ResponderEliminar
  8. Hola corazón muchas gracias por este tutorial!!!!
    Kissss

    ResponderEliminar
  9. ¡Muchas gracias por el tutorial cariño! ^^

    ResponderEliminar
  10. Que tengas q actualizarlo manualmente uffff, pero siiiiiii,siii Eva, era un tutorial que buscaba,buscaba y no encontraba¡¡¡¡gracias!!!!!!

    Besitosss

    ResponderEliminar
  11. hola guapisima una cosilla la pagina de la barra de estado no me funciona

    ResponderEliminar

Y tú ¿qué piensas?
¡Me gustaría mucho saberlo!
¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥

Me hacen tanta ilusión que leo todos y cada uno de ellos SIEMPRE.

Sin embargo y aunque en general suelen ser bienvenidos todos los comentarios y todas las opiniones, me reservo el derecho de eliminar aquellos que me parezcan malintencionados o cuyo único fin sea la autopromoción.

Besos y ¡gracias de nuevo!