Botón para "Ir arriba" | Oloblogger Habreis visto en muchas páginas un botón, normalmente con aspecto de flecha, que sirve para ir rápidamente al principio de la página corresp...

7 de febrero de 2008

Botón para "Ir arriba"

Habreis visto en muchas páginas un botón, normalmente con aspecto de flecha, que sirve para ir rápidamente al principio de la página correspondiente.

Para añadir esto a vuestro espacio, en primer lugar teneis que elegir/construir la imagen que os guste. Por convención, bueno más por costumbre que por convención, se suele usar una flecha apuntando hacia arriba.Ir al principio

La situaremos en un punto fijo, no de la página, sino de la parte de la misma que se ve en nuestra pantalla. Para ello usaremos en el estilo de la imagen, la expresión position:fixed. Con ella, la imagen no se moverá cuando nos desplacemos (scroll). Por último la pondremos en el punto concreto añadiendo la distancia al borde que deseemos.

El código hay que colocarlo detras de <head> y quedará similar a éste:

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position: fixed; bottom: 10px; left: 2%;" /></a>

Como veis se pueden mezclar distancias en pixels y distancias en tanto por ciento sobre el ancho total (o el alto). En este caso se ha puesto a 10 pixels de la parte inferior y a un 2% del lado izquierdo.

Actualización: Para un mejor resultado con Internet Explorer, mejor colocar el código justo antes de </body>

Si no quereis este efecto, hay que quitar el style y todo lo que lo que está tras el =. De esa manera, la imagen tendrá una posición "normal", y se desplazará al mismo tiempo que el resto del contenido.

Cuando se pincha la flecha, volvemos al principio de la página en la que estemos. Si se quiere que esa imagen nos lleve a otra dirección, entonces hay que sustituir el símbolo # por la dirección URL deseada.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

95 comentarios :

  1. Queda perfecto... yo lo he colocado a la derecha

    Muchas gracias

    ResponderEliminar
  2. Genial, ademas de colocar el boton arriba, coloque varios mas, como una especio de navbar flotante, queda muy Bien

    si se puede echenle una mirada a mi blog como queda.

    www.analinks.blogspot.com

    ResponderEliminar
  3. Hola de nuevo Oloman!! jeje

    Oye, tengo un problema con este truco... no sale nada, xDD.

    Si ves mi Código Fuente he puesto el código que dices arriba justo debajo de HEAD pero evidentemente algo no he puesto bien, o me falta algo por colocar en algún otro sitio.

    Si me pudieras ayudar te lo agradecería ;-)

    Por cierto, tienes mi voto para el 20.minutos jeje, gracias!!

    ResponderEliminar
  4. Joder macho ( /a jeje, por si acaso, xD, que el nick no indica géneros jeje), eres una grandísima ayuda.

    Ahora está perfecto... es más, la he subido como PNG para quitarle el maravilloso recuadro que los JPEG dejan jeje.

    Y también visto el otro enlace que me recomiendas, lo tendré tb en cuenta ;-)

    Ya que no puedo votarte, te mando un beso en los morros... digooo.... ejem ejem, no nada de besos, de momento muchas gracias, xDD. Saludos!!

    ResponderEliminar
  5. Je, je... Stromboli, está bien el primer calificativo (sin la a) y además soy hetero. Como además veo que tú si eres un señor, pues va a ser que lo de los besos te lo voy a rechazar... de momento.

    ResponderEliminar
  6. Hola he entrado a tu blog por eso de la flecha hacia arriba pero no se que pasa no sale nada, lo he puesto tal cual despues de HEAD, bueno entren a mi blog es de wifi con acceso ilimitado estamos formando una red de personas en todo el mundo. http://negociosempleodinero.blogspot.com

    ResponderEliminar
  7. Ricki, lo único que puede fallar es que no hayas sustituido
    URLdeTUimagen
    por la dirección http dónde tienes alojada la imagen que usarás.

    ResponderEliminar
  8. Hola soy julieta nuevamente queria agradecerte por la respuesta tan inmediata ante mi pregunta. ES el unico blog que explica tantas cosas copadas y que encima las explica claro y te responde las dudas =)
    Al fin pude hacer un menu hace tanto que busco y busc y no encontraba nada muchisimas gracias!!!
    MI duda con el tema de ir arriba es que no se donde poner el codigo porque pusiste "detras de head" detras seria despues? y de que head hablas mire en el html de mi plantilla y hay muchos head y probe con uno y me quedo mi flecha a la izquierda y subia y como que quedaba en el aire flotando el icono. Otra duda es si yo quiero agregar una imagen de una flecha hecha por mi como se cual es la URL de esa imagen qu etengo en mi compu? es necesaria subirla a algun lado antes?
    Bueno espero tu respuesta!


    julieta.

    eternajuli@hotmail.com

    ResponderEliminar
  9. Gracias por el peloteo, pero creo sinceramente que hay muchos otros sitios que se enrrollan bien. La mayoría los tengo enlazados a la derecha, en la barra lateral.

    <head> con los < >, sólo hay uno. Ahí es dónde hay que ponerlo. Y efectivamente, lo que se pretende es que la flecha "flote" en la página. Cambiando los valores de BOTTOM y LEFT, podrás cambiar su ubicación, pero siempre en un sitio fijo de la página.

    Si no lo quieres fijo, tendrás que copiar el código dónde quieras ponerlo: en la barra lateral o en la parte de los posts que creas conveniente. Esto último ya requiere saber "traducir" la plantilla.

    Con respecto a poner tu propio diseño, lo tendrás que subir a Blogger o a otro servicio externo (Flickr, Imageshack...), copiar la imagen y sustituirla por donde pone URLDETUIMAGEN

    Un saludo

    ResponderEliminar
  10. yo quiero flechas como estas que tines abajo que te mandan de una pagina a otra como le hago
    te dejo mi correo sale
    yojoseant@hotmail.com
    y mi blog
    http://la-trinidad.blogspot.com/
    grcias

    ResponderEliminar
  11. Hola!
    Tengo ya instalada mi imagen pero tengo 2 problemitas:
    1. ¿Como hago para que mi imagen aparezca del lado opuesto? (Esquina inferior derecha de la pagina)
    2. ¿Como puedo hacer para desaparecer el borde blanco de la imagen? Es un detalle estetico, pero quedaria muchisimo mejor.
    Bueno, te dejo la direccion:
    http://bloganzoo.blogspot.com

    ResponderEliminar
  12. Hola Alan.

    1. En lugar de LEFT, usa RIGHT y cambia el valor 2% por 20px o los que necesites.
    2. Dentro de la etiqueta STYLE, añade BORDER:0PX; porque debes tener definido algún borde blanco definido por defecto en tu CSS para todas tus imágenes.

    Saludos

    ResponderEliminar
  13. Hola Oloman!
    Pude solucionar parte del problema, pero todavia me falta la parte que mas me intereza.
    Pude cambiar de lugar la imagen, pero aunque modifiqué el style el fondo blanco sigue igual... ¿Hay alguna otra manera de eliminarlo?

    Antes solia hacer las imagenes en Adobe PS y se eliminar el fondo, pero ahora solo puedo usar el paint para hacer las imagenes xD
    HELP!!!

    ResponderEliminar
  14. Vale Alan. Ahora creo que entendí lo que quieres. No se trata de un borde, sino del fondo blanco que lleva tu dibujo.

    Con paint no lo puedes hacer, pero bájate Photofiltre. Es un programa gratuito que no hace tantas cosas como Photoshop pero que está bastante bien.

    Ahí tienes una opción para convertir un color en transparente. En tu caso el blanco. Luego, lo tienes que guardar como gif o png, que son los formatos que permiten transparencias. Te recomiendo el primero porque algunas versiones de navegadores no se llevan bien con las transparencias png.

    ResponderEliminar
  15. Oka, Oloman.
    Gracias por tu ayuda, cuando lo tenga listo comento denuevo pa que veas como me quedó :P

    Ahora me voy a estudiar x.x
    Saludos y gracias denuevo, maestro!

    ResponderEliminar
  16. Gracias todo funciono muy bien.

    ResponderEliminar
  17. Y COMO PUEDO IR AL CENTRO??
    SI MI PAGINA ESTA SEPARADA POR 4 PARTES
    · <- arriba
    · <- centros
    · <- centros
    · <- abajo
    Con tu code puedo ir a arriba pero para ir al centro??? puedes escribirme a bastian_b_d@gmail.com o el mismo con hotmail.com
    GRAX

    ResponderEliminar
  18. otra vez gracias oloman todo funciona muy bien, un dato yo puse en vez de left(izquierda) Right(derecha) y si lo alineo al otro extremo.... saludos

    ResponderEliminar
  19. Hola Oloman!

    Una duda, he visto que en algunos sitios tiene este mismo boton de ir arriba, y ademas tiene la maravilla de volverse invisible cuando estas en el top de la página y solo aparece cuando estas bajando, sabes como se puede hacer esto?

    Te lo agradezco de antemano.

    Mi sitio es:

    http://la-plastilina.blogspot.com

    ResponderEliminar
  20. No lo he visto nunca, Isaias. Si me puedes pasar un enlace con algún blog que lo tenga, le echo un vistazo.

    ResponderEliminar
  21. Hola Oloman!

    Gracias por la pronta respuesta, aquí te dejo un blog donde lo vi:

    http://humanossinsentido.blogspot.com/

    te agradezco de antemano.

    Saludos!!

    ResponderEliminar
  22. ¡Joder! Ese es Pizcos, que es un maldito genio. Seguro que lo hizo con JQuery que parece que es su especialidad. Ya lo veo y si no me aclaro se lo pregunto.

    ResponderEliminar
  23. Oops! :S

    Espero no haberte metido en un embrollo.

    Gracias nuevamente.

    ResponderEliminar
  24. Je, je. No que va. Quizás me faltó un smiley en el comentario.

    Efectivamente está hecho con JQuery. Es una libreria que tienes que instalar y que luego te permite hacer diversos efectos. PorSi lo conoces, es similar a SCRIPTACULOUS.

    En este link tienes explicado cómo hacerlo, pero no olvides instalar primero la librería.

    http://humanossinsentido.blogspot.com/2009/03/ir-arriba-con-jquery.html

    Saludos.

    ResponderEliminar
  25. ahhh ya me habias espantado jejeje

    Pues que crees? con la novedad que seguí los pasos y si, me pone un botón de ir arriba, pero no tiene el efecto de desaparecer en el top de la pagina :S

    habré hecho algo mal?

    lo puse en mi blog de pruebas:

    http://bloggerihuana.blogspot.com/#

    Saludos y disculpa las molestias :S

    Gracias Oloman.

    ResponderEliminar
  26. Isaias, yo también lo probé anoche y me pasaba lo mismo: no desaparece al ir a la parte superior de la página. Según he leído en el post correspondiente, JQuery no tiene buena compatibilidad con otras librerías.

    No obstante, no he visto instalado JQuery en tu blog de pruebas. Hazlo antes del plugin:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

    Si tienes más problemas después, deberías consultar a Pizcos que es el experto en esto.

    ResponderEliminar
  27. Ya esta!

    solo me hacia falta instalar JQuery :D

    Gracias Oloman!

    ResponderEliminar
  28. ¡Y eso que te lo había advertido! :)

    De todas formas, me ha servido para comprobar que definitivamente no funciona si se tiene instalado Prototype y Scritaculous. Sin ellos funciona perfecto.

    ResponderEliminar
  29. Fue de gran ayuda, he aprendido mucho en este blog. Gracias

    www.labitacoradelsampedrano.blogspot.com

    ResponderEliminar
  30. Para los que usamos Wordpress.com, una forma de poner una imagen flotante, sin editar la plantilla, es utilizando html en un widgets de texto. Yo lo he usado en mi blog, oídococina! internet deconstruída, con buenos resultados.

    ResponderEliminar
  31. Gracias por el aporte jcjurado. Confirmarte también a tí y al que le pueda ser de utilidad, que en Blogger también se puede colocar el código en un gadget tipo HTML/JAVASCRIPT, con idéntico resultado.

    ResponderEliminar
  32. Me salió perfecto pero me gustaría saber como hacer para que sea un deslizamiento suave como tu tienes puesto, en vez de un desplazamiento brusco como ami me sale.

    http://www.pirapnhas.blogspot.com/

    mariogarran@hotmail.com

    ResponderEliminar
  33. PiRapÑas, necesitarías montar SCRIPTACULOUS y luego usarlo tal y como se explica aquí.

    ResponderEliminar
  34. Pues no Iván. Lo he visto y a mí me parece bien. Tiene todo lo necesario para el fin que está creado. He visto que has puesto lo de Ir arriba y más adelante seguro que pruebas cosas que te gustan -y otras que no-. Se me ocurre, por decirte algo, que podías probar con los posts en forma de sumarios a ver si te gusta más así.

    ResponderEliminar
  35. HOLA!!!!! muy buen post..!! pero tengo una pregunta ¿¿como tendria que hacer para que enves de llevarme arriva me lleve asia abajo??

    mucha suerte!!

    ResponderEliminar
  36. De la misma manera, pero colocando un marcador en la parte HTML y enlazando a él.
    Creo que también podrías hacerlo colocando el enlace apuntando a un ID que esté por la zona de abajo. Por ejemplo,
    a href="#post-footer"

    ResponderEliminar
  37. Hola,

    Antes de nada, muchas gracias por vuestro trabajo, me estoy empapando de aquí y allá, casi tengo pesadillas con los div, los flash, y demás bichejos.

    Me mola un montón la flecha pero me está dando problemas.

    Uso Wysiwyg Web Builder para my web. En este momento está casi en blanco pq estoy haciendo pruebas.

    He instertado este código en la html de cada html:

    ooops, no me deja pegarlo, pues nada, el mismo del primer post pero cambiando "tuimagen" por la http y tanto bottom como right lo he puesto en 2%

    La flecha me sale con un recuadro azul :(
    (probado en firefox, opera, safari y chrome)

    Y el joío IE8 me sitúa la flecha arriba, en el centro, también con el cuadro

    La web es www.perchera.com (por si no sale en la firma).

    Gracias de antemano

    ResponderEliminar
  38. Al final lo conseguí, un usuario de webbuilder ha hecho una herramienta para esto...

    gracias de todos modos

    ResponderEliminar
  39. El recuadro azul es la marca que llevan los enlaces de imágenes por defecto. En el STYLE del IMG, incluye un border:0px; y creo que se te arreglará. Si no, se lo incorporas al tag A (style="border:0px;")

    Para solucionar lo de Explorer, prueba a colocar el código justo delante del </BODY>. Eso lo he aprendido no hace mucho. Ya lo he actualizado en el post.

    Saludos

    ResponderEliminar
  40. Oops, se coló otro comentario tuyo mientras escribía. Ya he visto que lo has solucionado con JQuery. Está bien eso de que desaparezca el icono cuando estas arriba.

    Saludos.

    ResponderEliminar
  41. Oloman: soy inmensamente feliz de haber conseguido colocar la flecha de subir en una esquinita de mi blog por medio de la opción "añadir gadget". Hasta me he permitido el cambiar el "left" por "right" ¡ohs!
    ¡Gracias!¡muác, date por besuqueado! ;)
    Pero mi gran problema es el "Leer más" o algo similar ("resumir posts") porque algunas de mis entradas son laaaaargas. No me funciona ni el nuevo sistema que ha diseñado blogger ni lo que tu aconsejas. ¡No sé qué pasa!
    ¿Podrías ayudarme?

    http://mjarb.blogspot.com/

    ResponderEliminar
  42. Así a pelo, no. Primero necesitaría saber que opción estás escogiendo, porque en este blog, se explican al menos dos, una manual y otra para todas las entradas. Para mí es mejor el segundo. El tercero, el gadget de Blogger, es para hacerlo manualmente y he leído que da pequeños problemillas.

    ResponderEliminar
  43. Oloman: me has hecho feliz. ¡Por fin he conseguido construir los post en forma de sumarios!
    He hecho lo que aconsejabas en "Post en forma de sumarios" y... ¡tacháaan! ¡éxito!
    Me estaba haciendo un lío porque no encontraba parte de la cadenilla (la de la p>) pero al final he corrido el riesgo y me ha resultado bien.
    Estoy muy agradecida.
    Limpiate las babas, porque te besuqueo otra vez ;)
    http://mjarb.blogspot.com/

    ResponderEliminar
  44. Lo único que personalmente cambiaría ahora sería el botón de Bitácoras. Si te parece, ponle una condición para que sólo se vea en la página de cada entrada.

    ResponderEliminar
  45. hola oloman quisiera saber si es que se puede hacer lo mismo pero con un gadget más espacificamente publicidad para que quede casi igual que el boton-flecha de ir arriba.

    ResponderEliminar
  46. Claro, pero tendrías que cambiar el código. En lugar de crear un enlace en una imagen, tendrías que crear un DIV y dentro tu gadget. Lo importante es que ese div tendría que llevar un etiqueta de estilo cómo la del ejemplo.

    <div style="position: fixed; bottom: 10px; left: 2%;" > CODIGO </div>

    ResponderEliminar
  47. Introduzco la url y a la hora de verlo me sale el típico cuadrado con la cruz

    ¡¡¡NO SE QUE HACER YA!!!

    ResponderEliminar
  48. Y yo no sé qué es lo que querías hacer. De todas formas, un enlace a la página en cuestión, me ayudaría a ver el problema.

    ResponderEliminar
  49. Ya está, pero yo no sé que pasa ponía las url de mis imágenes y no funcionaba y entonces puse la tuya y funcíonó

    ResponderEliminar
  50. Entonces el problema está en que no utilizas la dirección correcta de la imagen. Si las alojas en el propio Blogger, quizás deberías echar un vistazo a este post.

    ResponderEliminar
  51. hago lo que dices tu y me da un pequeño error, no me funciona la flecha hasta que llego al final de la parte de abajo del blog, es decir no me deja clicarla asta que no llega abajo del todo.
    Espero que seas tan ágil como siempre! jaja un saludo :D

    ResponderEliminar
  52. Carlos, añádele dentro del STYLE de la imagen un Z-INDEX:200; para que se posicione por encima del resto de capas. Actualmente lo tienes por debajo. Si haces tu ventana más pequeña, verás que se esconde debajo de la barra lateral.

    ResponderEliminar
  53. Muchas gracias ya funciona perfectamente y perdona por el plagio de la flecha pero es la mas maja que encontré. Felicidades por haber arreglado lo del boton buscar tambien funciona muy bien pero no consigo encontrar ese tal Scriptolocus o algo asi para que la flecha me suba arriba de una forma moderada.

    Gracias de nuevo un saludo!

    ResponderEliminar
  54. En el enlace del final del comentario 35, lo tienes explicado todo: cómo instalar scriptaculous y cómo hacer que se suba con un efecto suave.

    ResponderEliminar
  55. Ya he puesto la flecha y me encanta, pero sube de forma drástica. De repente al clickear ya estas arriba del todo. Cómo puede hacerse para que haga como la de tu blog? que suba suave pero rápida hasta arriba? ^^

    ResponderEliminar
  56. Ouch vale, acabo de leer tu último comentario, que listo soy.

    Disculpa T_T

    ResponderEliminar
  57. como hago si además quiero una flecha q me lleve al final??? la pude colocar pero esta inactiva
    http://ucvproyectosedu.wordpress.com/

    ResponderEliminar
  58. ah otra cosa... wordpress permite instalar esos scriptaculous????

    Gracias

    ResponderEliminar
  59. Veo el enlace a #fin, pero no veo ningún ID con ese mismo nombre al que ir. Por eso no se mueve nada. Echa un vistazo a esto: Marcadores

    Y con respecto a lo de Scriptaculous, lo que me extrañaría es que no se pudiera instalar, pero no sabría decirte cómo se hace en esa plataforma.

    ResponderEliminar
  60. Una cosa, como se hace para poder ver los modelos de flechas que puedes escoger?? Le he dado a la flecha aquella roja de la entrada, pero me dice noseque de que tengo que renovar una cuenta, o algo así?? que tengo que hacer?

    ResponderEliminar
  61. La imagen puede ser la que tú quieras Enric, cualquiera. Si te interesa la de este post, con botón derecho, guardar imagen, la pasas a tu disco duro. Luego la subes a un post en borrador y sin publicarlo, copias la dirección de la imagen. Por último, la sustituyes dónde dice URLdeTUimagen

    ResponderEliminar
  62. JAJAJ
    gracias es el mejor blog q alla visto
    i grax
    por eso de las flechas llevaba miles de paginas viendo y ninguna me decia como hacerlo jejeje i aqi esta tan claro y facil
    wau!!!!
    eres un genio

    ResponderEliminar
  63. Hola,muy completo el blog¡¡
    Con respecto a este link cuando lo coloco y pongo vista preliminar aparece el espacio en blanco, porque prodia ser??
    Gracias-

    ResponderEliminar
  64. Amigo e puesto eso en mi blog pero e dado a un problema, cuando le doi click a la flecha no sirve jaja paree una imagen estatica nada mas envez de un boton... que ise mal?

    ResponderEliminar
  65. Gustavo, "URLdeTUimagen" hay que sustituirlo por la dirección de la imagen que represente la flecha o lo que sea que quieras mostrar. Supongo que será eso, pero si no es así, móntalo en un blog de prueba (por ejemplo en Cocina de Autor) y lo veo.

    Ijct Design, probablemente te falte el enlace que es el < a href="... con su correspondiente cierre, </a>. De todas formas, como dije antes, me haría falta verlo para saberlo seguro.

    ResponderEliminar
  66. Gracias, Oloman. Me ha quedado "niquelao" y, encima, funciona perfectamente. Un abrazo fuerte y ánimo, sigue adelante con esta tarea que haces, nos ayudas a muchos ;)

    ResponderEliminar
  67. quedó perfecto en un blog nuevo que estoy armando esta flecha, el único inconveniente es que para darle clic solo me toma el enlace en la parte inferior izquierda de la flecha, no en tosa la flecha, me encantaría solucionar esto. les mando un abrazo

    ResponderEliminar
  68. ¿Puedes probar a poner el STYLE y todo su contenido dentro de la etiqueta A en lugar de en la etiqueta IMG, Javier? Creo que es eso.

    ResponderEliminar
  69. hola, me gusta mucho esta opcion, pero tengo un problema, cuando trabajo en un monitor amplio y utilizo menos zoom la flecha aparece correctamente, pero cuando uzo mas zoom la flecha queda abajo de la pagina y no se ve, hay alguna forma de hacer que este siempre encima?

    ResponderEliminar
  70. matias943 ¿a qué te refieres con hacer zoom? Si es a aumentar el tamaño de letra (CTRL+), es lógico que el icono de la flecha se vaya perdiendo por la derecha. Con la barra de desplazamiento horizontal del navegador, la deberías poder ver.

    Si quieres ubicarla en otra posición para que siempre quede más arriba o más a la izquierda, simplemente cambia los valores de BOTTOM y LEFT, respectivamente.

    ResponderEliminar
  71. hola buenas!primero decirte que tu blog es muy muy util!muchas gracias!y luego a ver, lo he hecho y me va perfectamente!

    pero luego intento poner otro (o modificar este)para que se desplace al mismo tiempo que la página, y borrando lo de style y demás, o borrando solo "position: fixed" o cambiando "fixed" por "absolut" y cambiando valores, me hace siempre lo mismo, se me pone la imagen en el centro de la página y arriba del todo. ¿que hago?
    muchas gracias!

    ResponderEliminar
  72. No entiendo lo que quieres David. Con fixed, el dibujo que pongas se queda estático y si te mueves por la página, él se mueve exactamente al mismo tiempo. Ahora mismo funciona bien tanto en FF como en IE.

    Quizás lo que quieres es que suba la página poco a poco, pero eso ya requiere de una librería javascript adicional. Enlace al respecto en el comentario #35.

    ResponderEliminar
  73. gracias por contestar!y a ver si ahora me explico algo mejor...

    tu dices:

    "Si no quereis este efecto, hay que quitar el style y todo lo que lo que está tras el =. De esa manera, la imagen tendrá una posición "normal", y se desplazará al mismo tiempo que el resto del contenido."

    Yo entiendo, que si borro esa parte, la flecha se quedará "pegada" en la pagina y no aparecerá todo el tiempo.. y efectivamente eso es lo que pasa, pero en vez de quedarse la flecha en la posción deseada, se queda arriba de la página, y por mucho que cambio los valores no puedo modificar la posición

    gracias y disculpa las molestias!

    ResponderEliminar
  74. Entendido David. Es que estos son posts antiguos y hay algunas cosas que están explicadas regular. Esa que comentas es una de ellas.

    Para hacer lo que quieres, tienes que cambiar el fixed por un relative y luego, cambiar los valores de bottom y left a tu antojo. Incluso puedes cambiarlos por top y right si con eso cuadras mejor la imagen.

    ResponderEliminar
  75. Kedo de 10 la flecha es mi problem que a la hora de darle clik no se puede ya que parece quees una imagen no mas...

    ResponderEliminar
  76. Lo puse como gabget y funco, el problema es que sube de una y no como tu flecha lento. Alguna solucion a eso? gracias

    ResponderEliminar
  77. Echa un vistazo al comentario #35 Shinigami

    ResponderEliminar
  78. ¡Hola Oloman!

    Hace unos dis q descubri tu blog, me parece genial,me gusta mucho el diseño de la pagina, te felicito.
    Bueno, mi consulta es q no logro q mi blog vaya arriba, te explico: hice lo q dices en el tuto, y la flecha se me ve, pero cuando pongo el cursor sobre ella no hay manera, no se lo q estoy haciendo mal serias tan amable de decirme donde esta el error? Gracias

    ResponderEliminar
  79. No veo ninguna flecha en tus blogs Kiruni, pero si esta se ve y no sube, entonces es porque no está bien el enlace (a href) o no existe.

    ResponderEliminar
  80. Gracias Oloman por contestarme. Bueno, el caso es q no hay manera q me salga lo de la flechita, ya me ha dado dolor de cabeza este chisme pero no descansare hasta conseguirlo (con tu ayuda claro)
    He subido unas capturas de patalla en mi blog y asi se vera claramente q es lo q estoy haciendo mal, (tengo q decir q no entiendo bien los codigos, por no decir nada)Bueno Oloman muchas gracias por todo.Saludos
    http://elmundovirtualdekiruni.blogspot.com/

    ResponderEliminar
  81. <head> lo dejas y <meta content... también. Lo que hay entre esas etiquetas es lo que has añadido, pero no funciona porque está mal redactado. Copia y pega el código que pongo aquí.

    Luego sustituye URLdeTUimagen por http://img517.imageshack.us/img517/3113/irarriba3el2.gif

    Cuando veas que funciona, ya sólo es cuestión de elegir otra imagen a tu gusto y cambiar esa última dirección por la tuya.

    ResponderEliminar
  82. Gracias Oloman, ya hice lo q me dices y se ve la flechita, pero no sube, quieres echar un vistazo, te lo agradeceria.Saludos.

    ResponderEliminar
  83. Vale, es cosa de la forma en que está construída tu plantilla. Añade a la etiqueta STYLE un z-index:60; De esa manera, la flecha quedará por encima de otros elementos y no por debajo, que es precisamente el origen del problema.

    ResponderEliminar
  84. Muchisimas gracias Oloman, asunto resuelto.Saludos

    ResponderEliminar
  85. Hola tengo un pequeño gran problema en el opera la flechita me sale debajo del cuerpo de la pagina y en firefox me sale otra imagen ¿me podrias ayudar?
    mi blog es http://dibujar--manga.blogspot.com (si es con dos guiones) por cierto muy buen blog

    ResponderEliminar
  86. Iván prueba a incluir un z-index. En el comentario #56 tienes cómo hacerlo.

    ResponderEliminar
  87. Oye oloman muy buen blog quisiera saber si con la misma "flechita" puedo ir a cierta parte de la pagina? no solo hacia abajo o hacia arriba ;)

    ResponderEliminar
  88. Hola, Oloman!
    En primer lugar me gustaría felicitarte por tu página ya que me ha ayudado mil veces y siempre se lo recomiendo a todo el mundo. No sé si es la primera vez que te escribo o si alguna vez he planteado alguna duda, pero en esta ocasión me veo un poco desesperada...

    He probado mil tutoriales que he encontrado acerca de este tema y da igual lo que haga, el botón me aparece, pero no funciona, no sube arriba. Probé un tutorial que me generaban un código para poner botones arriba y abajo (cuyo diseño del botón no podía diseñar yo misma), pero no me terminaba de convencer porque no aparece en la posición deseada. ¿Hay alguna manera de arreglarlo?

    Por otra parte, probé como alternativa linkearlo a otra página, pero me abre una ventana nueva y tampoco me interesa, preferiría que se abriera en la misma ventana. ¿Hay solución para esto?

    Muchas gracias por tu tiempo y siento las molestias. Un abrazo muy grande!

    ResponderEliminar
    Respuestas
    1. Hola Pandora. Prueba a quitar ese reproductor de música que tienes. Ese en concreto suele dar muchos problemas e interfiere con algunas cosas, así que una primera medida sería quitarlo para ver si es eso.

      Eliminar
  89. Sr. Oloman necesito su ayuda, T.T

    ResponderEliminar
  90. Hola! Soy principiante y no entiendo dónde hay que poner el código. Lo intenté en el CSS pero no pasó nada. Si es en el código HTML del tema ¿exactamente dónde sería? Mi idea es que la flecha esté en todas las entradas ¿el código hace eso o tendría que ser una por una? Por último y por si acaso, además de poner la url de la imagen, para que esta aparezca, tengo que ponerla en algún otro lugar?
    Perdón por tantas preguntas, ojalá todavía respondas comentarios. Saludos y gracias por estos tutoriales!

    ResponderEliminar