Poner una imagen flotante en el blog

30 de marzo de 2009 227 comentarios ,
Una imagen flotante o estática es una imagen que permanece visible aunque bajemos o subamos toda la barra de desplazamiento de una página y esta siga en el mismo lugar. Puedes ver un ejemplo en esta misma entrada, debajo del lado izquierdo verás la imagen que permanece ahí aunque bajes la página.
Puedes poner tu logo, un mensaje, una foto, o la imagen que más te guste. Colocarla es muy fácil, sólo entra en Plantilla | Edición de HTML y pega antes de </body> lo siguiente:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>

Sólo debes cambiar la URL de la foto; esta imagen quedará en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.
Este truco igual lo puedes usar para poner una flecha (ir arriba) y que los mande al inicio del blog, si ese es el caso entonces usa este código:

<a href='#'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/></a>




227 comentarios en:

" Poner una imagen flotante en el blog "

  1. ¡Hola Potro! al propósito de este truco ¿cómo se determina la URL de una imagen propia? (p.e. nuestro propio logo, una foto personal o una imagen que no esté en la web).

    Gracias (:

    ResponderEliminar
  2. Hola Jazmine Dguez. [bajo el pseudónimo de Lilith†La†Enemiga†d†Eva],

    Si la foto no está en la web tienes que subirla, hay muchos servicios gratuitos como Imageshack, TinyPic o incluso en Picasaweb. Una vez que la hayas subido ellos mismos te darán la URL para poder compartirla, sino la encuentras sólo haz click derecho sobre la imagen y selecciona Copiar la ruta de la imagen, esa será la URL que podrás usar.

    Saludos.

    ResponderEliminar
    Respuestas
    1. hola potro muchas gracias por el tutrial, pero tengo un problema ala hora de poner la imagen todo se borra y lo unico que se ve es la imagen y el slide de fotos que tengo. espero me puedas ayudar muchas gracias.

      Eliminar
    2. No debe interferir con nada, es probable que estás colocando algo mal, o borrando algo al poner este.

      Eliminar
  3. Potro se pueden modificar este truco como para varias imagenes con diferentes motivos y cuando le des click a la imagen te direccione al post de refencia dentro del Blogg.

    no se si me explico bien como es la idea, es una forma de usar imagen flash con ruta URL.-

    ResponderEliminar
  4. Puedes poner varios, sólo necesitas cambiar la posición de cada uno para que no queden encimados.
    También puedes poner un enlace, sólo sustituye en signo de gato (#) por la URL que quieras:
    <a href='#'>

    Saludos.

    ResponderEliminar
  5. gRACIAS POTRO PROBARE COMO ME VA, GRACIAS POR TU AYUDA

    ResponderEliminar
  6. Hola Potro
    Quiero poner borde en mis imágenes pero en mi plantilla no encuentro la famosa parte: .post img
    ¿Qué puedo hacer?
    Gracias

    ResponderEliminar
  7. Hola ABRIL,

    Entonces agrégalo a la plantilla:

    .post img {
    padding:4px;
    border:1px solid #CCC;
    }

    Saludos.

    ResponderEliminar
  8. No lo veo en el ejemplo Potro, me ayudas?

    ResponderEliminar
  9. Hola AlexTfe26,

    El ejemplo está en la parte inferior izquierda, no se veía bien porque encima estaba una barra de Friend Connect pero ya la he puesto arriba para que se vea la imagen flotante.

    Saludos.

    ResponderEliminar
  10. Pero la imagen, puede ser cualquier cosa? incluso un dibujo, no tiene por que ser triangular no?
    Por cierto pasate por mi blog si quieres y lo ves, y me dices que tal.
    Gracias voy a probar a hacer una imagen a ver como queda.

    ResponderEliminar
  11. Claro, puede tener la forma que quieras, circular, cuadrada o sin forma, eso ya es a tu elección.
    Al rato me doy una vuelta por tu blog.

    Saludos!

    ResponderEliminar
  12. Ya lo hice, muchas gracias, por cierto, al darle a esc se quita la musica y las animaciones gif que tenga posteadas, pero esto tambien se quita o se queda? tambien he visto paginas que cada vez que entro te sale una imagen flotante diferente, como se hace eso?
    Gracias tu blog me ha ayudado muchisimo, eres un maquina.

    ResponderEliminar
  13. La primera pregunta no la he entendido.
    Para poner una imagen al azar podrías intentar con este código:
    http://ciudadblogger.com/2009/06/crear-un-rotador-de-banners-al-azar.html

    Saludos.

    ResponderEliminar
  14. Me explique mal , me referia si esa imagen estatica se quita al pulsar la tecla ESC como la musica del blog.

    ResponderEliminar
  15. No, la imagen queda estática, no se quita.

    Saludos.

    ResponderEliminar
  16. muy util, gracias por enseñar lo que sabes ;)

    ResponderEliminar
  17. hola¡¡ por aki molestando otra vez que codigo muevo para que la imagen me quede centrada en la parte inferior del monitor?

    ResponderEliminar
  18. Hola ,

    Modifica donde dice left:0;, cambialo por left:600px; u otro valor hasta que quede centrada como quieres.

    Saludos.

    ResponderEliminar
  19. SE PUEDE HACER QUE UNA IMAGEN FLOTANTE SEA UN ENLACE
    BENGA MAJO GRACIAS

    ResponderEliminar
  20. Claro, en el segundo código sólo hay que cambiar el signo de gato # por la URL del enlace que quieres.

    Saludos.

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

    ResponderEliminar
  22. Tengo un par de dudas:
    1. Dónde puedo encontrar fotos de las flechitas?
    2. ahí solo especificas para qeu cuadno clickas en la flecha suba, epro anda de poner otra para que baje.
    3. Se puede hacer como el tuyo para que se deslice y no pege un salto directo?

    Muchas gracias por el post, es de mucah utilidad

    ResponderEliminar
  23. Hola Alvy!,

    En este post hay un tutorial con imágenes sobre cómo poner las flechas de Subir y Bajar así como el efecto deslizante.

    Saludos.

    ResponderEliminar
  24. Mil gracias por la ayuda, ahora todo está solucionado. Esta página es la bomba y tú una gran persona.

    Saludos

    ResponderEliminar
  25. Qué bueno que puede serte de ayuda este sitio ;)
    Un abrazo!

    ResponderEliminar
  26. GRACIAS!!!!
    PUDE PONERLO!!!
    xD
    SALUDOS!!!! ^^

    ResponderEliminar
  27. Qué bueno que te sirvió.
    Saludos.

    ResponderEliminar
  28. Hola.
    Gracias, me funciono perfectamente :B
    Oye y puedo hacer lo mismo pero con un gif ?

    ResponderEliminar
  29. Claro, acepta cualquier formato de imagen.

    Saludos.

    ResponderEliminar
  30. Hola Potro, quiero hacerte esta consulta y es ¿cómo hago para poner 2 imagenes flotantes independientes.?, y que al darle click me enlacen a otras paginas, Gracias

    ResponderEliminar
  31. Del mismo modo, sólo agrega otro código por cada imagen flotante que quieras pero cambia donde dice bottom:0 y left:0 por otro valor, por ejemplo bottom:50px;
    De este modo no quedarán encimados.

    Para que tengan enlace usa el segundo código, sólo cambia el signo de gato (#) por la URL del enlace.

    ResponderEliminar
  32. Gracias, ahora si funcionó, muchas Gracias.

    ResponderEliminar
  33. me gustó la forma triangular q tu pusiste.
    como la hiciste?
    abrazoz

    ResponderEliminar
  34. Con Photoshop, pero igual lo puedes hacer con cualquier programa de diseño que permita guardar archivos en formato PNG.

    Saludos.

    ResponderEliminar
  35. Hola Potro mira al poner la url de la imagen me sale en la parte iziquerda la imagen pero al darle a la imagen me redireccion a la misma pagina que estoi

    ResponderEliminar
  36. Hola tomeuelxulo,

    Necesitaría ver tu blog para saber cómo arreglarlo. Si usas una plantilla que tiene los nombres comunes de los elementos entonces sólo cambia en el código el # por #outer-wrapper y con eso deberá arreglarse.

    ResponderEliminar
  37. Hola Portro,Bueno aqui te dejo el blog mas que nada es una web echa en paginaswebgratis.es i bueno es de habbo esta es la web:
    http://multi-mas-habbo.es.tl

    ResponderEliminar
  38. Sobre esas páginas no sé, yo sólo conozco la plataforma Blogger.

    ResponderEliminar
  39. mE funcionó muy bien..thanks ....Bye[^_^]

    ResponderEliminar
  40. Una pregunta, y si quiero agregar mas de una imagen, para que queden centradas?

    ResponderEliminar
  41. Haces lo mismo sólo que en el segundo código donde dice left:0; lo cambias por otro valor, por ejemplo left:300;

    ResponderEliminar
  42. hola denuevo jejeje una duda: alguna forma de que una imagen me me mande directamente ala la parte de los comentarios de la entrada que estan biendo en eses momento, es decir la igagen es siempre la misma talvez en algun gadget pero lo que quiero es que me mande a los comentarios de la entrada que se este viendo.

    ResponderEliminar
  43. Desconozco cuál sería la URL para que te mande directo a los comentarios :\

    ResponderEliminar
  44. EN

    (ENCONTRE LA RESPUSTA EN TU BLOG:
    UTILIZANDO EL TRUCO DE USAR UNA IAMGEN PARA BAJAR Y SUBIR
    EN LUGAR DE comment-form PUSE: #comment-form
    AUNQUE NO FUNCIONA EN LA PAGINA PRINCIPAL SI FUNCIONA EN LAS ENTRAS, BASTA CONQUE CONDICONE ESTO PARA QUE SOLO APARESCA SOLO EN LAS ENTRADAS. PUSE PARENTESIS EN LUGAR DE LOS SIGNOS MAYORQUE Y MENORQUE porque en el comentario no medeja o por lo menos no se como jejeje


    (a href='#comment-form))(img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /)(/a)

    gracias

    ResponderEliminar
  45. Hola.
    como puedo poner la imagen flotante, pero que al hacer click sobre ella, enlace a una página web o así?, por favor, si puedes explicarlo paso a paso, no tengo mucho manejo con blogger

    ResponderEliminar
  46. Usa el segundo código que se menciona y en lugar de poner el signo de gato (#) pon la URL a la que quieres que enlace la imagen.

    ResponderEliminar
  47. POTRO POTRO, quiero poner una imagen flotante que quede asi
    bottom:100; left:10; pero no aprece solo cuando le pongo Valor "cero" a bottom aparece de nuevo, mi idea es poner la imagen para que quede en medio , osea desde abajo 100 px para arriba.

    ResponderEliminar
  48. NEJO NEJO... jaja XD

    Es mejor que uses el valor top. Pero ese no es el problema, sino que al parecer no le estás poniendo px después del valor. Recuerda que si le pones 100 de distancia entonces debe ser 100px
    En el código que yo he puesto no indica los px porque cuando se trata de un valor de cero no importa si se le pone el px al final, pero si es un valor mayor o menor a cero entonces sí es necesario ponerlo.

    ResponderEliminar
  49. Hola si pudieras ayudarme porfavor .. dime como le hago para poner un .swf como imagen flotante...

    ResponderEliminar
  50. Nunca lo he intentado pero puedes probar poniendo antes de </body> esto:

    <div style="position:fixed; bottom:0; left:0;">Aqui el codigo del archivo SWF</div>

    En esta entrada puedes ver como es el codigo para mostrar archivos en SWF.

    ResponderEliminar
  51. muy buena, gracias fue de gran ayuda

    saudos

    ResponderEliminar
  52. Hola,

    La URL que estás poniendo no es la correcta. Pon esta y te funcionará:
    https://lh5.googleusercontent.com/_4LWuHagEs0I/TZijnnuWPyI/AAAAAAAADf0/R289w5_anKk/Escudo%20RIMC5-1.jpg

    ResponderEliminar
  53. Me gusto este truco. No sabes cuánto me ayudó, gracias.

    ResponderEliminar
  54. Una pregunta: ¿por qué no sale mi logo completo en el comentario? Será que no tiene la medida correcta. Cuando tengas tiempo checa mi blog lo he ido transformando con tu ayuda.

    Bye!!!

    ResponderEliminar
  55. Efectivamente, lo que sucede es que tu logo seguramente es rectangular y no cuadrado como los avatares.

    Saludos!

    ResponderEliminar
  56. Como puedo hacer que la imagen se quede fija en una parte de la plantilla y no baje con el resto.., no se si me explico?

    ResponderEliminar
  57. Creo que no he entendido bien, ¿me podrías dar un ejemplo más detallado?

    ResponderEliminar
  58. Potro, creo que @ LUIS -se refiere a la position:fixed;

    Aunque dice fija, la misma baja con la pagina...

    Bueno, solo intento ayudar....:)

    ResponderEliminar
  59. Pues entonces Luis no leyó bien la entrada porque justamente eso es lo que se consigue con las indicaciones del post ;)

    ResponderEliminar
  60. Amo tu Blog y no había podido comentarte desde que hice el mio porque no podía y era por unas cokies q no tenia activadas... Bueno gracias por todos los aportes están hermosos buen trabajo¡¡¡

    A mi me gustaría hacer algo parecido a esto q explicas pero vi en un blog q al dar clik a la imagen salia un chat aquí: http://annyz-kawaii.blogspot.com/ y mi pregunta es como puedo hacer que la imagen fija se deslice y muestre mi chat como en este blog http://annyz-kawaii.blogspot.com/ donde el osito desliza el chat de la derecha... o de que forma con q términos o como se llama la aplicación para buscarla en la red en dado caso q no puedas ayudarme.. Gracias

    ResponderEliminar
  61. Hola *✿。Mianaly。✿*,

    Muchas gracias por tu amable comentario.
    Tengo un menú parecido, que es un menú vertical con efecto deslizante, sólo sería cuestión de que el botón que abre el menú lo cambies por una imagen, y en lugar de poner enlaces en el menú pongas el código del chat.
    Espero y funcione ;)

    Saludos.

    ResponderEliminar
  62. muchisimas gracias amigo...

    ResponderEliminar
  63. Hola Potro.
    Me gustaría tener una imagen que se expandiera o cambiara por otra al pasar el cursor y que, al clicar, enlazara con una estática de mi blog.
    Llevo detrás de este efecto una larga temporada y ojeando mi página Goggle+, lo he visto en un botón de youtube que cuando pasas el cursor se expande mostrando un buscador.
    ¿Puede hacerse?. Ya me contarás.
    Gracias de antemano.
    Un saludo.

    ResponderEliminar
  64. Hola Tapestryworkerman,

    Puedes usar el código de esta entrada:
    http://ciudadblogger.com/2009/09/cambiar-imagen-al-pasar-el-mouse.html

    Sólo añade dentro de él los estilos que la harán flotante:
    style='position:fixed; bottom:0; left:0;'

    Y el enlace se lo agregas del mismo modo como se lo pondrías a cualquier imagen o elemento.
    Saludos.

    ResponderEliminar
  65. Ups!!
    Ahora que lo dices... ya se me podía haber ocurrido, que ya lo implanté en su día sin ser flotante.
    Aún con todo no descarto volver a pedirte ayuda, que me conozco y soy duro de mente.
    Muchas gracias Potro, no sé que haría sin ti ;)
    Un saludo.

    ResponderEliminar
  66. Cuando lo necesites por aquí andaremos ;)
    Saludos.

    ResponderEliminar
  67. en vez de poner una imagen puedo poner un codigo HYML (?)

    ResponderEliminar
  68. Sí, consigue la ID del gadget al que quieres hacer flotante, luego pon antes de ]]></b:skin> esto:

    #ID {
    position:fixed;
    bottom:0;
    left:0;
    }

    Donde dice ID debe ir la ID del gadget que que quieres hacer flotante.

    ResponderEliminar
  69. Hola Potro.
    Ya he puesto la imagen con enlace, pero me gustaría subirla para que me quede un par de centímetros por encima del rincón, la veo muy abajo.
    A ver que valor tengo que cambiarle...
    Un saludo.

    ResponderEliminar
  70. bottom:0; es la distancia desde abajo, con ese valor indica que esta 0px desde abajo, pero si lo cambias por ejemplo a bottom:30px; entonces se subirá un poco pues le indicarás que debe estar 30px desde abajo.

    Saludos.

    ResponderEliminar
  71. oye bro! hice casi un invento con tu aporte! jeeje bueno no invento, me qedo chido gracias a tu ayuda,pero busco que mi swf qede delante de todo lo que esta publicado en mi blogger , ayudame por fas esta es la pagina comunicate en el chat con dj willo por fas

    ResponderEliminar
  72. sorry no deje la pagina jejejeje http://portalnaomix.blogspot.com/

    ResponderEliminar
  73. Hola Williams, ¿cuál es el SWF que quieres que quede encima de todo y exactamente cuál es la idea que tienes en mente?

    Saludos!

    ResponderEliminar
  74. volvi a encontrar la pagina amigo potro, mira no me deja poner el codigo htmlpero qedo bien visita esta pagina http://www.portalnaomix1.blogspot.com y ve que no queda al frente ,ejemplo tengo xat ai en la pagina y la imagen queda detras del xat cuando pasa por ella., para que te des una idea quiero algo parecido a esta pagina www.portalfoxmix.net

    ResponderEliminar
  75. sorry bro el de arriba soy williams, solo qe en otra cuenta :D

    ResponderEliminar
  76. Es que el chat es un archivo en flash, así que debes aplicarle una transparencia:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    ResponderEliminar
  77. COMPA AHORA SI ESTOY EN MI CUENTA! ;) LA NETA ERES UNA GANGA EN LOS CODIGOS HTML , QUEDO CHIDO! ;) POR CIERTO MUCHAS GRACIAS! VISITANOS CUANDO GUSTES Y VE EL REPRODUCTOR QUE CON TUS TUTORIALES MONTE www.portalnaomix.blogspot.com

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

    ResponderEliminar
  79. hola me gustaria colocar un archivo flash como lo hAgo

    ResponderEliminar
    Respuestas
    1. Aquí está el código de los archivos en flash:
      http://ciudadblogger.com/2009/06/insertar-banners-en-flash.html

      Eliminar
  80. hola potro m gustaria poner un png (http://imageshack.us/photo/my-images/818/designers004.png/) encima del titulo de mi pagina o mas bien a un lado sobreponiendose al background del titulo y q no sea flotante, q sea estatica..te advierto q mi cidigo es algo distinto.

    ResponderEliminar
    Respuestas
    1. Pega este código en un elemento HTML/Javascript:
      <img border='0' src='http://img818.imageshack.us/img818/6170/designers004.png' style='position:absolute; margin-top:10px; margin-left:10px;'/>

      Con los márgenes que aparecen en ese código puedes controlar hacia donde posicionarla.

      Eliminar
  81. ¿Se le puede poner condicionales? Lo intenté pero no jaló

    Saludos.

    ResponderEliminar
    Respuestas
    1. Sí, sólo tienes que encerrar el código dentro de la condicional que necesitas:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
  82. Hey Potro fantasticos tutoriales.

    En mi caso tengo tres imagenes que linkean a otras webs, funciona todo perfecto pero mi duda es: ¿ Puedo añadirle algo al código para que el sitio a donde linkean se abra en otra pestaña o en otra ventana ?

    Gracias de antemano, seguro se puede pero no se tanto HTML.

    ResponderEliminar
    Respuestas
    1. Claro que sí Spastik, el atributo target="_blank" es el que abre los enlaces en otra ventana:
      http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Eliminar
    2. Gracias por la respuesta pero ahora que me he puesto a ello, he visto que la sintaxis de mi codigo es diferente al que pones de ejemplo en esa entrada.

      Yo uso:

      http://pastebin.com/RXL19RZu (no me deja copiarlo aqui)

      Entonces he probado a añadir el apartado target="_blank" por varios lados pero ninguno funcionó.

      Me puedes hechar un cable ?

      Gracias.

      Si quieres pasarte por el blog es spastikus blogspot com

      Eliminar
    3. Ahí no veo que tengas puesto el atributo target="_blank" por ningún lado, tienes que ponerlo como se indica en esa entrada.

      Eliminar
  83. Como hago para que las imagenes queden fijas pero se cambien igual ¿?? en vez de ser flotante en todo el blog! Mi blog es http://iintermundo.blogspot.com

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

    ResponderEliminar
    Respuestas
    1. No hace falta duplicar las preguntas, ya te he respondido en la otra entrada.

      Eliminar
  85. Hola, me gustaría poner este gadget, pero que al momento de darle click me abra otra nueva pestaña y que se conserve la anterior. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Alberto, sólo agrega al enlace el atributo target="_blank" como se explica aquí:
      http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Eliminar
  86. Hola, quisiera saber como hacer que no sea flotante, la quiero en la esquina superior ya que simula una hoja doblada que me lleva al facebook, y solo quiero que aparezca arriba del todo al inicio , es decir que cuando baje por la página ya no se vea. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Focusyn, cambia el position:fixed; por position:absolut;

      Eliminar
  87. Hola: tengo un problema con el widget de imagen en blogger. Antes de subirla al widget la imagen esta brillante y con sus colores reales; pero luego que la subo se ve opaca y algo amarillenta. Cómo puedo solucionar esto?

    ResponderEliminar
    Respuestas
    1. Casi siempre que se sube una imagen a la red se da el mismo problema. Puedes probar subir la imagen a otro alojamiento como Dropbox, ahí no perderá calidad. Ya que tenga la imagen en Dropbox entonces usa el gadget HTML/Javascript y pega ahí el código de una imagen.

      Eliminar
    2. Hola

      Gracias por la respuesta; se me ocurrió una solución gracias a tu ayuda. Abrí un nuevo post, subí la imagen que quería y luego copié el código HTML de la imagen y lo pegue en el gadget HTML/Javascript. Ahora la imagen se ve clara y con sus colores reales.

      Gracias de nuevo

      Eliminar
  88. Hola Potro podrias ayudarme para recorrer los candeladros que puse como imagenes flotantes a los costados del blog? en la foto te se:alo adonde quiero moverlos, muchas gracias !
    https://dl.dropbox.com/u/34230564/%5B2012%5D/LEONARDOH.jpg

    ResponderEliminar
    Respuestas
    1. ¿Quieres ponerlos al rededor? Entonces a cada una le deberás poner un bottom distinto. Juega con los valores de cada una por ejemplo, las de abajo serían bottom:0px; pero la distancia desde la izquierda no sería siempre la misma, una sería left:0px; otra left:250px; etc.

      Eliminar
  89. Hola, estoy visitando tu web hace unos días y me ha parecido muy útil...a pesar de que realizo el procedimiento...la imagen queda detrás del fondo, es decir, se que esta ahí porque aparece cuando se carga, pero cuando termina de cargar, el fondo y demás la cubre, ya intente con la propiedad z-index, pero no funciono...u.u ojala puedas responder a mi duda pronto, Gracias

    ResponderEliminar
  90. Hola, eché un vistazo a tu blog beta y te quería preguntar como haces para que tu cursor tenga ese texto?, Gracias.

    ResponderEliminar
    Respuestas
    1. Mira la categoría "Cursores", ahí verás algunos efectos para el cursor.

      Eliminar





  91. Hola Potro ! necesito tu ayuda!!!! soy super nueva en esto ....estoy creando un blog , pero quiero poner en el ,un dibujo que no esta en las plantillas de blogger;como hago?? me ayudas por favor?
    Graias;)

    ResponderEliminar
    Respuestas
    1. Hola soraya, ¿en dónde exactamente quieres poner el dibujo?

      Eliminar
  92. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Mira esta entrada:
      http://ciudadblogger.com/2009/07/decora-los-titulos-de-los-post-con.html

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Encima no lo sé, pues si bien puedes usarla como un fondo, el fondo nunca está encimado al elemento, por lo tanto no sé cómo pueda hacerse.

      Eliminar
  93. como puedo hacer una barra interface flotante fijo en la parte inferior sin que se pierda aunque entre a otras paginas que siempre este ahi sin actualizarse ayudame brooo mi face es https://www.facebook.com/german.aro?ref=tn_tnmn
    responde por fa!

    ResponderEliminar
  94. como puedo hacer barra interface flotante fija en la parte inferior
    y cuando entre a otras paginas este barra que no se actualice junto con la pagina que siempre este abierta por fa ayuda broo

    ResponderEliminar
    Respuestas
    1. En Blogger no se puede german, cuando carga la página cargan todos los elementos que hay en ella.

      Eliminar
  95. Excelente truco Potro!
    oye como le hago para poner la imagen centrada?
    checa mi blog http://revistapixelmx.blogspot.mx/?m=0

    ResponderEliminar
    Respuestas
    1. ¿Para centrar una imagen estática? Cambia el left:0; por left:45%;

      Eliminar
  96. Si, potro no se centra, checa en mi blog y veras que se carga hacia la derecha http://revistapixelmx.blogspot.mx/?m=0

    ResponderEliminar
    Respuestas
    1. Cámbialo por un valor más bajo entonces hasta que quede donde deseas, pero toma en cuenta que la posición es fija, y que si alguien entra desde un monitor más grande no lo verá en el mismo lugar que tú lo ves.

      Eliminar
  97. PERFECTO POTRO!! eres un maestro, gracias totales.

    ResponderEliminar
  98. Hola otra vez jajajja lo siento si soy muy coñazo, yo queria poner una imagen estática pero en mi barra lateral derecha fija no k me quede como está ahora en mi blog.

    ResponderEliminar
    Respuestas
    1. No he comprendido, de forma fija es como se menciona en esta entrada, si la quieres en la sidebar no estará flotante.

      Eliminar
  99. y eso cómo se hace? el que quede en la sidebar

    ResponderEliminar
  100. Me Hola, Te felicito por tus post, son muy interesantes, En especial del formulario con dropbox, me facilita para mi negocio. Visita mi blog www.cjmarflo.blogspot.com

    ResponderEliminar
  101. POTRO YO QUIERO ES EL QUE SE PONE AL EMPEZAR LA PAGINA D EBLOGGER, CUANDO TU INICIA TE DA LA OPCION DE DARLE A ME GUSTA O CERARLO Y SEGUIR EN LA PAGINA


    HEPP¡¡ AHI POTRO

    ResponderEliminar
  102. Hola El Potro, estoy empezando y me gustaría saber si se puede poner que al pasar el cursor cambie la imagen y no haga scroll con la página que se quede fija en un solo sitio.
    Gracias y haces un trabajo enorme.

    ResponderEliminar

  103. Hola Potro quisiera saber si hay alguna forma de poner en blogger un fondo de mas de 300k me lo puedes decir? y si quiero poner 2 imagenes flotantes como lo hago?
    Por favor...

    ResponderEliminar
    Respuestas
    1. Hola, puedes repetir el código de la imagen flotante, sólo tendrás que modificar los valores de top, bottom, right o left, según sea el caso, para que no se encime una imagen encima de otra.
      En cuanto a lo otro, nunca me he fijado de qué tamaño son las imágenes que subo, pero no debería haber problema con ese tamaño.

      Eliminar
  104. Buenas, yo he intentando colocar el mi blog en el lado superior derecho una imagen que diga hecho en venezuela, como lo hago???

    ResponderEliminar
    Respuestas
    1. Del mismo modo como se explica en esta entrada, sólo cambia los valores para que esté en top (arriba) y right (derecha). La imagen tendrías que encontrarla en la red.

      Eliminar
  105. hola potro

    Me gustaria saber si puede hacer esto en una imagen flotante?

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Esto mismo es una imagen flotante, a menos que tengamos conceptos distintos.

      Eliminar
  106. Potro como ago para que me quede totalmente flotante ( ensima de los menus y videos ) porque intento ponerla justo en donde tengo un video y un menu y quiero que la imagen me quede en primera capa.. :)

    ResponderEliminar
  107. Muchísimas gracias de verdad que me sirvió mucho esto, solo una duda ¿Cómo le hago para que la imagen no se abra de nuevo cuando veo un post?
    Gracia de nuevo.

    PD: Ame tu blog eres muy buena onda en ayudar a la comunidad bloggera :)

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario, puedes encerrar el código entre:
      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      y

      </b:if>

      Para que sólo se vea en la portada del blog.

      Eliminar
  108. Hola, gracias por todo lo que nos ayudas con el diseño.... Tengo un problema y es que he intentado insertar la imagen flotante como indicas, y salir, sale, pero queda tapada bajo el cuerpo de las entradas del blog.... Solo se ve una esquinita del dibujo que obviamente esta insertada en el codigo de la pagina, pero luego , las entradas del blog y los demas elementos se quedan encima, y no dejan que se vea... Como puedo solucionar esto??? Te agradezco enormemente tu ayuda. He intentado tambien hacer lo que comentabas en el comentario anterior, pues es mas o menos, lo que me ocurre a mi, pero me da error en la comprobacion de codigo... Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Raquel, en el código de la imagen flotante, después de style=' agrega:
      z-index:999;

      Eliminar
  109. hola!! si pude poner la imagen pero no logro hacer que suba al inicio del blog cuando le hago clik a que se debe! me ayudas!!??...muchas gracias por la ayuda...te dejo la direccion de mi blog!... http://theangelofreading90.blogspot.mx/

    ResponderEliminar
  110. ¿Cómo que si quiere poner una imagen flotante con un link? Es decir que flote y si le doy clic me lleve a otra pestaña.

    ResponderEliminar
  111. Y ¿no se puede poner en el centro? Es decir centrar la imagen ??

    pd: buen post

    ResponderEliminar
    Respuestas
    1. Sí, sólo cambia el valor de left:0; por ejemplo:
      left: 45%;

      Eliminar
  112. hola, me ayudarias a paginar mi blog?? se supone que traer el tema una paginación pero no me funciona, ojala puedas ayudarme, no importa si me cobras!!

    http://gratisparatufiesta.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola, parece que al final pudiste resolverlo. Saludos.

      Eliminar
  113. Potro y si lo que quiero es poner un anuncio Adsense (120x600) como lo hago?

    ResponderEliminar
    Respuestas
    1. Eso está penalizado, si AdSense se da cuenta que tienes un anuncio de esa manera te cancela la cuenta.

      Eliminar
  114. holaa muy interesante,el otro dia vi un blog con una imagen fija igual nos as enseñado pero esta imagen segun creo eera formato png y solo se veia la silueta de una persona sin recuadros de la foto ni nada como recortada,seria interesante ponerla asi.nos enseñas?graciass y un salu2.

    ResponderEliminar
  115. bueno muy interesante el otro dia vi un blog con un efecto diferente es decir con la imagen como tu nos has enseñado pero esta imagen creo que era formato png y solo se veia la silueta de la foto es decir la silueta de una persona sin que salga la foto cuadrada lo vi interesante,sabrias ayudarnos a poder ponerla asi gracias y un salu2.

    ResponderEliminar
    Respuestas
    1. Es el mismo procedimiento, ya tú eliges el formato de la imagen si la quieres en JPG, PNG, GIF, etc. La que yo tengo de ejemplo es PNG, y el procedimiento no cambia.

      Eliminar
  116. como estas pana necesito de tu ayuda, quiero publicar en Mercado Libre la imagen flotante, en el momento q estoy editando me aparece bien en el cuadro Html y cuando lo voy a publicar y todo eso ya no me aparece no se q esta mal o es algun codigo diferente, ayudame q me aparezca en mi publicidad...Gracias saludos desde Ecuador

    ResponderEliminar
  117. como estas pana necesito de tu ayuda, quiero publicar en Mercado Libre la imagen flotante, en el momento q estoy editando me aparece bien en el cuadro Html y cuando lo voy a publicar y todo eso ya no me aparece no se q esta mal o es algun codigo diferente, ayudame q me aparezca en mi publicidad...Gracias saludos desde Ecuador

    ResponderEliminar
    Respuestas
    1. No sé si ML tenga alguna restricción para ese tipo de códigos y por eso los evite.

      Eliminar
  118. Hola buena aportacion c: solo quisiera saber como le hago para ponerle un tamaño especifico? (suponiendo que pongo 2 imagenes una ala derecha y una a la izquierda) y que esten del mismo tamaño aunque en el URL sean de diferentes y son imagenes PNG

    ResponderEliminar
    Respuestas
    1. Hola, después de style='
      Agrega:
      width:150px; height: 150px;

      width es el ancho de la imagen, y height el alto.

      Eliminar
  119. Hola Potro quisiera saber si puedo poner un reproductor de musica en vez de una imagen fija (el reproductor es un codigo HTML)?

    ResponderEliminar
  120. Hola Potro quisiera saber si puedo poner un reproductor de musica mp3 en vez de una imagen fija (el reproductor es un codigo HTML)?

    ResponderEliminar
  121. Hola Potro quisiera saber si puedo poner un reproductor de musica en vez de una imagen fija (el reproductor es un codigo HTML)?

    ResponderEliminar
    Respuestas
    1. Claro. Pon tu reproductor en un gadget, luego pon antes de ]]></b:skin> esto:

      #ID {
      position:fixed;
      bottom:0;
      left:0;
      }

      Donde dice ID debe ir la ID del gadget que que quieres hacer flotante.

      Eliminar
  122. Hola Potro,

    me gustaría saber como poner una imagen fija y luego anunciar algo con un texto. No sé si todo ello se hace con imagenes o se puede poner el texto y que vaya rotando y se vea en distintos tiempos, no se si me he explicado

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Ambrosia, una forma muy sencilla de hacerlo es que crees un gadget HTML/Javascript, ahí puedes poner todo lo que quieras, imágenes, texto, tablas, vídeos, etc., etc. Luego, identifica el ID de tu gadget y en los estilos antes de ]]></b:skin> agrega esto:

      #ID {
      position:fixed;
      bottom:0;
      left:0;
      }

      Donde dice ID pondrías la ID del gadget que creaste y que quieres hacer flotante.
      Saludos.

      Eliminar
  123. hola gracias por el aporte, bueno me podrias decir si quisiera cambiar el imagen por un script de seguir de facebook que codigo utilizaria.
    GRACIAS ESPERO UNA RESPUESTA!

    ResponderEliminar
  124. gracias por tus tutoriales la verdad que me ayudan mucho. pero como se haria para que aparezca una imagen flotante sólo al ver las entradas del blog y que aparezca solo cuando llegas al final de la entrada. porque quisiera poner una imagen que diga "No olvides comentar" o algo así y que aparezca al llegar al final de la entrada.

    Me podrias ayudar?

    ResponderEliminar
    Respuestas
    1. Lo primero sería usando condicionales:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Lo segundo es más complejo ya que necesitarías usar algún plugin de jQuery, tal vez algo como esto, aunque no lo he probado para algo como lo que deseas:
      http://ciudadblogger.com/2013/02/enlaces-de-navegacion-que-aparecen-al-bajar-la-pagina-y-muestran-el-nombre-de-las-entradas.html

      Eliminar
  125. Mi pregunta es como hago si quiero ponerle un Link a esta imagen ?? .__.

    ResponderEliminar
    Respuestas
    1. Del segundo código de ejemplo cambia el signo de gato # por la URL que quieras ponerle.

      Eliminar
    2. Disculpa que te aturda con tantas preguntas , pero como hago para poner mas de una imagen ?? osea una debajo de otra y que todas esten flotando ? gracias de antemano :)

      Eliminar
    3. Y se puede hacer para que los enlaces se abra con Pop Up ??

      Eliminar
    4. Agrega otro código igual, sólo cámbiale los valores de top/bottom y left/right, juega con esos valores para que no se encimen.

      Eliminar
    5. Lo que pasa es que quiero hacer 4 y que esten seguidas uno arriba de otro
      pero con Top - Bottom simplemente uno se pone hasta la cima y otra bien abajo y lo que quiero es que esten en fila los 4 se podra hacer eso ?

      Eliminar
    6. Usa top si quieres que estén arriba, y bottom si quieres que estén abajo. Left si quieres que estén a la izquierda y right si quieres que estén a la derecha.
      ¿Cómo acomodarlas? jugando -como te decía- con sus valores, por ejemplo, a una le pones left:0px; a otra left:200px;
      Eso significa que una estará a 0 pixeles desde la izquierda y la otra a 200px desde la izquierda lo cual hará que estén en fila horizontal. Si las quisieras en vertical entonces el valor bottom es el que cambiarías, por ejemplo: bottom:0px; y bottom:200px;

      Eliminar
    7. me podrias dar un ejemplo ??
      mis imagenes son estas :c
      'http://i235.photobucket.com/albums/ee11/blade159753/rad1_zps02b76225.png'

      http://i235.photobucket.com/albums/ee11/blade159753/rd2_zps8bcdf5b2.png'

      quiero que esten en fila en vertical y van a ser 4 seguidos

      Eliminar
    8. Tal como te dije Sergio, pon valores distintos a cada imagen. Debes jugar tú mismo con los valores hasta que encuentres la distancia que deseas entre cada una de ellas. Tienes que probar para comprender su funcionamiento.

      Eliminar
  126. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  127. Hola Potro, soy novata en blogger y me están sirviendo mucho tus tutoriales, gracias.
    Me gustaría saber si puedo utilizar una imagen fija para hacer un menú desplegable. Quisiera poner la imagen debajo de la cabecera y dentro de esa imagen insertar un menú. La imagen que quiero usar es circular. Si esto es posible, podrías explicarme cómo se hace? Te estaré muy agradecida, amigo. Gracias nuevamente.

    ResponderEliminar
    Respuestas
    1. Hola Claudia, puedes poner un menú y como fondo puedes poner la imagen que deseas. Que este fondo sea flotante quizá no sea lo más conveniente porque entonces los enlaces se perderían cuando se baje por la página. Saludos.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger