Progreso al bajar página - Te interesa saber

Barra de progreso que aumenta o disminuye al hacer scroll - jQuery

Una de las tendencias actuales que podemos ver actualmente en varias webs es la de indicar a través de una barra de progreso en la parte superior lo que lleva leído el usuario.

Lo podemos ver en distintas webs y hemos decidido hacer un tutorial de cómo implementarlo.

Si os fijáis a medida que hacemos scroll dentro de una página (lo podéis apreciar aquí mismo), aparece un indicador o barra de progreso en la parte superior que nos está orientando de modo visual lo que llevamos leído.

Desde Te interesa saber siempre nos ha gustado este tipo de recursos que apenas se nota en el código de nuestra plantilla, además de ser 100% responsive.

Para implementarlo os vamos a dar su código completo y el lugar en el que tenéis que ponerlo. El código es bastante reducido y desde luego que de ninguna manera ralentizará la carga de vuestra web.

Para ello simplemente tenéis que seguir los pasos que os damos a continuación.

Sugerencia: Para encontrar rápidamente un código o texto, en la plantilla, pulsa Ctrl+F o ?-F (Mac) y utiliza la barra de búsqueda.

Buscamos la etiqueta: y justo encima de ella pegamos este script:

Ahora buscamos:

Letrero flotante que muestra el tanto por ciento, al subir y bajar (scroll) la página

Scroll o ventana flotante que nos muestra el tanto por ciento que nos queda de página, tanto al subir o bajar en ella. Fácil de implantar, así como vistosa e informativa.

Comencemos:

Entra en la plantilla, busca ]]> (Control+F), y arriba de ello pega estos estilos (CSS):

#scroll {
display: none;
position: fixed;
top: 0;
right: 9px;
z-index: 500;
padding:2px 3px 4px 3px;
font-family: arial;
font-size: 12px;
background-color: #6495ed;
color: #fff;
border-radius: 2px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #6495ed;
}

Ahora debajo de: , pega este div que hará la llamada.

Y por último encima de: , pega este script.

Si quieres modificar a tu gusto el color de fondo y/o también el color de los números, puedes hacerlo cambiando los códigos marcados en azul (tabla de colores).

Una vez implantados los códigos haz vista previa y si todo funciona según lo esperado, puedes guardar plantilla.

Importante: antes de hacer cualquier modificación en tu plantilla haz una copia de la misma, por si surge cualquier problema que podamos restaurarla.

Algunas características:
* No afecta la velocidad de carga de tu blog.
* Compatible con distintos navegadores (Chrome, Firefox, Safari, IE, Opera, etc, etc).
* Da un estilo muy personal a tu blog.

Modificación y personalización: Pedro PC