domingo, 2 de abril de 2017

Tutorial # 2 ¿Cómo coloco una barrita de progreso?

¡Hola amigos de blogger! Espero estén muy bien, el día de hoy les traigo un tutorial de lo más sencillito pero que a mi me gusta mucho para llevar un recuento de mis lecturas a través del año. ¡Si! se trata de como colocar una barrita de progreso que bien puede ser para llevar un recuento de tus lecturas en un determinado tiempo, un recuento de un determinado número de páginas que quieras leer, o cualquier otra cosa que quieras ir contando. 

¡Dale a seguir leyendo para conocer el tutorial!
Seguro que muchos de ustedes así como yo, luego de entrar al mundo Blogger han querido apuntarse a retos, iniciativas de lectura, y quizá tal vez, como yo, tienen una vida un tanto ajetreada bien sea por estudios, trabajo, actividades extracurriculares, en fin.. Otras cosas que les dificulta estar al día con un número exacto de libros / páginas que llevan al momento y que si nos ponemos a ver suele ser un poquito confuso - bueno, discúlpenme por aquí las personas con memoria maravillosa, yo soy una olvidadiza y necesito de estas cosas para llevar una cuenta exacta - el caso es que, este tutorial te sirve para colocar en tu blog una barrita como esta:
Que va a medir nuestro progreso en el reto que tengamos apuntado, yo por ejemplo, tengo el reto de leer 50 libros este año y para el momento llevo 7 lo que representa un 14% -vamos como lento en el reto pero seguro - así que lo que vamos a hacer es lo siguiente: 

1- Lo primero que vamos a hacer es ingresar a esta página:

http://www.languageisavirus.com/nanowrimo/word-meter.php#.WMxzFtLhBdg

dónde nos vamos a encontrar con esto: 
Nos vamos a enfocar en la segunda imagen, en esa parte de la página que tiene todos los campos que necesitamos rellenar para crear nuestro cuadrito de progreso.

Si no se te da bien el ingles te explico lo que dice y lo que vamos a ir haciendo: 
El título simplemente dice: Crea el tuyo, luego tenemos la primera barrita que hace referencia a la cuenta actual de palabras (dónde vamos a colocar la cantidad que llevamos, llamese de: Libros, páginas, retos, etc..) La segunda barrita hace referencia a nuestra meta por ejemplo -50 libros, 5000 páginas, 10 retos etc- y la tercera barrita es dónde seleccionamos el color que queremos que tenga nuestra barra de progreso, justo abajo hay un link naranja que dice "Escoge un color para tu contador de palabras" así que vamos a comenzar. 

2- En la primera barrita vamos a proceder a colocar como les comenté arriba la cuenta actual que llevamos, por ejemplo si ven la primera imagen de mi barra de progreso, en este momento yo pondría el número 7, pues son las lecturas que llevo hasta el momento, pero si ustedes apenas van a comenzar pondrían 0.

3- En la siguiente barrita pondrían su meta, volviendo al ejemplo de mi barrita, yo pondría 50 pues esa es mi meta, pero ustedes por supuesto la modifican a su gusto  -50 libros, 5000 páginas, 10 retos etc-

4- En la siguiente le van a dar click al link naranja y les saldrá un cuadrito con las opciones de colores que tiene la página y ustedes escogerán el que mas les guste y que quieran que tenga su barra. 

5- Le dan ahora a dónde dice "Calculate" y les colocaré una foto de un ejemplo para que comprendan como haremos a continuación pues se acerca la parte fastidiosa. 


En el ejemplo pueden ver como rellené las barras, le dí a "Calculate" y lo de abajo es el resultado, tenemos una muestra de como se va a ver la barrita en el blog, y nos hace referencia a que ya esta listo el contador, luego dice "Copie y pegue el código dónde quieras tu contador para que aparezca en tu página web o tu blog", pueden ver el código, como yo saben personalmente veo esos códigos y ya siento que algo me saldrá mal, porque no entiendo de estas cosas, pero ahí vamos poco a poco. Pueden observar que sombreé en turquesa dos palabras, eso es porque no me gusta que salga de esa manera en mi blog, si no que quiero que diga "7/50 libros. 14% Listo" en vez de "7/50 words, 14% done" es una pequeña manera de personalizarlo un poquito. 

¿Que hacemos para modificarlo?
Simplemente le damos click a las palabras, borramos cuidando que lo único que eliminemos sea esa palabra y agregan la de su preferencia en vez de "words" podrían poner "páginas, retos, lecturas" lo que gusten, y luego repiten con la otra palabra para que diga por ejemplo "listo, superado, leído" o como más les guste. 

6 - Ahora si, continuamos entrando a blogger, a nuestra página principal y nos vamos del lado izquierdo a la pestaña que dice "diseño" luego bajan un poco en nuestro diseño le daremos a dónde nos dice "Añadir un gadget" específicamente van a añadir un gadget HTML/Javascript

7- En el cuadrito del gadget que les saldrá le colocan un título que bien puede ser "Mis lecturas, mis retos, mi progreso" como más gusten, y en la parte de abajo, van a pegar el código que les dio la página y luego le dan a guardar.

8- Se van a de nuevo a la parte de diseño y ahí juegan en la posición en la que les gustaría que se mostrara su barrita, luego vuelven a guardar y se van a ver su blog y a ver que tal quedó. 

9- Si no les gustó el color, fácilmente, vuelven a la página y repiten el proceso escogiendo un color diferente.

¡Eso es todo!

¿Les gustó? ¿Lo pondrían en su blog? Yo encontré esto por curiosa en internet y la verdad es que me gustó muchísimo y me parece super fácil de modificar, y me encanta para mi blog. ¡Cuéntenme que tal por los comentarios! 

25 comentarios:

  1. Hola!!
    Una entrada muy útil e interesante.
    Un saludo :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegra que te pareciera interesante ¡Gracias por el comentario!

      Eliminar
  2. ¡Hola guapa!
    Muchísimas gracias por el tutorial :D Creo que para los bloggers de libros nos viene muy muy bien!!
    Lo pondré en practica cuando me proponga un reto de lectura!!

    Besitos <3

    ResponderEliminar
    Respuestas
    1. ¡Hola Loles! Me alegra que te gustara ya me pasaré por tu blog para ver que tal ¡Besitos!

      Eliminar
  3. ¡Hola! Me encantan este tipo de entradas porque yo soy un poquito torpe para estas cosas y siempre me lleva un montón de tiempo enterarme de qué tengo que hacer así que este tutorial me vendrá genial. ¡Muchas gracias!
    Me quedo por tu blog y, como yo también tengo uno, si te apetece pasarte te invito a hacerlo. Un saludo :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me alegra mucho que te sea de utilidad, en breve me paso por tu blog, gracias por dejar un comentario ¡Nos leemos!

      Eliminar
  4. Hola!!
    vei muchas veces esto y siempre me preguntaba ¿Cómo harán? yo también quería y ahora tengo el tutorial ¡Bien! :), espero ponerlo en practica pronto... Gracias.
    Besos.

    ResponderEliminar
    Respuestas
    1. ¡Holaa! Que bueno que te sea útil ¡Besitos!

      Eliminar

  5. hola, esta muy útil eso si es verdad, así que si algún día me decido a ponerlo en mi blog, me paso para seguir los pasitos porque son muy fáciles jaja
    besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Angeles! Me alegra que te guste, por aquí seguirá por si decides usarlo ¡Besitos!

      Eliminar
  6. ¡Hola!Wow que tutorial más completo, además bastante útil <3 Aunque de momento mi blog ha petado con tantos apartados xDD
    ¡Un besito ratonil! ♥

    ResponderEliminar
    Respuestas
    1. ¡Hola Maka! Gracias por pasarte y dejar un comentario ¡Besitos!

      Eliminar
  7. Hola guapi!
    Me ha gustado mucho este tutorial, por que ha habido veces que me he quedado pensando en cómo se ponían esas barritas jaja
    Muchas gracias!!
    Un besito :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Sam! Me alegra bastante que te sea de utilidad, gracias por dejar el comentario ¡Besos!

      Eliminar
  8. Pues creo que es un tutorial muy útil. En su mometo yo e volví loca para hacerlo y está genial que nos ayudemos unos a otros para personalizar el blog de manera sencilla. Besos ^^

    ResponderEliminar
  9. Muchas gracias por tu tutorial, la verdad es que estoy pensando en remodelar un poco el blog y me vendrán genial cosas así
    ¡un abrazo enorme!

    ResponderEliminar
  10. ¡Holaa!
    Muchas gracias por el tutorial :D
    Un besote ^^

    ResponderEliminar
  11. ¡Hola!
    ¡No sabía que se podía hacer esto! Creía que la única posibilidad era poner el html que te da goodreads para el reto. ¡Mil gracias por el tutorial!

    ¡Un beso enorme!

    ResponderEliminar
  12. Hola!
    Esta página es genial para las barritas, yo siempre las utilizo :D
    Besos

    ResponderEliminar
  13. Hola, hola...
    Muchas gracias por los tips, los tomare en cuenta.
    Saludos

    ResponderEliminar
  14. Hola!!!

    Fíjate que hace mucho cuando recién comenzaba con mi blog, estaba buscando un tutorial así pero jamas lo encontré, creo que me servirá mucho. Muchas gracias. Saludos.

    ResponderEliminar
  15. Hola guapa, millones de gracias por el tutorial me parece muy interesante, yo uso el reto de goodreads.
    Un beso y muchas gracias otra vez

    ResponderEliminar
  16. Hola!
    Hace mil que me rendí con las barritas xD no son difíciles de colocar pero siempre me olvido cómo colocarlo y modificar el progreso así que voy por el 3/6 o así xD Cuanto más fácil y sencillo mejor :p
    Saludos!

    ResponderEliminar


  17. ¡Hola bonica! Muy buena entrada y sobretodo muy útil por si en algún momento decido hacer un reto literario, porque no tenía ni idea de poner esas barras, pero quedan muy monas.

    Un besazo y gracias por compartir la info. ^^

    ResponderEliminar
  18. Hola!
    Muchas gracias por este tutorial, la verdad es que me va a servir mucho porque nunca he sabido hacerlo por mi misma.

    Saludos!

    ResponderEliminar

¡Hola! Te agradezco mucho por dejar tu opinión, es agradable saber lo que piensas sobre mi entrada.
Si no te respondo por aquí debe ser que estoy algo ocupada pero sin duda he visto tu comentario y si eres nuevo siguiéndome ten por seguro que me pasare por tu blog.
¡Feliz día!