Tutorial: Cómo poner 'botón subir' en tu blog + Botones de regalo

by - 9:30 a.m.

Hooola todos, el día de hoy les traigo el segundo tutorial del blog y es para que aprendan a colocar el botón "Subir".

Pero, ¿Para que sirve ese botón? se preguntarán ustedes, y pues yo les respondo que el uso de ese elemento es muy importante para quienes visitan tu blog, ya que les permite pasearse por el y volver arriba una vez hayan leído, y así poder ir al menu superior para seguir conociendo más tu página, además de que le da un toque super lindo y decorativo.

Si te decidiste a usar uno de estos botones, yo he diseñado algunos para que ustedes puedan usar libremente. Pero si te gusta diseñar o los mios simplementen te parecen super feos (que es muy posible) solo debes diseñar uno y subirlo a alguna plataforma para obtener su URL. Una vez lo tengas lo único que debes hacer es lo siguiente:


  • Entrar en blogger
  • Ingresar en la sección Diseño
  • Dar click en Añadir gadget HTML
  • Copias el código:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="URL de la imagen" /></a> 
  • Pegas el código y cambias lo rojo por la URL de la imagen en cuestión
  • Clickeas en Guardar
  • y finalizas haciendo click en Guardar cambios
    NOTA: es recomendable que antes de guardar des click en vista previa a ver si el resultado final te gusta antes de guardar los cambios.
  • y LISTO :) tienes un botoncito de lo más lindo y funcional en tu blog.


Aquí les dejo los botoncitos creados por mi para ustedes con sus respectivos códigos de instalación en la parte de abajo:


1.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://1.bp.blogspot.com/-TBYLIG33Y9g/U11jw42zIGI/AAAAAAAAAzI/lkcu1gRGAWc/s1600/SUBIR+1.png" /></a>

2. 
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://3.bp.blogspot.com/-u5yTUkPzH94/U11kN4itSCI/AAAAAAAAAzQ/A5zIWCtJsns/s1600/SUBIR+2.png" /></a>

3.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://3.bp.blogspot.com/-BMxlpk6Tzmg/U11k67F87cI/AAAAAAAAAzY/4ZMQStygu0o/s1600/SUBIR+3.png" /></a>

4.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://1.bp.blogspot.com/-E_a-2yvGLg8/U11lRic11jI/AAAAAAAAAzg/09m94eZLwqY/s1600/SUBIR+4.png" /></a>

5.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://3.bp.blogspot.com/-lwk49c3BUJI/U11lpuncvtI/AAAAAAAAAzo/IXgUagm7QW8/s1600/SUBIR+5.png" /></a>

6.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://1.bp.blogspot.com/-zBF73l-Lei8/U11l9g9C-QI/AAAAAAAAAzw/jxQX1uv7-6o/s1600/SUBIR+6.png" /></a>

7.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://3.bp.blogspot.com/-VOag_Qu3_3c/U11mXBNO50I/AAAAAAAAAz4/2pLLv63iPQA/s1600/SUBIR+7.png" /></a>

8.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://4.bp.blogspot.com/-v8VIQBVQvus/U11mtqnOzgI/AAAAAAAAA0A/ZSvXCqPXWps/s1600/SUBIR+8.png" /></a>

9.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://2.bp.blogspot.com/-5edKdNl4i4U/U11m74x1XJI/AAAAAAAAA0I/lY-ZreWw2eM/s1600/SUBIR+9.png" /></a>

10.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="http://1.bp.blogspot.com/-mw_hYHK3gHs/U11nL0QkZqI/AAAAAAAAA0Q/sOt2fdwPNTk/s1600/SUBIR+10.png" /></a>


Espero los botones sean de su agrado y si usas alguno de estos no dudes en dejarme el link en los comentarios para darme un paseo por tu blog y ver que tal luce. De igual forma puedes dejar tus dudas, sugerencias o peticiones que yo gustosa te ayudaré.






Que tengan un buen inicio de semana
-Liseth-

You May Also Like

18 Pensamientos

  1. Hola! muy practico el tutorial ^^ gracias por los botones, yo he utilizado uno de ellos, ¡son una monada! te dejo link para que lo veas ;) http://losmundosdechibita.blogspot.com.es/
    Besos guapa!

    ResponderEliminar
  2. Hola!
    Muchas gracias por el tutorial ^^ Y por los botones, son amor! <3
    Un saludo :)

    ResponderEliminar
  3. Hola^^
    Muchas gracias por el tutorial y los botones!
    besos

    ResponderEliminar
  4. ¡Hola! Ya conocía este tutorial, yo también puse uno en mi blog hace un tiempo. La verdad es que es súper práctico.

    ¡Muuuak!

    ResponderEliminar
  5. Están hermosos!
    Precisamente estoy trabajando en un tutorial parecido!!! pero no lo he subido porque estoy diseñando unos botones para dejarlos jajaja

    besos!!!!

    ResponderEliminar
  6. Gracias por el tuto ^^ pondré alguno de tus botoncitos en mi blog :3

    Besos

    ResponderEliminar
  7. holabuenas noches antes que nada muchas gracias por el tutorial me tarde enencontrar uno que me funcionara y este lo hace de maravilla.
    queria saber si podrias decirme como hacer un boton igual --ir arriba --pero con efecto deslisante

    ResponderEliminar
  8. ¡Qué facilísimo! Tanto que estuve batallando para encontrar un tutorial y ahora me topo con este. ¡Muchas gracias!

    ResponderEliminar
  9. Hola, me he quedado con el de la gotita de agua puesto que mi blog está orientado al tema acuático, muchísimas gracias.
    Besitos

    ResponderEliminar
  10. Puse el botón pero cuando doy clic no sube, alguien me podría ayudar??

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

    ResponderEliminar
    Respuestas
    1. Hola!! muchas gracias por los botones XD Es la primera vez que pongo uno en mi blog pero se ve super lindo :3! Gracias por explicar lo de la imagen y todo. Me sirvió un montón :D
      http://unahistoriaentremuchas.blogspot.mx/
      Saludos!

      Eliminar
  12. Hola!! el tutorial me pareció super!! ya tengo uno de esos botoncitos que me han parecido geniales.saludos!!
    http://manualidadesaruy.blogsport.com

    ResponderEliminar
  13. ¡Holaa! Acabo de ver esta entrada, tenía otro botón de subir arriba, pero he visto estos tuyos y me han parecido tan cucos que lo he cambiado ^^
    http://delfinesleen.blogspot.com.es/

    ¡Saludos!

    ResponderEliminar
  14. Hola! Yo no he podido hacerlo. Se copia el boton pero no hace la función de subir.
    Mira y verás:
    http://cheloferrerblog.blogspot.com.es/

    ResponderEliminar
  15. Holaaaa! son tan lindos no sabía cual escoger hahaha pero finalmente me decidi y quedo genial. Aca esta el link de mi blog para que vean http://aworldinbooksyeah.blogspot.com/ ... Espero su visita. Besos. :*

    ResponderEliminar
    Respuestas
    1. Hoooola!
      Ya me paso por allá a ver que tal :D

      Besoos ♥

      Eliminar
  16. Buenos dias
    me parece muy chulo el botón y queda genial, pero no se que hice mal que no funciona. Te diré que estoy haciendo un curso que acabo de empezar y todo es muy nuevo. Gracias por tu ayuda.
    http://gomezmartin1911.blogspot.com.es/#

    ResponderEliminar

Tu opinión es importante para mí, así que no dudes y comenta, que me hará muy feliz leerte.

Las unicas normas que debes seguir son:
-Sé respetuoso
-Si vas a colocar algún spoiler, avisa antes, así no incomodamos a nadie :)