15/8/13

Tutorial: Poner barra de progreso

Hola!

Hoy os traigo el primer tutorial, el cual conocí en SintoníaLiteraria que trata de como poner una barra de progreso en tu blog.

Las barras de progreso son esas barras que muestran el porcentaje de avance que tienes en los retos, por lo que es un tutorial muy útil si estáis interesados en participar en dichos retos.

He de decir que es muy fácil, pero que si eres como yo (de las que no se enteran de nada) probablemente no lo sabrías hacer; así que, adelante:



PASO 1:

Entramos en esta página y buscamos lo que realmente nos interesa, este cuadrado:

Podemos ver el ejemplo de la barra de arriba, pero sinceramente, a nosotros no nos interesan esas cifras, así que no hay más que poner en "Current NaNoWriMo Word Count" lo avanzado que tengáis el reto. Es decir, si es de leer 10 libros de 50, aquí pondremos 10.

En "Total NaNoWriMo Word Goal" debemos poner el objetivo del reto (en el ejemplo que he puesto antes, sería el 50)

Y por último, en "NaNoWriMo Progress Bar Color" debemos escoger el color que queramos para nuestra barra. Para conocer que código es el color que nos gusta, puede ayudarnos esta página, aunque he de decir que hay muchas más.


No hay mucho que añadir, eliges un color, y te saldrá justo debajo del cuadro unos cuadritos así:


El código que pone debajo del color es el código que debes escribir en "NaNoWriMo Progress Bar Color"

Una vez seleccionado los datos, y el color, le damos a Calculate.

Y así se vería:


Ya solo nos queda copiar el código que ha generado la página (el que aparece en un recuadro) y ir a nuestro blog.

PASO 2:

Una vez en nuestro blog, vamos a diseño -> añadir un gadget -> HTML/javaScript

Aquí debemos pegar que hemos copiado antes, modificando (si queremos) las palabras señaladas en la imagen.

Y este es el resultado:

Como varios me lo habéis preguntado, lo aclaro aquí:
Para ir modificando el porcentaje, no tenéis más que modificar el HTML y cambiar el nº que hay delante del %  (en la imagen, donde pone width:20% y el 20% done habría que cambiar el 20 por el número que queramos)

Como veis, muy sencillo, y una vez que le cojáis el gusto, no pararéis de hacer barras!!!

Espero que os haya gustado,y si tenéis algún problema, no dudar en decirlo!!


12 comentarios:

  1. ¡Gracias! A mi si me ha servido. Yo también soy de las que no me entero muchas veces, pero en este tutorial, si lo he hecho bien.
    Besos^^

    ResponderEliminar
    Respuestas
    1. *w* Me alegro mucho C: Muchas gracias por seguirlo. Un beso!

      Eliminar
  2. Graciiias *.* Por fin pude ponerlo :) soy de las tuyas ;)

    ResponderEliminar
    Respuestas
    1. Me alegro que te sirva! Ya sabes que si necesitas cualquier cosa, puedes preguntarlo! :D

      Un beso!

      Eliminar
  3. Disculpa, se puede cambiar luego el "porcentaje" del progreso? Cómo?

    ResponderEliminar
  4. Hola gracias por el aporte. Como se modifica el progreso? Saludos

    ResponderEliminar
    Respuestas
    1. Hola!

      Siento muchísimo el retraso en contestar. Para modificar el progreso no tienes más que modificar el HTML (cambias el % y la barra se rellena automáticamente)

      Un saludo!

      Eliminar
  5. Hola, no sabes como agregarle una imagen ? como el avance de un solo libro y ponerle imagen de la portada?

    ResponderEliminar
  6. De verdad que me sirve mucho, gracias :)

    ResponderEliminar
  7. hola!!
    una pregunta, como puedo conseguir que quede cetrado en lugar de a la izquierda, solo he conseguido lo de abajo la barra me es imposible

    ResponderEliminar

Escribir una entrada lleva su tiempo, y agradezco mucho cualquier comentario que hagáis sobre ella, siempre que sea respetuoso.
Prometo contestar todos los comentarios (lo más pronto posible!)

Saludos!

Related Posts Plugin for WordPress, Blogger...