Template by:
Free Blog Templates

domingo, 22 de junio de 2014

Botón arriba y abajo

Para poder moverte en tu blog de manera más dinámica y en sólo un clic, te recomiendo este truco. Se trata de colocar un botón flotante con una flecha que te mueve hacia arriba y uno que te mueve hacia abajo.
Solamente haces clic sobre el botón y ya no necesitas utilizar las molestas y poco estéticas barras laterales o utilizar la rueda de tu mouse.



Para colocar estos botones hay dos formas.

  • La primera es la más sencilla


  1. Ve a diseño
  2. Añadir un gadget- HTML
  3. Copia y pega el siguiente código si lo quieres abajo a la derecha


  4. <div id="navigation_up_down_79136"><noscript>Javascript is disable - <a href="http://www.webestools.com/">Webestools</a> - <a href="http://www.webestools.com/navigation-buttons-generator-scroll-top-bottom-shortcut-page-up-down-scroll-buttons-javascript.html">Navigation Buttons Generator html scroll up down</a></noscript><script type="text/javascript" src="http://services.webestools.com/navigation_up_down/1-79136-right.js"></script></div>


  5. Copia y pega este si lo quieres abajo a la izquierda

<div id="navigation_up_down_79136"><noscript>Javascript is disable - <a href="http://www.webestools.com/">Webestools</a> - <a href="http://www.webestools.com/navigation-buttons-generator-scroll-top-bottom-shortcut-page-up-down-scroll-buttons-javascript.html">Navigation Buttons Generator html scroll up down</a></noscript><script type="text/javascript" src="http://services.webestools.com/navigation_up_down/1-79136-right.js"></script></div>




  • La segunda forma es un poco más compleja porque debes manipular la plantilla, pero más personalizable, ya que puedes agregar la imagen que desees.

  1. Ve a Plantilla - HTML
  2. Busca la línea </body>
  3. Pega este código antes de ella.
<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>
<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>

La primer parte del código es para el botón subir, la segunda para el botón bajar. La parte coloreada la debes cambiar por la imagen deseada. recuerda siempre usar tus propias imágenes, ya que si la URL que usaste deja de funcionar, el botón desaparecerá de tu sitio.

Aquí les dejo algunas imágenes que regogí de Ciudad Blogger:

Para el botón subir










Para el botón bajar















0 comentarios:

Publicar un comentario