En este articulo se super trucos de blogger te mostrare un interesante widget que hara que tus visitantes puedan usarlo mientras dan lectura a una de tus entradas.
Este interesante y animado es un Deslizador Automatico de blogger. El concepto principal de este widget es muy simple.La pagina comienza a desplazarse cuando presionas el boton de play y se detiene el desplazamiento cuando presionas el boton de pausa. La velocidad del deslizadorpuede ser ajustada y te mostrare como hacerlo.La velocidad del deslizador puede tambien ser aumentada dandole click mas de una vez en el boton de play.
La demostracion de este widget puede ser visto en
Demostracion . Unas ves hayas visto el demo puedes proceder a añadir este widget a tu blog de Blogger. Solo siga los pasos a continuacion para añadir este Deslizador Automatico de blogger.
Añadir los codigos HTML/CSS/JS
Entra en tu cuenta de blogger → Plantilla → Editar HTML y añade el codigo de abajo justo arriba de la etiqueta </body>
<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px}
#abt-scroll a.abt-scroll{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/play-button.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/pause-button.png) no-repeat}
#abt-scroll a:hover{background-color:#1569C7}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
#abt-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px}
#abt-scroll a.abt-scroll{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/play-button.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/pause-button.png) no-repeat}
#abt-scroll a:hover{background-color:#1569C7}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
Configurar la velocidad del Deslizador
Puedes cambiar el numero 50 con el numero deseado para aumentar/disminuir la velocidad del deslizador. Despues de haber ajustado la velocidad Guarda la plantilla.
Todo esta finalizado. Ahora usted y sus visitantes podran ver y usar este deslizador automatico en tu blog de blogger.
¡Hola! no sé si sea demasiado tarde para preguntar, pero ¿cómo puedo cambiar la posición de los botones? Ya sea que tal como están colocarlos en otras coordenadas o poner el "play" arriba del "pause"...
ResponderBorrarGracias!
Tendrias que jugar con el css para la position:fixed
ResponderBorrar