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, etc...

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

Comentarios

BLOGGER: 4
Cargando...


En algunos artículos se irá añadiendo texto y/o vídeos según creamos conveniente, para una mayor ilustración de los mismos.

Si encuentras un error de sintaxis, redacción u ortográfico en el artículo, vídeos que dejaron de funcionar, etc... háznoslo saber a través de " Contacto". ¡Muchas gracias!

Si te gustó este artículo, síguenos y entérate de más a través de nuestros canales de Facebook, Twitter, Google+ y Telegram.

Misterio$type=left$va=1$count=3

Religión$type=right$va=1$count=3

/fa-tag/ Sucesos$type=one$count=3

/fa-youtube-square/ Vídeos recomendados


Humanoides en Bases Militares Españolas

Enlace: Ovnis

Mito y realidad de la brujería (Brujas)

Enlace: El origen de las brujas, podría ser anterior al ser humano

/fa-youtube-square/ Tu vídeo favorito, o el suyo.


Madonna - Like A Prayer

Dinos tu vídeo favorito a través de " Petición de vídeos" y lo pondremos (sólo de YouTube - Vevo).

Dedícaselo a él o a ella: Dinos tu nombre y a la persona que se lo quieres dedicar (Aniversarios, cumpleaños, felicitaciónes, etc...) y lo haremos visible durante una semana o hasta la siguiente petición.

... Aquí tú dedicatoria...
Nombre

2012,9,3 dimensiones,6,A. Edison,2,A.Turing,2,Abducción,3,Abejas,3,AC-DC,3,Adán y Eva,2,ADN,2,Agua,65,Águilas,4,Air Force One,2,Ajedrez,2,Al Capone,2,Alimentación,42,Alquimia,4,Amor,50,Amuleto/Talismán,2,Anarquismo,2,Ángeles,6,Animales,144,Anonymous,3,Antártida,2,Apocalipsis,3,Apple,10,Arañas,4,Argentina,13,Armagedón,2,Armas,18,Artes marciales,7,Asteroides,13,Atlántida,3,Audio,44,Audio libros,23,Aviones,47,Ballenas,2,Banderas,6,Barbie,3,Barcos,22,Beatles,8,Bebidas,30,Biblia,16,Bicicletas,8,Big Bang,5,Bluetooth,2,Boxeo,3,Britney Spears,2,Brujería,4,Burgos,39,C. Colón,4,Caballos,4,Café,3,Calculadoras,3,Calendario,11,Camiones,3,Cáncer,5,Cárceles,3,Casino,2,Castillos,8,Castrati,2,Cern,4,Cerveza,5,Charlot,3,Chat,3,Che,3,China,25,Ciencia,306,Cine,100,Circo,5,Citröen,3,Cleopatra,2,Clima,21,Clima (Burgos) - Horario mundial,1,Coca cola,2,Códice,5,Código,9,Código abierto,5,Cometas,6,Cómic,7,Concorde,2,Continentes,4,Copla,2,Cuba,3,Cuerpo de élite,3,Cuerpo humano,102,Culturas urbanas,3,Curiosidades,1073,Curiosity Rover,1,Da Vinci,6,Delfines,3,Delorean DMC - 12,2,Deportes,50,Día D,2,Diablo,9,Dibujos,34,Discos,4,Disney,17,Documentales,263,Doodle,2,Dragones,2,Drogas,6,Drones,2,Ébola,2,Eclipses,3,Edad Media,9,EE.UU.,109,Egipto,27,Einstein,3,El Cid,5,El Jarabo,2,El Lute,1,Elvis,3,En directo,5,Energía,48,Enfermedad,40,Enseñanza,177,Esclavitud,2,Escorpiones,2,Espadas,2,España y Pueblos,230,Estrellas,13,Exorcismo,6,Fantasmas,8,Ferrari,5,Física,33,Flamenco,2,Fobias,3,Ford,3,Formula 1,2,Fotografía,26,Francia,11,Franco,11,Francotiradores,3,Frases/Dichos,10,Freddie Mercury,3,Fuego,9,Fútbol,23,Galileo,4,Gandhi,2,Gastronomía,5,Gigantismo,3,Gitanos,5,Gliese 832,2,Google,18,GPS,4,Groucho Marx,2,Guerra,75,Guinness,8,Guitarras,5,H.Davidson,2,Hackers,14,Halloween,3,Hilo rojo,2,Hippie,2,Historia,634,Hitler,14,Homosexualidad,3,Humor,57,Huracanes,3,Idiomas,7,Imprenta,4,Indígenas,4,Indios,6,Informática,112,Insectos,11,Internet,66,Inventos,181,Invidente,5,Italia,14,Jabón,3,Jackson,9,Japón,19,Jesucristo,12,John Lennon,3,Juegos,31,Juegos en línea,24,Juegos olímpicos,5,Juguete,10,Kennedy,2,La rueda,1,Lady Di,2,Las fuerzas del planeta (Serie),5,Láser,3,Leyendas,106,Libros,34,Lotería,2,Luis Lucena,2,Luna,19,Mafia,7,Magia,9,Magnetismo,16,Manuscrito Voynich,2,Máquina del tiempo,2,Maradona,4,Maratón,2,Marie Curie,2,Marilyn Monroe,3,Masonería,3,Mayas,8,McDonald's,3,Medidor,1,México,28,Mi pedazo de cielo,1,Mickey,2,Mike Tyson,2,Misterio,247,Mitologías,2,Moda,12,Mona Lisa,2,Monarca,4,Monedas,8,Monopoly,2,Mosquitos,2,Motor,63,Motor de agua,2,Motos,8,Mozart,2,Muñecas,7,Museo,7,Música,135,Nachito,2,Napoleón,2,Nasa,14,Navarra,4,Navidad,28,Nintendo,4,Nostradamus,3,Noticias,255,Notre Dame,2,Nuclear,17,Obesidad,3,Ouija,2,Ovnis,31,Pamplona,2,Papa,6,Papá Noel,2,Pegamento,2,Pendrive,3,Península Ibérica,2,Perfumes,2,Perros,18,Personas,465,Petróleo,2,Piedras preciosas,2,Pinocho,2,Pintura,14,Pirámides,4,Piratas,6,Pirotecnia,3,Plantas,24,Pokémon Go,2,Polígrafo,2,Poltergeist,2,Profecías,10,Psicofonía,2,Queen,5,Quijote,2,Química,8,Radio,14,Ranas,2,Recordando a,192,Reencarnación,3,Reggae,2,Religión,130,Relojes,17,Resaca,2,Reyes magos,5,Rock,7,Roma,32,Rosetta,2,Rusia,24,Sabías que,1678,Salud,159,San Valentín,2,Seducción,3,Semana Santa,4,SETI,3,Shakira,2,SIDA,6,Simpson,3,Sistema solar,14,Sol,35,Spam,3,Submarino,4,Sucesos,64,Sueños,20,Sugerencias,37,Symbian,33,Tabaco,3,Tatuajes,5,Tecnología,279,Ted Williams,2,Telefonía,59,Telescopios,5,Televisión,18,Templarios,3,Teresa de Calcuta,2,Terremotos,13,Test,4,Tetris,2,Tiburones,11,Tierra,111,Titanic,11,Toros,5,Torre Eiffel,2,Torres gemelas,2,Trenes,11,Triángulo de las Bermudas,4,Trucos,4,Tutankamón,4,Tutorial,13,Universo,118,Vacunas,3,Varios,94,Vídeo,683,Videojuegos,5,Vino,2,Virus,6,Virus informáticos,15,Vril,2,Whisky,2,Windows,6,YouTube,6,Zodiaco,4,Zombis,3,
ltr
item
Te interesa saber: Letrero flotante que muestra el tanto por ciento, al subir y bajar (scroll) la página
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, etc...
http://1.bp.blogspot.com/-AaXdAFR-66c/VppeX3iZXZI/AAAAAAAAKVs/_KuhKyi9UKg/s1600/scroll-tanto-por-ciento.jpg
http://1.bp.blogspot.com/-AaXdAFR-66c/VppeX3iZXZI/AAAAAAAAKVs/_KuhKyi9UKg/s72-c/scroll-tanto-por-ciento.jpg
Te interesa saber
http://www.teinteresasaber.com/2014/08/letrero-flotante-que-muestra-el-tanto.html
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/2014/08/letrero-flotante-que-muestra-el-tanto.html
true
637010643059257927
UTF-8
Cargar todos los artículos No se ha encontrado Ver más Seguir leyendo... Responder Cancelar respuesta Borrar Por Inicio Páginas Artículos Ver más Recomendados para ti: Etiqueta Archivo Buscar Todos los artículos No se encontró nada con este término Volver a Inicio Domingo Lunes Martes Miércoles Jueves Viernes Sábado Domingo Lunes Martes Miércoles Jueves Viernes Sábado Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre justo ahora hace 1 minuto hace $$1$$ minutos hace 1 hora hace $$1$$ horas Ayer hace $$1$$ días hace $$1$$ semanas hace más de 5 semanas Seguidores Seguir Este contenido es premium Compartir para desbloquear Copie todo el código Seleccione todo el código Todos los códigos se copiaron en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy