miércoles, 1 de abril de 2015

¿Cómo pongo un botón para subir?

Esto es aún más fácil que personalizar blockquotes ;D Solo hay que crear un gadget del tipo HTML/Javascript y copiar lo siguiente:
<a style="display:scroll;position:fixed;bottom:20px;right:20px;" href="#" title="Subir"><img src="url de la imagen" /></a>
Y eso es todo, todito, todo.

Bonus track! ¿Cómo pongo un botón para subir con efecto scroll (vamos, que en vez de subir sin más, se deslice)?


De nuevo otra cosilla que parece más complicada de lo que realmente es. Es un pelín más difícil que el botón simple, porque hay que meterse a tocar HTML, pero nada, igualmente sencillo. Así que bueno, ¡manos a la obra!

Primero, vamos a crear una copia de seguridad de nuestra plantilla, que siempre es importante antes de tocar nada del HTML, que luego nos arrepentimos del cambio y no nos acordamos de todo lo que hemos cambiado y bueno, ¡mejor prevenir que curar!


La copia de seguridad es, para que nos entendamos, la plantilla del blog (nada de entradas ni imágenes o archivos que hayamos subido), y se guarda en el ordenador a buen recaudo por si en algún momento queremos volver a ella (para eso solo habría que subirla dándole al mismo botoncito y buscándola en nuestros archivos).

Y una vez hecho eso, ¡al HTML propiamente dicho!


Una vez dentro, buscamos (clicando en cualquier parte del HTML y pulsando ctrl + F) la etiqueta </body>

Justo encima copiamos lo siguiente:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/>
<script>
   $(function () {
   $(&#39;.go-to-top&#39;).click(function () {
   $(&#39;html,body&#39;).animate({
   scrollTop: 0
    }, 500);
   return false;
    });
    });
</script>
Esto por no tener, no tenemos ni que entenderlo.

Y después modificamos el gadget que teníamos hecho ya en el botón sencillo, añadiendo href="wrap" y class="go-to-top":
<a style="display:scroll;position:fixed;bottom:10px;right:40px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen" /></a>
Hacer un botón de subida (que no tiene porqué ser la pera limonera) no es demasiado difícil en PicMonkey o en Pixlr, pero hay gente majísima que ya ha hecho algunos por nosotros, por ejemplo Blanca en Personalización de blogsTrini en Trucos Diseña Web, o Laura en Miss Lavanda.

No hay comentarios:

Publicar un comentario