martes, 8 de marzo de 2011

Botones para subir y bajar en Blogger

Hace no mucho, Dreko, el administrador de LockerzLatinos, me preguntó si lo podía ayudar a crear unos botones para subir y bajar en su blog, ahora lo publico en el blog, para los usuarios que lo necesiten en el suyo..

El resultado es el siguiente:





Los botones son solo referentes, el resultado son botones flotantes.
¿Cómo obtener estos botones en Blogger?

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


Buscamos ''HTML/Javascript'':

En donde pegaremos el siguiente código:

<style type="text/css">.subir a:hover {background:none;}</style><div class="subir"><a style="display:scroll;position:fixed;bottom:60px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Subir"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja97G_1lIWhJOCaoqVVDhE39FpHrTu2fMWSi8P5P6DbTb0YLkb20HpXu9g7_VWdk4WlvR6TxGCiUccdkgTTNEsLFwuHadfzHB0ybWtTB7tGe7CPje8J9bfojN_XUWyxBw7VC9TgcPlJos/s200/arrow8a.png"/></a></div>

<style type="text/css">.bajar a:hover {background:none;}</style><div class="bajar"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#footer-wrapper" rel="nofollow" title="Bajar"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-d5-TubJ9Ki_g2ldxw4wOKKv7fHVyPZhpM9Si8gDDpbjeQpgBlY_EkYZEdRVQqKug4zE_bfUYiqErs23gWuCkB47l59LQE81WpN_wovfVH9i0RJpAR81TN4ciMJNEmOroIb_9Ya5ZwQ/s320/arrow8b.png"/></a></div>

Guardamos los cambios y listo:


Notas:

  • Si deseas cambiar la ubicación de ambos botones, deberás cambiar:

right por left (para alinear a la izquierda)
bottom por top (Para subir los botones)
  • En el caso de sobremontarse los botones, o si están muy distantes uno del otro, aumenta o disminuye el valor de ''botom:60px''.

  • Si deseas cambiar las imágenes de los botones, reemplazas las URL por las correspondientes.

  • Si el botón ''Bajar'' no funciona, elimina el código ''-wrapper'' quedando sólo como ''#footer''.

No hay comentarios:

Publicar un comentario