Tutorial| Como colocar una barra de avance en tu blog.

¡Hola lectores!, ¿Como están?

ESpero que muy bien, hoy voy a mostrarles como poner una barra de avance en su blog, espero que les sea útil.

Esto sirve principalmente para cuando tenemos alguna especie de reto literario, aunque claro que cada quien le dará el uso que prefiera.

Una cosa que es importante aclarar es que deberán actualizar la barra de avance cada vez que tengan un logro nuevo, por ejemplo, este año estoy en el reto Bingo Literario y cada vez que leo un libro mas para este debo de actualizar la barra.

Dicho esto empecemos.

1. Lo primero que debes hacer es entrar esta pagina web: http://www.languageisavirus.com/nanowrimo/word-meter.php#.WQ40etI1_IU

2. Una vez allí te encontraras con esto:

3. Ahora es muy sencillo, en el primer rectángulo debes de escribir la cantidad que llevas de lo que consista el reto (por ejemplo palabras leídas, libros, etc.).

En el segundo debemos poner el total y en el ultimo rectángulo se nos permite elegir el color que va a tener nuestra barra.

Por ejemplo: yo he leído 12 libros de los 35 exigidos para el reto, por lo tanto en el primer rectángulo pondré el numero 12, en el segundo el 35 y en el tercero elegiré el color que prefiera (en mi caso el violeta)

4. Una vez establecidas nuestras preferencias le damos al botón "Calculate" y a continuación se nos dará un código el cual debemos copiar.

5. En nuestro blog vamos a Ajustes > Diseño.

6. Una vez aquí damos click al botón que dice Añadir un gadget, para este se nos darán varias opciones, nosotros debemos elegir el que dice HTML/Javascript, en el pegamos el código que habíamos copiado.

8. Solo queda hacer algo mas, debemos personalizar el código para que sea adecuado a nuestro blog:

<a href="http://www.languageisavirus.com/nanowrimo/word-meter.php" target="_blank" title="NaNoWriMo writing toys games & gadgets"><div style="width:200px;height:15px;background:#FFFFFF;border:1px solid #000000;"><div style="width:34%;height:15px;background:#0033FF;font-size:8px;line-height:8px;"><br></div></div></a>12 / 35 words. 34% done!

Aquí tenemos el código que la pagina web nos da, lo subrayado en rosa podemos cambiarlo según la temática del reto, en mi caso no eran palabras sino libros leídos y por esto cambie la palabra words por la palabra libros.

En cuanto a la palabra done podemos colocar aquí lo que queramos, yo lo cambie por Bien hecho!

Ademas pueden cambiar su largo simplemente cambiando el numero que aparece.

Aquí les muestro como queda mi código después de darle esos toquecitos:

<a href="http://www.languageisavirus.com/nanowrimo/word-meter.php" target="_blank" title="NaNoWriMo writing toys games & gadgets"><div style="width:135px;height:15px;background:#FFFFFF;border:1px solid #000000;"><div style="width:34%;height:15px;background:#6600CC;font-size:8px;line-height:8px;"><br /></div></div></a>12 / 35 libros. 34% Bien hecho!

¡Y listo! Ya tienen su barra de avance, coloquenla donde les guste y los que visiten su blog podrán ver que tal llevan su reto. 😄

Espero que les haya gustado, ¿Que opinan?, ¿Creen que las barras de avance son útiles?, déjenme su opinión en los comentarios.