Revista Diario

Botones "subir arriba" gratis y tutorial para colocarlos.

Publicado el 21 enero 2014 por Lopoma
¡¡Hola amores!!
He recibido algún mail preguntándome como hice para colocar el botón de "subir", por lo que he pensado que sería buena idea hacer un tutorial, explicando paso a paso como lo hice, porque además es muy fácil!!
He diseñado 7 modelos diferentes para vosotr@s, por si queréis utilizar alguno, son gratis y en diferentes colores, para que se ajusten a los diseños de vuestros blogs. Todos son de 80x80 px. Espero que os gusten.
Si pincháis sobre cada uno de ellos, os los podéis descargar (Botón derecho ratón-Guardar imagen como) y si queréis obtener la URL de una imagen, pincháis con el botón derecho del ratón sobre el diseño que os guste y Copiar URL de la imagen.
El código que debéis copiar en un gadget HTIML de vuestros blogs (Diseño-Añadir gadget-Html) es este:
<a style="display:scroll;position:fixed;bottom:4px;left:4px;" href="#" title="subir arriba"><img src="http://farm3.staticflickr.com/2876/10927149795_7a907ab3c6_o.png" /></a>
Las partes que he subrayado en varios colores, son las que podéis modificar, os explico que significa cada una:
4pxAhí podéis modificar la posición de vuestro gadget, para ajustarlo a la medida del diseño de vuestros blogs, Basta con cambiar el valor numérico por el que queráis y listo!!

leftPor si queréis posicionarlo a la derecha o a la izquierda. En el código os viene predeterminado a la izquierda, pero si queréis colocarlo a la derecha, sólo tenéis que poner "right" en lugar de "left"

http://farm3.staticflickr.com/2876/10927149795_7a907ab3c6_o.pngEsto es la URL de la imagen que vamos a utilizar para el gadget. Para modificarla basta con pinchar sobre el diseño que os guste, con el botón derecho del ratón y Copiar URL de la imagen y sustituirla por la de ahora.

Si preferís hacer vosotr@s el diseño de vuestro gadget, tenéis que seguir los mismos pasos, subir la imagen a un subidor de archivos online (os recomiendo Imageshack, es gratuito y funciona muy bien) y obtener la URL de vuestra imagen.
Una vez tengáis el código modificado a vuestro gusto, le dais a Guardar y a continuación, Guardar cambios (en la parte de arriba del menú Diseño, en un cuadro naranja) y ya tenéis vuestro botón listo para subir!!

¿A qué es muy sencillo?Espero que os haya gustado el tutorial y los diseños que he preparado, igual me animo a hacer alguno más, a partir de ahora...
No olvidéis que estoy preparando undesafío fotográfico muy divertido...Pincha en el gif animado para enterarte de todo.

Un beso.

Volver a la Portada de Logo Paperblog