ABL | Diseño&Tutoriales: Las barras de progreso

miércoles, 31 de agosto de 2016



¡Hola a todos, buscadores de lápices!

Hoy os traigo una entrada para inaugurar el apartado de Diseño&Tutoriales de la sección Ayuda al Bloguero literario. Como ya sabéis, esta sección está destinada a cubrir todas las dudas que puedan asaltar a un bloguero literario, y muchas de ellas suelen estar relacionadas con el diseño de su blog. Así que, en este caso, os traigo un tutorial sobre las barras de progreso.

A continuación, podéis ver una barra de progreso simple. Es posible que os preguntéis: ¿para qué necesita un bloguero literario esto? Pues voy a explicároslo. 

3/10 libros leídos

Dentro de la comunidad literaria es muy habitual –casi todo el mundo participa en ello– el apuntarse a retos de lectura, ya sea para acabar el año con un determinado número de páginas leídas o de libros leídos. Incluso son muy populares los retos temáticos, en los que es necesario leer 15 libros, por ejemplo, para completarlos pero dichas novelas deben cumplir algunos requisitos: uno con la portada azul, otro en el que haya un personaje misterioso o que sea de género fantástico...

El caso es que son muchos los que hacen uso de las barras de progreso para que sus seguidores puedan ver de una forma muy visual los avances que están llevando acabo en dichos retos.

Habitualmente se colocan debajo del banner o imagen de ese reto en concreto. En ¿Dónde está de lápiz? podéis encontrar los retos en los que participo en la columna derecha, haciendo click en el título de "Desafíos", de modo que se desplegarán las imágenes con las barras de progreso de todos los retos en los que participo.

Antes de nada, tenéis que saber que la actualización de las mismas es manual. Es decir, cada vez realicéis avances, tendréis que modificarlo. Pero no os preocupéis, porque vais a ver que es muy sencillo.

Si queréis hacer uso de este útil recurso en vuestro blog, estad muy atentos, ¡empezamos con el tutorial!




PASOS

Empezaremos con una barra de progreso simple, de modo que estudiaremos su código y aprenderemos cómo modificarlo. Una vez aclarado el uso del código HTML de la barra, veremos otros estilos muy diversos entre los que podréis escoger la que más os guste.


6/10 libros leídos

<div style="width:200px; height:13px; padding:0px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:0px;"> <div style="width:60%; height:13px; background:#f18e45;"> </div> </div> <center>6/10 libros leídos</center>


¿QUÉ SIGNIFICAN LOS CÓDIGOS?

Este código está agrupado en tres bloques:

1. <div style=" "> </div> 
Es el primer grupo de código, que haría referencia al recuadro gris de la barra de progreso.

2. <div style=" "> </div> (el siguiente)
Este código está dentro del primer bloque, de modo que sería un grupo de código dentro del principal. En este apartado vamos a modificar la barrita de progreso del interior del recuadro.

3. <center> </center>
Aquí lo único que hay que modificar es el texto, al gusto de cada uno.



Voy a explicaros el significado de cada código para que sepáis aquellos que podéis modificar, el resto del código hay que dejarlo exactamente como está.

1) width: 200px y height:13px
Estos valores hacen referencia al ancho y al alto, respectivamente, del recuadro de la barra de progreso. De modo que si alteramos sus números, obtendremos diferentes tamaños de anchura y altura.
Si os fijáis, existen dos códigos "height:13px", que deben tener el mismo valor. Así que si cambiamos el número del primero, deberemos poner el mismo en el segundo.

2) width: 60%
Este valor establece la longitud de la barra de progreso (naranja), será lo único que tendremos que actualizar constantemente según vayamos avanzando  en el reto. De modo que si tenemos que leer 10 libros y hemos leído 2, el valor que le daremos será del 20%, es el porcentaje que llevamos completado del reto.

3) padding: 0px
Este valor funciona como una especie de relleno que provoca una separación dentro de la barra de progreso. En el ejemplo no se puede apreciar porque, como veis, el valor es 0. Pero a continuación os dejo un ejemplo de cómo quedaría la barra si añadiésemos un 2.


6/10 libros leídos

4) background: #ffffff
Es el color de fondo del recuadro que, aunque se puede modificar al gusto, es recomendable dejarlo tal cual está, que sería de color blanco. Si cambiásemos el color, este sería el resultado:

6/10 libros leídos

5) border: 1px solid #666
Este valor hace referencia al borde del recuadro, si cambiamos el número, el borde será más o menos grueso. Por otro lado, "solid" es la forma del borde, pero existen otras por las que podemos sustituir esta:
- solid: normal.
- dotted: puntos.
- double: doble borde.
- dashed: líneas discontinuas.

El #666 sería el color del borde. Vamos a ver un ejemplo de cómo quedaría el recuadro si elevaramos el grosor a 2px, aplicásemos el estilo "dashed" y además modificásemos el color.

6/10 libros leídos

6) margin: auto
Este código sirve para que la barra de progreso quede centrada de forma automática. Así que esto no lo tocaremos.

7) border-radius: 0px
Con este valor vamos a curvar las esquinas del recuadro. En el ejemplo, este valor tiene "0px", por lo que no tendrá bordes redondeados. Sin embargo, esto es lo que sucede si lo sustituimos por 3px.



6/10 libros leídos


8) background: #f18e45
Este es el color de la barra de progreso, en este caso es un tono naranja.

9) 6/11 libros leídos
Este es el texto que cambiaremos según nuestros intereses y que también tendremos que modificar constantemente junto con el "width: %".



Ahora ya podéis modificar los recuadros según vuestros gustos. Sin embargo, a continuación os dejo unos cuantos ejemplos de diferentes diseños de barras de progreso con sus respectivos códigos, por si sólo queréis copiarlos y pegarlos en un gadget HTML y retocar los dos valores que hay que actualizar.


SIMPLE

6/10 libros leídos

CÓDIGO HTML
<div style="width:200px; height:13px; padding:0px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:0px;"> <div style="width:60%; height:13px; background:#94e0f0;"> </div> </div> <center>6/10 libros leídos</center>


SIMPLE (con padding)

6/10 libros leídos

CÓDIGO HTML
<div style="width:200px; height:13px; padding:2px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:0px;"> <div style="width:60%; height:13px; background:#e665bd;"> </div> </div> <center>6/10 libros leídos</center>


REDONDEADO

6/10 libros leídos

CÓDIGO HTML
<div style="width:200px; height:13px; padding:0px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:5px;"> <div style="width:60%; height:13px; background:#b0f368;"> </div> </div> <center>6/10 libros leídos</center>


REDONDEADO (con padding)

6/10 libros leídos

CÓDIGO HTML
<div style="width:200px; height:13px; padding:2px; background:#FFFFFF; border:1px solid #666; margin:auto; border-radius:5px;"> <div style="width:60%; height:13px; background:#e9e451;"> </div> </div> <center>6/10 libros leídos</center>


TEXTO EN EL INTERIOR

60%
6/10 libros leídos

CÓDIGO HTML
<div style='width:200px;height:13px;padding:0px;background:#fff;margin:0px auto;border:1px solid #666;border-radius:4px;'><div style='width:60%;height:13px;background:#9f7af3;font-size:9px;line-height:13px;border-radius:4px;text-align:center; color:#4e1dbe;'><b>60%</b></div></div> <center>60/100 libros leídos</center>



¿CÓMO PONGO EL CÓDIGO EN MI BLOG?

Sólo tenéis que copiar el código de la barra de progreso que más os guste y después seguir los siguientes pasos:

1. Ve a Diseño.

2. Añadir gadget.

3. Escoge HTML/Javascript.

4. Una vez ahí pegamos el código, modificamos a nuestro gusto y, si queréis, también podéis añadir la imagen del reto.
* Para subir una imagen sólo tenéis que entrar en esta página, que sirve para alojar imágenes, y una vez allí: seleccionas la imagen y le das a cargar. Una vez cargada la imagen, te saldrán varias opciones, pero debes escoger la de "Dirección HTML para sitios Web". Copias el código y lo pegas encima del código de la barra de progreso.

5. Una vez todo esté como queremos, ponemos el título y damos a guardar.

6. ¡Y listo! Recordad actualizarlo siempre que hagáis avances en vuestro reto.




¿Qué te ha parecido este tutorial? 
Puedes dejar en los comentarios cualquier duda que tengas.
O alguna sugerencia para la siguiente entrada. :)
¡Hasta la próxima!

23 comentarios

  1. ¡Hola! Hacía mucho que quería saber como poner la barra y ahora por fin lo sé! Muchas gracias por el tutorial, me ha servido mucho :)
    Besos

    ResponderEliminar
  2. Hola
    Uy, ya me voy a hacer yo fija en esta sección, ya que es algo que sigo mucho: buscar tutoriales de blogger.
    Así que muchas gracias por esta sección y esperamos muchos tutos que nos hagan la vida más fácil, jeje.
    Besotes.

    ResponderEliminar
  3. ohhh me parece super útil porque no tenía ni idea de como hacerlo pero creo que lo probaré!

    ResponderEliminar
  4. ¡Hola! Es un tutorial muy útil, me lo guardo. Muchas gracias por tu aportación:D

    Saludos desde www.eldesvandelescritor.blogspot.com

    ResponderEliminar
  5. Me encanta este tutorial!! Queremos más, queremos más :)

    ResponderEliminar
  6. ¡Hola!
    Voy a hacerme fan de esta sección, yo lo veo jaja. Llevaba tiempo queriendo poner esta barra pero no encontraba ningún tutorial que sirviera pero el tuyo sí que me ha ayudado. Lo único es que la página para subir las imágenes, no me las acepta. De todas maneras, no es tan importante así que gracias :D

    ¡Besos!

    ResponderEliminar
  7. Gracias por el tutorial, ¡yo ya tengo la mia puesta! un besoo

    ResponderEliminar
  8. Hola!

    La de veces que he buscado un tutorial de estas barritas de progreso, una vez las puse en un reto y me fue muy mal, la verdad es que no lo explicaban muy bien y me hice un lío. Pero es que al verlo en tu blog y todo el tutorial me ha dado muchas ganas de ponerlo en el mío. Me encanta como lo explicas todo, muy detallado, muchas gracias por este tutorial, espero con muchas ganas saber algo más del diseño blogger, con ganas de que publiques más entradas, voy a ver si me sale y lo pongo :D

    Muchos besos!

    ResponderEliminar
  9. ¡Hola! Muchas gracias por el tutorial, ya lo he aplicado al blog.
    Besos🌊

    ResponderEliminar
  10. ¡Hola!
    este tutorial es muy chulo y muy útil! yo de momento no tengo intención de usarlo pero mil gracias por compartirlo con nosotros!!
    voy a ver que tienes en la sección de Ayuda al bloguero literario :D

    graciasss!!
    nos leemos!

    ResponderEliminar
  11. Súper interesante. No sé si en algún momento lo usaré, pero si lo hiciera, de seguro voy a tener en mente tu entrada y volver a ella ^^
    Un besito!

    ResponderEliminar
  12. Hola Alex!!!
    Me encanta que hagas este tipo de entradas porque son muy útiles sobre todo para los que están empezando :D
    Gracias por la entrada!!!
    Nos leemos, besos ^^

    ResponderEliminar
  13. Hola! muy buena entrada y muy bien explicado todo! gracias!!

    ResponderEliminar
  14. ¡Hola!
    Muchas gracias por el tutorial ^^ Todo está claro y haces que ya no lo vea complicado, porque yo siempre me enredo en los códigos :P
    Un abrazo.

    ResponderEliminar
  15. ¡Hola guapisima! Pasa por blogger y tu entrada me ha llamado mucho la atención. En su momento use mucho esas barritas y me traian loca, nunca se ajustaban a lo que yo queria. La verdad es que lo has explicado genial, me guardo esta entrada en mis favoritos por si me hace falta en un futuro. Te lo has currado un montón para enseñarnos como hacerlo, ole y ole tu.

    Un besito!!!

    ResponderEliminar
  16. Hola, me gustaría que hicieras un tutorial de como poner las últimas reseñas (así como en tu blog) ¡Saludos!

    ResponderEliminar
  17. ¡Hola! Muchas gracias por compartir tu sabiduría :D Es genial saber estas cosas. Besos ^^

    ResponderEliminar
  18. Me se de alguien que pronto pondrá dicho tutorial en práctica ^-^ ¡MUCHAS GRACIASSS BONITA! ^-^

    ¡SE MUUY FELIIIIIZ 😊😊💕!

    ResponderEliminar
  19. ¡Hola!
    Un tutorial muy útil y muy bien explicado. Esta sección me encanta, espero que pronto continúes haciendo tutoriales :)

    Un saludo!!

    ResponderEliminar
  20. ¡Buenas! Muy buen tutorial. Por ahora no lo utilizaré, pero sin dudas lo apuntaré ♥
    Un besoo

    ResponderEliminar
  21. ¡Este tutorial estuvo fantástico muchas gracias!

    ResponderEliminar

¿Dónde está mi lápiz? © . Design by Berenica Designs.