29/7/13

Cómo poner un botón de “subir arriba”… con efecto deslizante

¡Toca post invitado! :)

De la mano de Mónica, hoy vamos a aprender cómo, la flechita o botón de subir arriba (si no tenéis ya una, podéis poner una en vuestro blog en menos de un minuto siguiendo este tutorial), puede tener un efecto deslizante o scroll. 

Para que veáis lo que me refiero, id hasta el final de la página de la página de mi blog y pinchad luego en el botón de subir. 

Veréis que sube de golpe, como por arte de magia. 

Ahora, id hasta el final de la página del blog de Mónica, y pinchad en su flechita de subir. 

Veréis que sube, pues eso... ¡con efecto deslizante o scroll!

Os dejo que ella os lo cuente, que se explica muy bien :)

Nota: Este es un post invitado. No está escrito por mí, pero me ha parecido interesante compartirlo en Personalización de Blogs.

POST INVITADO

Hola a todos.

Soy Mónica de Cortar, Coser y Crear y hoy me tenéis en… ¡Personalización de Blogs!

¡Qué ilusión! No sabéis lo que me apetecía colaborar en el blog de Blanca. La de veces que habré entrado buscando trucos para mejorar mi blog o para leer sus consejos y recomendaciones blogueras. Gracias a ella me adentré un poco en el mundo del html, y ahora hasta me atrevo, de vez en cuando, a probar cosas nuevas en el blog. Entre todas esas cosas hay algo que aprendí recientemente, que me ha encantado y que estoy segura de que os va a gustar, así que he pensado en compartirlo con vosotras.

Os cuento un poco la historia de este descubrimiento. Seguro que os acordáis de la entrada de Blanca dónde nos enseñaba cómo crear e insertar un botón de "Subir arriba" en el blog. Además nos regalaba un montón de imágenes superchulas para el botón. De hecho la de mi blog es una de las suyas (¡gracias Blanca!). 

En el tutorial Blanca nos explica en sencillos pasos cómo hacer el botón "Subir arriba". En este caso, el efecto que tenemos al pinchar en el botón es el normal, una transición instantánea a la cabecera del blog. Sin embargo, yo había visto en otras webs, efectos diferentes pinchar en botones similares. Concretamente, si pinchabas en el botón, la página del blog se desplazaba suavemente hasta la cabecera… se deslizaba hasta la parte de arriba con un elegante efecto propio del más digno ordenador de Apple :-P Es una chorrada, pero ¡me encantó! Y poquito a poquito, con muchas chorradas varias, el diseño de nuestro blog mejora :-)

Así que me puse a buscar y a buscar, y hoy os quiero enseñar cómo poner un botón de "Subir arriba" con un efecto elegante.



PASO 1

Lo primero que tenéis que hacer es instalar un botón de los que nos daba Blanca o crear uno vosotras mismas si sabéis Ah, ¿que ya lo tenéis? Pues sigamos entonces.

PASO 2

Aquí tenemos que usar uno poco de html, pero muy sencillo, ya veréis. En concreto, usaremos un pequeño código JQuery que es una extensión del lenguaje de programación Javascript. Dicho esto (que queda muy cool, pero no os ayuda mucho), pasemos a lo interesante. Para hacerlo solo tendremos que:

✎ Ir a Plantilla.

Crear una copia de seguridad de la plantilla (por si rompemos algo :-P).

✎ Ir a Editar HTML.

✎ Ahora tenemos que buscar la cadena de texto </body> en la plantilla del blog (con Ctrl+f por ejemplo). Y poner justo encima el siguiente código:

<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>



Si en vuestro código ya tenéis una línea <script> con un jquery.min.js, entonces no hace falta que pongáis la primera linea. Si no lo sabéis, pues ponedla que no ocurre nada.

✎ Guardamos y salimos

PASO 3

En este último paso, modificaremos el gadget HTML de nuestro botón "Subir arriba". Y lo que tenemos que hacer es:

✎ Ir a Diseño.

✎ Buscar y pinchar en editar el HTML del gadget de vuestro botón.

✎ Ahora simplemente tendremos que añadir sobre el código existente de nuestro botón, el código que os pongo en rojo a continuación:

Botón de muestra original

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="url de la imagen del botón" /></a>

Botón de muestra modificado

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen del botón" /></a>


Y ya está. Ya lo tenemos hecho :-). Espero que os haya gustado y que lo encontréis chulo y fácil de hacer.

¡Un besazo y hasta la próxima!

Mónica.


¡Mil millones de gracias Mónica por el tutorial!

Ya sabes que eres bienvenida cuando quieras por aquí a contarnos más cosas jeje. Con explicaciones como las vuestras da gusto siempre.

Besos,

P.D. ¡¡No olvidéis que seguimos de sorteo!!

Si alguien quiere ganar un mini-lote de tres productos Mr. Wonderful, que no se pierda este post con las instrucciones sobre cómo participar (¡no podría ser más fácil además!)

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

63 comentarios

  1. Yo lo tengo desde el principio, ya hace mucho tiempo. Me gusto más que el que sube de golpe. No se, es cuestión de gustos. jejeje

    Un saludo,

    Pedro

    ResponderEliminar
  2. ¡Ya he instalado mi botón con efecto deslizante! Con vuestras instrucciones ha sido super sencillo ^^.
    Como decís, es una tontería pero, ¡me encanta!
    *Dándole al botón como una tonta*
    xD

    ResponderEliminar
  3. Anda, mira qué bien, post colaborador publicado justo el día que vuelvo de vacaciones jeje ¡qué ilusión!. No todo iba a ser malo :P. ¡Gracias a ti por dejarme participar en tu blog! Ha sido un placer, y en cuanto se me ocurran más cositas te las cuento para que tus seguidoras blogueras sepan más truquis. Muchos besos y muchas gracias :).
    Ahora a disfrutar la semana.
    ¡Muaks!

    ResponderEliminar
    Respuestas
    1. Monica, muy bueno el tutorial pero no soy capaz de encontrar el < /body> en el codigo HTML de mi blog :c me preguntaba si serías tan amable de ayudarme con eso :'''D

      ( http://loslibrosdelahijadehades.blogspot.com/ )

      Eliminar
    2. Tomomi:
      Hola!, Nosotras acabamos de instalarlo ahora en (( http://naoko-tomomi.blogspot.com.es/ )) ya que estamos retocando a nuestro Night.
      A mi(Tomomi) que he sido quien lo ha hecho también me ha costado encontrar el < /body > y de hecho lo he tenido que buscar manualmente por que el botón de búsqueda no me funcionaba....pero mas o menos esta abajo del todo del código, he tardado menos de 5 minutos en localizarlo...así que empieza por el final y veras como lo encuentras =3
      Espero haber sido de ayuda (aunque sea minimamente)

      Ah! y por supuesto gracias por estos tuto-consejos a Monica y Blanca para blogs....son fantásticos =3

      Eliminar
  4. Listo, y a la primera!! HTML explicado para dummies como yo!! Me encantan estos tutoriales. Gracias a las 2!! ;)

    ResponderEliminar
  5. ¡Muchísimas gracias! Yo ya tenía instalado el botón pero subía de golpe y estaba buscando como hacer que subiese deslizándose. ¡Me ha venido perfecto!

    Un besote, Mariajo.

    Mi Blog :)

    ResponderEliminar
  6. Mónica, no tengo palabras para agradecerte tu post y a Blanca por esta magnífica iniciativa. Lo cierto es que es mucho más elegante este efecto deslizante. Esta noche porque tengo una cena si no me ponía al llegar a casa.

    Fantástico y muy bien explicado.

    Un besazo a las dos!

    ResponderEliminar
  7. Gracias a las dos por otro truqui para nuestros blogs.
    Un beso

    ResponderEliminar
  8. Enhorabuena Blanca, ya 4000!!!! Que se dice pronto :)
    Que buen tutorial, gracias Mónica también. Un beso.

    ResponderEliminar
  9. Es que cuantas cositas aprendemos contigo kukita...que gusto da.
    Gracias y Besitosss.

    ResponderEliminar
  10. Mil gracias me ha quedado requetemonisima la flechita en mi blog

    ResponderEliminar
  11. Muchísimas gracias a las dos!!!!! y a por otros 4000!!!!

    ResponderEliminar
  12. La tenía instalada, ahora con el efecto deslizante me gusta más.
    Muchas gracias a ambas!.

    ResponderEliminar
  13. Que bien!, muy útil!!, estoy a las corridas, pero siempre te leo Blanquis! besotes ♥

    ResponderEliminar
  14. Felicidades por tus seguidores en facebook bien merecidos son ;)
    Gracias a Monica por el post ;)

    BesitoS!!

    ResponderEliminar
  15. ahhh y muchas felicidades por los 4000 :)

    ResponderEliminar
  16. Antes de nada felicidades por esos 4000 ;)
    En cuanto al tutorial muchas gracias!!! igual lo pongo en mi blog ^^
    Besines

    Alba, Niña Bonita Accesorios

    ResponderEliminar
  17. Yo ya me lo he puesto, muchas gracias a las dos por explicarnos tan fácilmente cómo hacerlo :)

    ResponderEliminar
  18. Creía que sería imposible pero no ha sido tan difícil gracias a vuestra explicación! Gracias por vuestra ayuda ;)

    ResponderEliminar
  19. ¡Qué tutorial más chulo! Lo voy a guardar, que a la vuelta de mis vacaciones pondré en práctica más de uno.
    Besos.

    ResponderEliminar
  20. ¡Qué curioso! Ni me había planteado que hubiera diferentes formas de que subiera jeje. Me lo apunto e igual lo pongo porque queda muy bonito, mil gracias a las dos, besos.

    ResponderEliminar
  21. ¡Ufff! Mis códigos del blog están algo liados. He visto que tengo un montón de widgets todos desorganizados y no encontraba la cadena body
    Suerte que tus explicaciones son muy concretas y sabía perfectamente lo que debía buscar. Mil gracias y un besazo enorme ♥
    Sweet Faery Creations

    ResponderEliminar
  22. Ahh!!! Qué bien! queda muy chulo!!

    Muchas gracias chicas por la ayuda (una vez más!) jajajaja!!

    besosss

    ResponderEliminar
  23. Ohhh, acabo de encontrarme este blog y he puesto en práctica este tutorial tan chulo ¡¡Es genial!! Muchas gracias por la aportación, me ha gustado muchísimo.
    Besos ;)

    ResponderEliminar
  24. Ya lo he hecho!!!No ha sido fácil para mí, tengo que decirlo, he tenido alguna ayuda extra!

    gRACIas!

    ResponderEliminar
  25. Ainssssss pero que bien explicado.... 1.000 millones de gracias, es la guinda del pastel de la función subir arriba....
    Besossssssssssssssss

    ResponderEliminar
  26. Muuuuchas gracias por el tutorial!! me ha servido muchisimo y lo he conseguido!! Y eso que soy la mar de negada para esto de andar con html xD

    Besos!!!!

    ResponderEliminar
  27. Pero que bien explican todo nenas me han ayudado muchisimo aver si mi blog pa cogiendo cuerpo y con esos detalles quede divino jijiji miles miles miles de gracias

    ResponderEliminar
  28. Mil gracias! Ha sido facilísimo! Con ayudas como las vuestras, mi blog queda cada día mejor!

    ResponderEliminar
  29. Muchísimas gracias! Estoy reconstruyendo mi blog y estas cosas se me hacen superdifíciles porque no tengo ni idea de html, pero lo habéis explicado genial, creía que con lo mala que soy no me funcionaría, pero siií! hahah
    Gracias!

    ResponderEliminar
  30. Me encanta tu blog, y ahora que estoy cambiando mi blog, puedo hacer detalles que antes ni por la cabeza se me hubiera pasado.
    Hace unos días puse este botón, y me gustaría saber como podría hacerle desaparecer cuando se esta en arriba de la página.

    Muchas gracias Blanca

    ResponderEliminar
  31. ¡Wiiii! (Así fue como reaccioné cuando vi el resultado xD) Te lo agradezco de corazón, me encantó. También usé tus tutoriales de quitar el de "Suscribirse a estradas Atom" y el de "Attribution" y, obviamente, te amo ♥ (para que veas, este también lo vi jaja :3). ¡Sigue así!

    ResponderEliminar
  32. Me ha servido de gran ayuda, muchisisisimas gracias :3.

    ResponderEliminar
  33. Joo a mi me encanta pero no lo consigo!:( Siempre he sido muy torpe...
    cuando pongo en la barra que aparacer dandole a ctrl+f lo de < /body>me sale 0/0 resultados... que puedo estar haciendo mal? muchisimas gracias por todos y cada uno de tus posts! Te leo muy a menudo y me parece muy de lejos uno de los mejores blogs respecto a ayuda a otros blogs jajajaj
    espero tu respuesta,
    besos
    Belén de www.momentostrendy.blogspot.com

    ResponderEliminar
  34. ¡Super fácil y funcional! Muchas gracias, nos ha venido perfecto.

    ResponderEliminar
  35. Nos están siendo muy útiles tus consejos para nuestro blog Ñam and Cheap.
    Gracias. Saludos.

    Óscar

    ResponderEliminar
  36. Muchísimas gracias por el truco!. Qué haríamos las y los bloggers sin vosotras!! ;-)

    ResponderEliminar
  37. Me ha encantado elpost la verdad es que lo intente una vez con otro tutorial y no me funciono :( pero gracias al tutorial lo he podido lograr y ha sido super facil gracias :) <3

    ResponderEliminar
  38. Muchas gracias!!! súper sencillo y muy bien explicado!! ya lo tengo listo! viva!! ^_^

    Besiiiitos!!!

    ResponderEliminar
  39. ¡Muchas gracias a las dos! Me ha encantado: ha sido fácil y muy útil. jejeje
    ¡Muchos besos!

    ResponderEliminar
  40. ¡Excelente, muchísimas gracias chicas!

    ResponderEliminar
  41. Hola, muchas gracias por el post y por las bellas flechitas que han dejado, me han servido mucho puff... como que tenía algo de miedo por modificar mi plantilla pero creo que ha quedado hermosísima. Una vez más gracias Mónica. Postada. Blanca tu blog es hermoso. Un enorme saludo.

    ResponderEliminar
  42. Muchísimas gracias Blanca y Mónica por este post, yo ya tengo mi flechita tan mona instalada. Me estoy poniendo al día con todos tus tutos que son intesesantísimos. Gracias por compartir tan preciada información. Bss

    ResponderEliminar
  43. Muy bien explicado todo, muchas gracias :3

    ResponderEliminar
  44. ¡¡Me encanta como queda así!! Gracias por este truquillo :-)

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. Muy chulo, muchas gracias a las dos!

    ResponderEliminar
  47. Hola!! Tengo un problema. Quizá sea tonto, pero VERDADERAMENTE necesito su ayuda. Hace un tiempo hice este tutorial. En este momento quiero QUITAR la flecha que puse para colocar otro botón distinto. Sin embargo sigue apareciendo la imagen debajo. -.- Como si estuviese adherida al fondo, sólo que se mueve cuando me deslizo por el blog. Por favor, me podrían explicar cómo quitarlo definitivamente, para poder colocar otro botón nuevo??? Lo necesito con urgencia u.u

    ResponderEliminar
  48. Si pude, pero, ¿por qué la foto se ve muy grande? O sea no se ve miniatura:( ayuda porfaaaaaaaa

    ResponderEliminar
  49. Gracias a las dos! Me ha servido de mucho :D

    ResponderEliminar
  50. me encanta... es la primera vez que hag algo de HTML y me salio!!! GRACIAS

    ResponderEliminar
  51. Hola! Me encanto el tutorial y me sirvió! Te invito a pasar por mi blog: cositas para tu blog kawaii y mas. chau

    ResponderEliminar
  52. Ya tengo mi botón!!! Super chulo. Mil gracias a las dos.

    ResponderEliminar
  53. Hecho! Mil gracias, chic@s, me salváis la vida en muchas ocasiones! Besazo ♡

    ResponderEliminar
  54. Diooooos!!! me FLIPA el post. Me encanta el blog, me ayuda muchísimo con el mio. Infinitas gracias a las dos <3

    ResponderEliminar
  55. Muchas gracias, ha sido esclarecedor

    ResponderEliminar
  56. Holaaa muchísimas gracias por este tutorial! Esta super bien explicado. Estoy recién creando un blog y la verdad es que tengo cero conocimiento en HTML. Hice todos los pasos al pie de la letra pero no se porqué cuando coloco el codigo en la plantilla, no se guarda a pesar de darle a guardar muchas veces. Si me pueden ayudar se los agradecería inmensamente.

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.