Revista Cultura y Ocio

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

Publicado el 14 junio 2015 por Entre Libros Y Tintas @EntreLibrosyTin
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.
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.
  • 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.
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.
  • 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.
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.
  • 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
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.
  • El resultado sería una barra como esta
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.
  • 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.
Tutorial: Cómo Poner una Barra de Progreso en tu Blog.

Volver a la Portada de Logo Paperblog