lunes, 14 de enero de 2013

Tutorial: Cómo poner una barra de porcentaje

¡Hola sintonizados!

En algunas ocasiones nos encontramos con Retos o pruebas para las que es preciso usar una barra de porcentaje, y aunque el procedimiento para ponerla es muy fácil, es posible que a veces nos encontremos con problemas o nos liemos un poco en el proceso. 

Por eso, aquí os traigo un pequeño tutorial que seguro os aclarará cómo usarla y cómo ponerla en vuestro blog.

 Paso 1: Lo principal

Entramos en ESTA página. Nos centraremos en este cuadradito que nos aparecerá:


Paso 2: Rellenar los campos

Rellenamos los campos numéricos. En la casilla Current NanoWriMo Word Count (1) tendréis que poner la cantidad de Reto que lleváis superado. Por ejemplo, en el reto de las 13000 páginas, si llevamos leídas 800, eso será lo que pondremos en esa casilla (800).

En el apartado Total NaNoWriMo Word Goal (2) tendremos que poner el total que queremos alcanzar. Siguiendo el mismo ejemplo anterior, tendríamos que poner 13000, que es la meta del Reto.


Paso 3: Cambiamos el color de la barra

Podemos poner la barra del color que prefiramos y acorde a nuestro blog. Para ello, nos centramos en la tercera casilla, NaNoWriMo Progress Bar Color. Primero iremos a ÉSTA página, donde nos aparecerá un cuadro como éste:


Selecciona el color que desees para tu barra (en este ejemplo, un tipo de rosa) y te aparecerá el código de ese color más abajo. Copia ese código y colócalo en la casilla que hemos indicado.

Paso 4: ¡Ya casi estamos!

Una vez rellenados todos los campos, pulsamos el botón de Calculate para generar nuestro código.

Copiamos este código en un gadget de HTML en nuestro blog y nos aparecerá la barra de porcentaje con nuestro proceso en el Reto. Podemos poner en este gadget también una imagen o un banner para acompañar a la barra. Por ejemplo:

Paso 5: Modificándolo al gusto

Al copiar el código de la barra, las palabras que nos aparezcan debajo de ésta estarán en inglés. Podéis eliminarlas o cambiarlas a vuestro gusto abriendo el gadget y editando las palabras señaladas en esta imagen:



¡Y ya está! Ahora ya tenéis vuestra barra de porcentaje a vuestro gusto y perfecta para vuestro blog. Por ejemplo:


Espero que hayáis disfrutado y que este tutorial os haya sido útil. ¡A por esas barras que se resisten!

Muchas gracias.

35 comentarios:

  1. ¡muchísimas gracias! me pareció un tutorial muy sencillo de seguir =)

    ResponderEliminar
  2. ¡Hola!

    Yo este método lo conocía, es el que suelo usar, pero igualmente muchas gracias por enseñarlo, me hubiera hecho falta a mi en su momento, así que agradezco que lo pongas para la gente, que como yo en su momento, no sepa hacerlo.

    Por cierto, ¿has visto que hay algunos que ponen la barra de porcentaje y se ve parte del libro? Porque me enamoré de eso que lo vi en un blog para poner el libro que estás leyendo *__* Pero no he sabido como ponerlo y bueno no recuerdo ni en el blog que lo vi xD Si sabes algo ¡Avisa! Estaría encantada de la vida de saber como se hace :)

    Besitos!

    ResponderEliminar
  3. ¡Muchas gracias por el tutorial! Yo sabía lo básico, pero desconocía el Paso 5, así que, de nuevo, gracias :)

    Besitos everywhere~

    ResponderEliminar
  4. Muchísimas gracias!!! Me ha venido geenial!
    Besotes

    ResponderEliminar
  5. Muchisimas graciaas!! Lo pongo ahora mismo;))

    ResponderEliminar
  6. Yo el año pasado lo hice así, pero iba borrando todo el código cada vez y lo ponía todo nuevo :)
    Graciaaaaas!

    besitos<3

    ResponderEliminar
  7. Me parece muy útil. Yo llevo reciclando las barras desde la primera vez que las hice.
    ¡Besos!

    ResponderEliminar
  8. Hola está muy bien el tutorial! Yo ya lo sabía pero al principio no tenía ni idea de donde se conseguían.. así que a muchos les servirá =)

    Besitos!

    ResponderEliminar
  9. ME HA SERVIDO DE MUCHO!!!! MUCHAS GRACIAS!!!!

    ResponderEliminar
  10. Gracias por el tutorial, para las que empezamos, es un alivio ir descubriendo cosas nuevas para ir poco a poco mejorando el blog.
    Besitos

    ResponderEliminar
  11. Yo encontré un tutorial muy parecido a este y me vino muy bien, puse por primera vez una barra de esta en i blog personal, esta chulo ^^

    ResponderEliminar
  12. Aunque este año no me he apuntado a ningún reto, me parece muy interesante. Lo de la barra ya lo controlaba, pero lo del color no había manera de cambiarlo. Me encantan los tutoriales, el próximo cómo hacer un banner, que no tengo ni idea.

    ResponderEliminar
  13. ¡Muchas gracias por el tutorial! :D
    Muy sencillo, fácil de seguir haha
    Besitos<3

    ResponderEliminar
  14. ¡Hola guapa!
    Muchas gracias por el tutorial ^^
    ¿podrías hacer uno sobre como hacer un slider? Es que hace tiempo que quiero ponerlo en mi blog pero no sé como hacerlo :S
    ¡Besos!

    ResponderEliminar
  15. Muchaas gracias por el tutoriaal me ha encantadoo,muy facil, porque queria ponerlos en mi blog,asi que gracias a ti ya lo he conseguido,aunque lo hize separada de su foto,que en parte me gusta mas,tb pero las 2 fotos seguidas,foto del reto 1º y debajo la barra, q es enrealidad como es,pero yo los hize x separado,q me parece q es mejor,aunque en realidad no supe como ponerlos juntos,pero bueno,prefiero q sea asi ;) jeje besitos y graciaas

    ResponderEliminar
  16. muchas gracias por el tutorial! acabo de inaugurar mi blog y me voy a apuntar al reto de las 13000 pags! lo único que no sé es cómo poner la imagen/banner del reto con el enlace a tu entrada :S la verdad es que me gustaría ponerlo! :)

    ResponderEliminar
  17. ¡Muchas gracias por el tutorial! :)

    ResponderEliminar
  18. A mí es que pincho en la página web donde dices pero de repente e me va a otra página donde hay publicidad. ¿Sabes lo que tengo que hacer?

    ResponderEliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  20. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  21. ¡Hola! Muchas gracias, me ayudo mucho.
    Oye, soy nueva aquí en el mundo de blogger y quería saber como hacer un banner, ¿podrías hacer un tutorial sobre eso?
    Gracias, besos!

    ResponderEliminar
  22. A mi no me sale, relleno todos los campos, pero cuando pongo calcular N A D A. Ayudame please

    ResponderEliminar
  23. a mi tampoco... la linea no puedo cortarla y se ve tremenda
    =(

    ResponderEliminar
  24. A mi tampoco me sale. Me pone que el banner no es correcto.

    ResponderEliminar
  25. Muchísimas gracias! Nos has ayudado un montón a mi compañera y a mí.
    Besos!

    ResponderEliminar
  26. Hola, estoy haciendo un reto literario para este 2015 y me pareció muy fácil la forma en que explicaron todo asi que las mencioné en mi entrada, aquí el link si quieren revisarlo.

    http://panquequelife.blogspot.com/2015/01/reto-literario-panqueque-2015-participa.html

    ResponderEliminar
  27. Siempre quise saber cómo se hacía esto de forma fiable, muchísimas gracias!!

    ResponderEliminar
  28. como se le pone el banner? :*n* ya hice lo de la barra pero no se como ponerle la imagen help meee

    ResponderEliminar
  29. ¡¡Me salvaste!! llevo dos días buscando gadgets de este estilo para mi nuevo blog y pregunté hasta por grupos y nadie me dijo nada. Y hoy de casualidad di con esta entrada. Gracias por el tutorial :)

    ResponderEliminar
  30. Muchas gracias, no sabia como hacerlo, ahora ya soy feliz.

    ResponderEliminar

Cuando dejas un comentario, me alegras el día. ¡Gracias!

Los comentarios que contengan spam o sean abusivos serán eliminados.