A+
A-
Scroll tanto por ciento

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 ]]></b:skin> (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: <body>, pega este div que hará la llamada.

<div id='scroll'/></div>

Y por último encima de: </body>, pega este script.

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</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

4 comentarios Google+ 4 Facebook

  1. Me encanta, veo que tenéis un poco de todo, hasta tutoriales para nuestros blogs.

    ResponderEliminar
  2. It looks great. Thank you

    ResponderEliminar

Nos puedes dejar un comentario, una opinión, o tu experiencia sobre este artículo. Queremos que participes, porque aquí tú eres el protagonista.


 
2013 - 2018 Te interesa saber



Política de privacidad




TiS, con tecnología Responsive Web Design y Blogger

Ir a inicio