Tutorial Blogger: Como poner una barra de Progreso



¿Quieres poner una barra de progreso para tus retos? acá te explico como hacerlo, antes que nada, tienes que entrar a esta página  se  llama language is a virus que te facilita la posibilidad de poner una barra de progreso en tu blogger es sencillo como hacerlo y a continuación les explico como Hacerlo:

Al hacer clic en la página solo tienen que bajar a la página y encontrarán algo como esto:
La primera opción tienen que poner el número de libros o cosas que ya han hecho y a bajo el total de lo que van a hacer, por ejemplo: yo ya he leído 12 libros de los 20 que me propuse leer este año, también hay la opción de cambiar esa barra azul predeterminada anodina por otro color y ya hecho todo eso le ponemos Calcular y le saldrá algo como esto:


<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:60%;height:15px;background:#d0acbb;font-size:8px;line-height:8px;"><br></div></div></a>12 / 20 words. 60% done!
lo que esta en rosita podemos cambiar por lo que nosotros queramos.

<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:60%;height:15px;background:#d0acbb;font-size:8px;line-height:8px;"><br></div></div></a>12 / 20 libros  60% Conseguidos!

Ese html lo ponemos en un gadget en diseño, en una página o incluso en una entrada:


Si yo quisiera agregar una imagen quedaría más o menos así:


<Center><img border="0" data-original-height="70" data-original-width="280" src="https://4.bp.blogspot.com/-GmcegiRmetE/WUgYX1lQNCI/AAAAAAAAAOY/eV8dANyf-60cUXvrbUbbuKDlSZ1omT6TwCPcBGAYYCw/s1600/rese%25C3%25B1aslibros2017.png" /></div>
<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:60%;height:15px;background:#d0acbb;font-size:8px;line-height:8px;"><br></div></div></a>12 / 20 libros  60% Conseguidos!</Center>


Probando:


12 / 20 libros 60% Conseguidos!

Y ya es todoooooo!! pero si quieres algun color bonito les dejo los siguientes colores:


      
#d0acbb          #f06273        #f7cd3d       #7c0087       #ffb8e7        #ffb8b8         #b8dbff

  
#b8fffb            #3cc8c9


Si te gusto esta entrada comparte!





No hay comentarios.:

Publicar un comentario