» » » Flecha flotante en para volver arriba

Flecha flotante en para volver arriba



En este truco explicaré la manera más sencilla de conseguir que una imagen nos permita "subir".

Sin necesidad de alojar script alguno o editar la plantilla, podemos conseguir que, tanto una imagen como una palabra o frase quede flotando en una esquina del blog, cumpliendo esta función.

Puedes escoger la imagen que desees (ya sea una flecha o un icono) o escribir una palabra cualquiera.

Para insertarlo en el Blog entramos en ▶ Diseño ▶ Añadir un Gadget elegimos ▶ HTML / Javascript 

Donde copias el código:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir"><img src="URL DE LA IMAGEN"></a>

Si en lugar de una imagen quieres utilizar una frase pone este código:

<a style="position: fixed; bottom: 0px; right: 10px;" href="#" title="Subir">Volver arriba</a>
Para darle estilo
utilizar el siguiente código

<a style="padding:.5em 1em;text-shadow:1px 1px 2px #333;box-shadow:0px 0px 3px #000;-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;border-radius:2px 2px 2px 2px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius:2px 2px 2px 2px;font:bold 14px Arial, Helvetica, sans-serif;color:#fff;background:#666;border:5px solid #000;position: fixed; bottom: 0px; right: 50px;" href="#" title="Subir">▲ Volver arriba ▲</a>



  • Los valores que están en rojo se pueden cambiar.
  • En Volver arriba cambiarla por la palabra que desees.


Para las imágenes ver en esta página.


position: fixed


Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.


Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top