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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Nq7CfDyI0chuUOaLsdEyLfDS6ohowpDt3QgkpIwEEBElXKoRcU9dp71dEzXCH9BxNnnZv7xwrkD8RIQeoNKHtcPcnXebouw4iBQjcOoLFc51iaaPym4Zk5GOemLoz1Lv9tM4h5dzUsI/s1600/SUBIR+1.png" /></a>

 2. 
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0dSQH3on0kCT8A7tZFdaWGZFfcmda3oN7HdXwvAf_uon8WSaMJTSJs_s3BY4ZNDG2wHQy-k2Wq5stKUX7E2fgdwXU80gfGfmTKjFl-wF3uVT_SdxGnuIwwjSGo6-ui8HBLwYbOxvrgs/s1600/SUBIR+2.png" /></a>

 3.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeJ8KKSasiIpzWMTv6IVl60ckMJsBdxCTqWgoYRhvpfsOVedM7KOAFQQpc_4vLBGXKQXdtTjgFbHi3jQWOkrKMQzQlBEPealBUCfzkdehx2oOMwqsjl0j_hsHKyjCAxjNDB1JIQ9jltA/s1600/SUBIR+3.png" /></a>

 4.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-UWyZhi7Nxbd1o8fLGaijD5MGRQghAu8rCoParTTNJGpHKdT_ZqdbDdJbGDZUbTm3IaH1s2gUDWJ75MoHiFLamzRn8QSsrQTf82HEjb6OXd_BhOfJVkocjdE3FikK9071u88UnOjD6U/s1600/SUBIR+4.png" /></a>

 5.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhy2E1R446INyb64rfcX2LWkHpYA4Q6sRBJUVFJBWAumanrNbcBg3Nw_JiJs5jQtwN9lMwdvi9XiyqR6xeKkyuMyW2DNjHPPJ5QmUN1Z3Q_UWFObBmaIgyyeZij4hg_Vkv-Uo4SrgTng8/s1600/SUBIR+5.png" /></a>

 6.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzE9NHUZx7PS4khk6Hhc3aQlNCST48m7nxJn2LTZpYa0xwVDW4AdzWtb_DFzmvBdzT5u0QQ73DMMlgVs-VfHwRIHnNj3g9yUpLJhd2arsY8o9SoMvGTmNZSRKtHAbPtv3KWy0zV4t_O80/s1600/SUBIR+6.png" /></a>

 7.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyr_DV8R3IQQRbo_bnUXUGHnSXW7KQdRtTMLX-943ytrJu6EIhMwBf_w9WeaVnzHr6XZgqq_vG-J9rGLoJ9vkJ9qbA2MBUUGJv_RTvrZRgdnmEPqMnTNY4DdbPkagkzPyKeJvn0tEco0/s1600/SUBIR+7.png" /></a>

 8.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCR2WGIiBezJNoYtc1IYZckEgoNCdVJ930q8D1sIVfi6dZeWA4whkDAi45A0D4sUfRsX63Q5C0VAPihpqoGHO8oCqB-jVGxNQMK41k_UQKLPNbmRkNITdDsMaKeAv4vJXvhCjaBNpB6w/s1600/SUBIR+8.png" /></a>

 9.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXc5frm0rtzHmjgTElyPZ_bYW2FXNjTRoiJpgJX-hDyDEyJZvVH2-zRI6nBE_36uTSuqP7Rwpg07yUDB17IsBfs2HMstfpEOcRnrSTfd6xO8D_laAnNCCrSX7ZJcyQG-YpX0FjLGluUGw/s1600/SUBIR+9.png" /></a>

 10.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpKXfTfxSt2q1UzT2SHFUFMd9hv6ltVNk9mEKJnGlvHj19yZJ9jfedaluEb1uyi5nfSiJOlb_4hD4ENOA2Ad1jD8Y0wH40UpkGVxsV8MbiIXvI0YyxTjJd7ooqjzLA_TX_-lSFC_D3Eg/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-

Share
Tweet
Pin
Share
Tags :

TAMBIÉN TE PODRÍA INTERESAR

18 Pensamientos

  1. Chibita28 de abril de 2014, 9:46 a.m.

    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!

    ResponderBorrar
  2. Pingüina fría28 de abril de 2014, 10:32 a.m.

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

    ResponderBorrar
  3. MeriiXún28 de abril de 2014, 11:21 a.m.

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

    ResponderBorrar
  4. Claudia Green28 de abril de 2014, 1:09 p.m.

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

    ResponderBorrar
  5. ggeorgelys28 de abril de 2014, 8:59 p.m.

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

    ResponderBorrar
  6. Ivannova30 de abril de 2014, 11:38 a.m.

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

    Besos

    ResponderBorrar
  7. blackshark219 de junio de 2014, 2:00 a.m.

    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

    ResponderBorrar
  8. Reina27 de julio de 2014, 6:16 p.m.

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

    ResponderBorrar
  9. Unknown19 de agosto de 2014, 6:18 p.m.

    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

    ResponderBorrar
  10. Unknown20 de noviembre de 2014, 10:26 a.m.

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

    ResponderBorrar
  11. Montze17 de diciembre de 2014, 9:26 p.m.

    Este comentario ha sido eliminado por el autor.

    ResponderBorrar
    Respuestas
    1. Montze17 de diciembre de 2014, 9:28 p.m.

      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!

      Borrar
  12. Laura16 de enero de 2015, 1:29 p.m.

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

    ResponderBorrar
  13. Eva Ceravieja19 de enero de 2015, 11:08 a.m.

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

    ResponderBorrar
  14. Chelo3 de marzo de 2015, 5:44 a.m.

    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/

    ResponderBorrar
  15. Sk19 de marzo de 2015, 6:13 p.m.

    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. :*

    ResponderBorrar
    Respuestas
    1. Liseth19 de marzo de 2015, 7:45 p.m.

      Hoooola!
      Ya me paso por allá a ver que tal :D

      Besoos ♥

      Borrar
  16. Unknown5 de mayo de 2015, 3:28 a.m.

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

    ResponderBorrar

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

¡Únete a nuestro Newsletter!

* indicates required