√ Reproductor de subir y bajar para Blogger

Son muchos los tutoriales que se ven en Internet acerca de como instalar botones de subir y bajar en el blog, pero ninguno de como reproducir el blog poco a poco. Con este tutorial veremos como colocar un reproductor para subir y bajar lentamente con opción de parar a su antojo.

Este reproductor es imprescindible para aquellas personas que tengan un blog muy extenso con muchas entradas en la página principal, o tengan muchos comentarios en cada post, es una solución muy eficaz para que tus usuarios puedan moverse con más rapidez sin tener que usar la barra de desplazamiento del navegador.

VER DEMO

Como colocar el reproductor en el blog:

Primero, vamos a ''Diseño/Elementos de la página'' Gadget:

Buscamos ''HTML/Javascript'':

En donde pegaremos el siguiente código:

<style>
#control-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#control-scroll a{display:block;float:left;background-color:#5C5B5B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeTH-LPZQWwO9HhszwB6uFYah0l3w-MhYBeWGIGXWD3FnG4toCUr0QMBtyMJ3yd8qPc5_CUK0UsS6wGN-uUyCHBJX3yXVfzdtymI0hvzSx4UPOgtkWecfsbJoO1Nfl1BDZFafdFgzHO0/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#control-scroll a.principio{background-position:0 -36px}
#control-scroll a.ir-arriba{background-position:0 -72px}
#control-scroll a.final{background-position:0 -108px}
#control-scroll a.control-scroll{background-position:0 -144px}
#control-scroll a.control-stop{background-position:0 -180px}
#control-scroll a:hover{background-color:#cccccc}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='control-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='Principio página'></a>
<a class='principio' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Reproducir arriba'></a>
<a class='ir-arriba' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Reproducir abajo'></a>
<a class='final' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='Final página'></a>
<a class='control-scroll' href='javascript:autoScroll();' rel='nofollow' title='Reproducir'></a>
<a class='control-stop' href='javascript:stopScroll();' rel='nofollow' title='Parar'></a>
</div>

Guardamos los cambios y listo:

Configurar color del reproductor:
Para cambiar el color del reproductor tan solo hay que modificar lo rojo del código por el color deseado por vosotros. Podéis usar esta Tabla de Colores para definir el color de vuestro reproductor.

De todas formas, si lo queréis hacer más fácil, podéis añadirlo automáticamente clikeando en la imagen de abajo y añadiéndolo directamente a vuestros blog.

Como siempre digo, si tenéis algún problema......."comentad" y seréis atendidos amablemente.