Tutorial para el blog: insertar botón "volver al principio de la página"

25 de noviembre de 2012



María, del blog Merimery, sugirió el tutorial de hoy.
En él veremos cómo poner, de una manera muy fácil, un botón que al pulsarlo, nos envíe al principio de la página
Podéis verlo en la esquina inferior derecha de este blog.

Lo que primero que necesitamos es el icono. Podemos buscarlos por internet o podemos crearnos uno con un procesador de imágenes. Aquí tenéis unos ejemplos:

Si quieres descargarte estos iconos, puedes hacerlo aquí.
Debemos tener en cuenta el color de nuestra plantilla, y si el icono tiene un fondo blanco, o de otro color. Si es transparente, no tendremos ningún problema. También tenemos que pensar en el tamaño. Tiene que ser de dimensiones reducidas, para que no se solape con ninguna imagen ni gadget de la barra lateral.

Una vez tengamos claro qué icono vamos a utilizar, debemos subirlo al blog, en una entrada, por ejemplo, o a cualquier otra aplicación o web donde subir imágenes, para obtener su URL.
Si la subes al blog, haciendo click con el botón derecho del ratón, te saldrá la opción "copiar la URL de la imagen". Cópiala y pégala en este código HTML donde lo indica:

<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='ARRIBA'><img src="Pega aquí la URL de tu imagen" /></a>

Después, en entra en DISEÑO de tu blog, e inserta un gadget HTML:


Pega el código completo y GUARDA.
Después, no importa donde lo sitúes en tu plantilla de diseño, ya que no le influye en nada.

¡Y ya está! 


¿Te han resultado fáciles los pasos?
¿Vas a insertar este botón?

Si es así, comparte los cambios en nuestra página de Facebook para que veamos todo lo que se puede llegar a hacer.


Puedes compartir este tutorial en Facebook 
y en Twitter @CreacionesBN
para que llegue a más bloggers.



#TutorialDelDomingo

El jueves, Teresa del blog Ovejita Be!, en su sección 
La ovejita recomienda, dedicaba un post sobre 
recursos gratuitos para bloggers
¡Qué sorpresa me llevé cuando vi que nombraba este blog!
Muchas gracias Teresa.
Para ver el post, podéis pinchar en la imagen.




Y si quieres que en algún #TutorialDelDomingo se resuelva alguna "duda blogger", no tienes más que proponerlo e intentaré ayudarte.

Facebook ´´ Pinterest ´´ Twitter


48 comentarios:

  1. Estos tutos me vienen genial porque le estoy haciendo un lavado de cara a mi blog!! Gracias :-)

    ResponderEliminar
  2. ¡¡Qué buena idea!! Creo que voy a intentarlo...ya te contaré ^_^
    Besos

    ResponderEliminar
  3. Qué fantástico es vuestro blog!! No sabemos como daros las gracias por toda la información que nos proporcionáis. Un trabajo fantástico. Besos

    ResponderEliminar
  4. que bien, a ver si me pongo al día con la costura y pedidos y luego le meto mano al blog con tus tutoriales. Gracias!
    Creame y mas

    ResponderEliminar
  5. Muy bueno! jo, cuánto sabéis!

    ResponderEliminar
  6. Genial Natalia! muchísimas gracias! Me lo apunto para ponerlo cuando tenga un rato!! Un beso!

    ResponderEliminar
  7. Buen tutorial, Natalia... ¡Qué rara tu elección (un lunar celeste arropando la fecha de subida)! (It is a joke ;) )
    ¡Buena tarde de Domingo!

    ResponderEliminar
    Respuestas
    1. tiene que estar todo relacionado!! jijiji

      Eliminar
  8. Hacéis siempre que hacer esas cositas del blog parezcan super fáciles, con lo torpona que yo soy... jajaja.
    Gracias por el tuto!
    besín!!

    ResponderEliminar
  9. Hola!qué buena idea!!queda muy majo el botón en el blog y es de gran ayuda para ir más rápidoo a las pestañas superiores, ya lo probaremos y os contamos!gracias por los tutoriales son geniales, están muy bien explicados y no tienen pérdida!
    Por cierto, os queremos sugerir algún tutorial sobre la plantilla de vistas dinámicas de blogger. Hoy mismo hemos creado un blog con esta plantilla y hemos conseguido cambiar la cabecera y personalizarla, pero nos desaparece la barra de pestañas donde teníamos: Inicio y el enlace a nuestro otro blog, porque se la come la imagen de cabecera.
    Si podéis hacer algún tutorial para personalizar esta plantilla sobre la cabecera, añadir gadgets,etc...os lo agradeceremos!
    Gracias!!
    Saludos.

    ResponderEliminar
  10. Pues en cuanto saque un ratito lo pongo sí o sí ^^
    Un besazo!

    ResponderEliminar
  11. Me vienen genial estos tutos, y además súper bien explicados y visualmente atractivos. No se puede pedir más!

    ResponderEliminar
  12. despues de un monton de intentos lo consegui!!!!solo que meaparece en el lado izq bueno mil gracias un saludo!!!

    ResponderEliminar
  13. hola! muchísimas gracias por el tutorial, hacía mucho que queríamos ponerlo!! superbien explicado, de forma sencilla. Ya lo hemos puesto en nuestro blog! besitos!
    jaritascookies.blogspot.com.es

    ResponderEliminar
  14. MIL GRACIAS por este magnífico tutorial!!! Acabo de aplicarlo y me salió a la perfección!!!!

    ResponderEliminar
  15. Lo he conseguido :D ¡Gracias!

    ResponderEliminar
  16. Gracias!!! es súper útil insertar este botón, qué buenísima idea! lo intentaremos insertar ;D, a ver si nos sale!

    ResponderEliminar
  17. Guau, este también nos encanta!!! Nos vais a dejar el blog monísimo :D mil gracias.

    ResponderEliminar
  18. Muy util! he conseguido poner la imagen de subir. Mil gracias!
    http://podemoscharlarjuntas.blogspot.com.es

    ResponderEliminar
  19. Felicidades!! Muy bueno el tutorial, además me venía genial porque quería cambiar la que tenía, pero error!!! no caí en que debía suprimir primero la que ya tenía y, ahora, no sé cómo. He editado la plantilla en HTML y le copio el código antiguo para que me lo busque o alguna de las palabras para dar con él, pero no hay manera...ufff....alguna sugerencia??? Graciassss

    Y, por supuesto, comparto!! ;)

    ResponderEliminar
    Respuestas
    1. Lo conseguí!!! Qué ratito más malo...;))

      Eliminar
    2. me alegro de que ya esté solucionado!!

      Eliminar
  20. Hola!!
    Primero de todo, muchas gracias por ayudarme a subir estos iconos tan chulos ;) He intentado hacerlo pero no me ha salido. Lo que he hecho ha sido, descargar la imagen en mi ordenador, subirla a una entrada del blog pero una vez tengo la imagen insertada en el post cómo consigo la URL de la imagen? Haciendo clic en el botón derecho no pasa nada... jeje
    Gracias

    ResponderEliminar
    Respuestas
    1. qué raro!!! debería salirte un desplegado con varias opciones. Inténtalo de nuevo

      Eliminar
    2. Igual le diste a vista previa del post... ahí no funcionan enlaces, ni boton derecho ni nada. Yo conozco imageshack, es un servidor gratis y no hay problema de que se estropee la calidad de la imagen, ya de ahí sacas la url, y además es mucho más corta que subirla a google, blogger o lo que sea.
      Yo las subia a picasa, o incluso a las entradas de blogger pero útimamente me daba problemas, se me cambiaba el color de las imagenes... alguien sabe por qué?

      Eliminar
  21. genial !! instalación súper fácil. gracias !

    ResponderEliminar
  22. Hola otra vez! mi blog es de wordpress, funciona igual? Gracias mil ;)

    ResponderEliminar
    Respuestas
    1. ah!! éso es otro cantar!! no sé si funciona igual porque nunca lo he hecho en wordpress. Lo siento :(

      Eliminar
  23. Muchas gracias!!! Ha sido más que sencillo. Un saludo

    ResponderEliminar
  24. Ya he instalado el mio, muchas gracias!

    ResponderEliminar
  25. Gracias chicas, me encantaron los nuevos botones de la fiesta de Creative Mindly y quería cambiar el mío.
    Lo he conseguido con vuestro tutorial.
    Saludos desde 2012bauldesastre

    ResponderEliminar
  26. Parecía difícil hacer de un blog una cosa más amena y dinámica. Muchísimas gracias!!

    ResponderEliminar
  27. Me encantooo!! super facil y super util, ya lo instale en mi blog :D
    muchas graciaaaas!!!

    ResponderEliminar
  28. chicas ayudenme trato de hacerlo pero no me resulta, soy nueva en esto. Como le doy la orden de que me mande hacia arriba?, me direcciona a la página que subi la imagen :s

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

    ResponderEliminar
  30. Mil gracias, me queda genial!!

    ResponderEliminar
  31. Hola, me descargué la imagen la alojé en google drive, la hice pública, copié la dirección y la coloqué...y lo que se vé es el recuadrito de cuando la imagen no se puede ver...no sé si me explico...te dejo mi blog para que veas http://diydownloads.blogspot.com.es/

    Lo mismo me pasó al intentar poner unos botones de redes sociales y finalmente tuve que copiar unos, pero no pude elegir yo la imagen, sino que cogí uno ya creado por otro blog, porque los que yo me había descargado, no se veían tampoco...

    Que puedo estar haciendo mal??

    Gracias.

    ResponderEliminar
  32. Hola!!!
    Una vez más muchiiiiiisimas gracias por éste tutorial. Me ha servido de mucho!!!
    Hasta pronto!!

    ResponderEliminar
  33. Muchas gracias, un abrazo especial dese este lado del charco. Un blog excelente y de consulta permanente.
    Buena vibra desde mi Super Nova :)

    ResponderEliminar
  34. ¡Holis!
    Tengo un problema. He hecho todo con vuestros pasos y me sale la imagen en la esquinita del blog pero cuando le doy click para que suba, ¡no funciona! ¿Qué hago? x.

    ResponderEliminar
  35. Depues de casi dos horas he sido capaz de colocar el botoncito... el problema es que SI influye donde coloques el gadget para que haga la función de subir para arriba. Gracias por el tutorial.

    ResponderEliminar
  36. Muchas gracias por ser tan amables y ponérnoslo tan fácil. Estamos empezando y todo esto nos parece un mundo. Saludos!!

    ResponderEliminar
  37. lo hice todo pero no me sube, ¿ que hago mal? gracias

    ResponderEliminar
  38. Lo hice! fue muy fácil :) aquí esta el resultado: http://lacrimosa-girl.blogspot.com/ sii..!

    ResponderEliminar
  39. Muchísimas gracias por este fantástico tutorial, un beso :*

    ResponderEliminar
  40. Muchas gracias por el tutorial!! :)

    ResponderEliminar