Cómo lo hice: Barra de porcentajes

04 enero 2013

La barra de porcentajes que a parece debajo de las imágenes de los retos y que en varios blogs hay es muy fácil de colocar. Aquí el tutorial:



  • Ahora vamos a modificar los parámetros:



Word Count, que es lo que llevamos/llevaremos de nuestro récord.

Word Goal, es la meta total.

En este caso, yo marqué uno de 13. Le damos Calculate y nos despliega la barra al final de la imagen con el porcentaje. También puedes modificar el color.

  • El siguiente paso es copiar el código que nos despliega en la parte final en una caja.



  • Nos vamos a nuestro querido Diseño dentro de Blogger, agregamos un Artilujio HTML/Javascript y pegamos el código. la cosa aquí es que la leyenda que aparece probablemente no es la que necesitamos pero dándole clic en Formato RTF podemos escribir lo que realmente queremos y darle formato.


Ahora que si no desean estar cambiando a cada momento el código, pueden editarlo ustedes mismos haciendo una muy sencilla regla de tres (de esas de primaria) para sacar el porcentaje de lo que corresponde a su avance y modificar el código en la parte donde dice:

style="width:8%;height:15px;background:#0033FF;font-size:8px;line-height:8px;"><br></div></div></a>1 / 13 words. 8% done!

Del mismo modo que deberán cambiar en la parte de abajo (de la manera escrita) el porcentaje realizado. El primer cambio es para que la barra avance y el segundo para que el texto que ustedes escribieron también cambie y sea coherente.

3 comentarios

  1. Gracias por el tutorial, es muy útil, gracias por compartirlo.

    Un besito guapa :D

    ResponderBorrar
  2. Vaya, no sabía como se hacía. ¡Gracias por enseñarnoslo! :) Un beso.

    ResponderBorrar
  3. Por nada!, así que a poner nuestras barritas para los retos :D

    ResponderBorrar

Gracias por tu madness.

Tu opinión para mí es lo más importante, con respeto y sin SPAM evitaremos que llegue a la moderación de comentarios y/o eliminarlos.

Si quieres ponerte en contacto escríbeme a zsmmblog@gmail.com

SALUDOS, Xo.