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:
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:
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>
Ciudad Blogger
¡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).
ResponderEliminarGracias (:
Hola Jazmine Dguez. [bajo el pseudónimo de Lilith†La†Enemiga†d†Eva],
ResponderEliminarSi 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.
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.
EliminarNo debe interferir con nada, es probable que estás colocando algo mal, o borrando algo al poner este.
EliminarPotro 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.
ResponderEliminarno se si me explico bien como es la idea, es una forma de usar imagen flash con ruta URL.-
Puedes poner varios, sólo necesitas cambiar la posición de cada uno para que no queden encimados.
ResponderEliminarTambién puedes poner un enlace, sólo sustituye en signo de gato (#) por la URL que quieras:
<a href='#'>
Saludos.
gRACIAS POTRO PROBARE COMO ME VA, GRACIAS POR TU AYUDA
ResponderEliminarSeguro te irá bien.
ResponderEliminarSaludos.
Por nada admin, saludos.
ResponderEliminarHola Potro
ResponderEliminarQuiero poner borde en mis imágenes pero en mi plantilla no encuentro la famosa parte: .post img
¿Qué puedo hacer?
Gracias
Hola ABRIL,
ResponderEliminarEntonces agrégalo a la plantilla:
.post img {
padding:4px;
border:1px solid #CCC;
}
Saludos.
Hecho.
ResponderEliminarMil gracias
No lo veo en el ejemplo Potro, me ayudas?
ResponderEliminarHola AlexTfe26,
ResponderEliminarEl 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.
Pero la imagen, puede ser cualquier cosa? incluso un dibujo, no tiene por que ser triangular no?
ResponderEliminarPor 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.
Claro, puede tener la forma que quieras, circular, cuadrada o sin forma, eso ya es a tu elección.
ResponderEliminarAl rato me doy una vuelta por tu blog.
Saludos!
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?
ResponderEliminarGracias tu blog me ha ayudado muchisimo, eres un maquina.
La primera pregunta no la he entendido.
ResponderEliminarPara 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.
Me explique mal , me referia si esa imagen estatica se quita al pulsar la tecla ESC como la musica del blog.
ResponderEliminarNo, la imagen queda estática, no se quita.
ResponderEliminarSaludos.
muy util, gracias por enseñar lo que sabes ;)
ResponderEliminarEs un placer poder compartirlo =)
ResponderEliminarhola¡¡ por aki molestando otra vez que codigo muevo para que la imagen me quede centrada en la parte inferior del monitor?
ResponderEliminarHola ,
ResponderEliminarModifica donde dice left:0;, cambialo por left:600px; u otro valor hasta que quede centrada como quieres.
Saludos.
SE PUEDE HACER QUE UNA IMAGEN FLOTANTE SEA UN ENLACE
ResponderEliminarBENGA MAJO GRACIAS
Claro, en el segundo código sólo hay que cambiar el signo de gato # por la URL del enlace que quieres.
ResponderEliminarSaludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarTengo un par de dudas:
ResponderEliminar1. 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
Hola Alvy!,
ResponderEliminarEn este post hay un tutorial con imágenes sobre cómo poner las flechas de Subir y Bajar así como el efecto deslizante.
Saludos.
Mil gracias por la ayuda, ahora todo está solucionado. Esta página es la bomba y tú una gran persona.
ResponderEliminarSaludos
Qué bueno que puede serte de ayuda este sitio ;)
ResponderEliminarUn abrazo!
GRACIAS!!!!
ResponderEliminarPUDE PONERLO!!!
xD
SALUDOS!!!! ^^
Qué bueno que te sirvió.
ResponderEliminarSaludos.
Hola.
ResponderEliminarGracias, me funciono perfectamente :B
Oye y puedo hacer lo mismo pero con un gif ?
Claro, acepta cualquier formato de imagen.
ResponderEliminarSaludos.
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
ResponderEliminarDel 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;
ResponderEliminarDe 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.
Gracias, ahora si funcionó, muchas Gracias.
ResponderEliminarTe han quedado muy bien ;)
ResponderEliminarme gustó la forma triangular q tu pusiste.
ResponderEliminarcomo la hiciste?
abrazoz
Con Photoshop, pero igual lo puedes hacer con cualquier programa de diseño que permita guardar archivos en formato PNG.
ResponderEliminarSaludos.
listo!!
ResponderEliminargracias Potro
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
ResponderEliminarHola tomeuelxulo,
ResponderEliminarNecesitarí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.
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:
ResponderEliminarhttp://multi-mas-habbo.es.tl
Sobre esas páginas no sé, yo sólo conozco la plataforma Blogger.
ResponderEliminarmE funcionó muy bien..thanks ....Bye[^_^]
ResponderEliminarGracias!
ResponderEliminarUna pregunta, y si quiero agregar mas de una imagen, para que queden centradas?
ResponderEliminarHaces lo mismo sólo que en el segundo código donde dice left:0; lo cambias por otro valor, por ejemplo left:300;
ResponderEliminarhola 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.
ResponderEliminarDesconozco cuál sería la URL para que te mande directo a los comentarios :\
ResponderEliminarEN
ResponderEliminar(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
Mira que aprendes rápido ;)
ResponderEliminarHola.
ResponderEliminarcomo 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
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.
ResponderEliminarperfecto. gracias
ResponderEliminarPOTRO POTRO, quiero poner una imagen flotante que quede asi
ResponderEliminarbottom: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.
NEJO NEJO... jaja XD
ResponderEliminarEs 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.
Hola si pudieras ayudarme porfavor .. dime como le hago para poner un .swf como imagen flotante...
ResponderEliminarNunca lo he intentado pero puedes probar poniendo antes de </body> esto:
ResponderEliminar<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.
muy buena, gracias fue de gran ayuda
ResponderEliminarsaudos
Gracias a ti por tu visita!
ResponderEliminarHola,
ResponderEliminarLa 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
Me gusto este truco. No sabes cuánto me ayudó, gracias.
ResponderEliminarUna 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.
ResponderEliminarBye!!!
Efectivamente, lo que sucede es que tu logo seguramente es rectangular y no cuadrado como los avatares.
ResponderEliminarSaludos!
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?
ResponderEliminarCreo que no he entendido bien, ¿me podrías dar un ejemplo más detallado?
ResponderEliminarPotro, creo que @ LUIS -se refiere a la position:fixed;
ResponderEliminarAunque dice fija, la misma baja con la pagina...
Bueno, solo intento ayudar....:)
Pues entonces Luis no leyó bien la entrada porque justamente eso es lo que se consigue con las indicaciones del post ;)
ResponderEliminarAmo 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¡¡¡
ResponderEliminarA 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
Hola *✿｡Mianaly｡✿*,
ResponderEliminarMuchas 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.
muchisimas gracias amigo...
ResponderEliminarlo uso, gracias.
ResponderEliminarHola Potro.
ResponderEliminarMe 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.
Hola Tapestryworkerman,
ResponderEliminarPuedes 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.
Ups!!
ResponderEliminarAhora 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.
Cuando lo necesites por aquí andaremos ;)
ResponderEliminarSaludos.
en vez de poner una imagen puedo poner un codigo HYML (?)
ResponderEliminarSí, consigue la ID del gadget al que quieres hacer flotante, luego pon antes de ]]></b:skin> esto:
ResponderEliminar#ID {
position:fixed;
bottom:0;
left:0;
}
Donde dice ID debe ir la ID del gadget que que quieres hacer flotante.
Hola Potro.
ResponderEliminarYa 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.
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.
ResponderEliminarSaludos.
Gracias Potro.
ResponderEliminarVoy a subir la imagen... ;)
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
ResponderEliminarsorry no deje la pagina jejejeje http://portalnaomix.blogspot.com/
ResponderEliminarHola Williams, ¿cuál es el SWF que quieres que quede encima de todo y exactamente cuál es la idea que tienes en mente?
ResponderEliminarSaludos!
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
ResponderEliminarsorry bro el de arriba soy williams, solo qe en otra cuenta :D
ResponderEliminarEs que el chat es un archivo en flash, así que debes aplicarle una transparencia:
ResponderEliminarhttp://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html
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
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola me gustaria colocar un archivo flash como lo hAgo
ResponderEliminarAquí está el código de los archivos en flash:
Eliminarhttp://ciudadblogger.com/2009/06/insertar-banners-en-flash.html
Grax! me sirvio mucho
ResponderEliminarQué gusto que te haya sido útil :)
Eliminarhola 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.
ResponderEliminarPega este código en un elemento HTML/Javascript:
Eliminar<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.
¿Se le puede poner condicionales? Lo intenté pero no jaló
ResponderEliminarSaludos.
Sí, sólo tienes que encerrar el código dentro de la condicional que necesitas:
Eliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
Hey Potro fantasticos tutoriales.
ResponderEliminarEn 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.
Claro que sí Spastik, el atributo target="_blank" es el que abre los enlaces en otra ventana:
Eliminarhttp://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
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.
EliminarYo 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
Ahí no veo que tengas puesto el atributo target="_blank" por ningún lado, tienes que ponerlo como se indica en esa entrada.
EliminarComo 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
ResponderEliminarNo entendí, ¿me puedes dar un ejemplo?
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarNo hace falta duplicar las preguntas, ya te he respondido en la otra entrada.
EliminarHola, 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.
ResponderEliminarHola Alberto, sólo agrega al enlace el atributo target="_blank" como se explica aquí:
Eliminarhttp://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
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.
ResponderEliminarHola Focusyn, cambia el position:fixed; por position:absolut;
EliminarHola: 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?
ResponderEliminarCasi 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.
EliminarHola
EliminarGracias 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
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 !
ResponderEliminarhttps://dl.dropbox.com/u/34230564/%5B2012%5D/LEONARDOH.jpg
¿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.
EliminarOk, gracias....!
ResponderEliminarHola, 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
ResponderEliminarHola Tatiana, ¿en cuál blog lo has puesto?
Eliminaroye manto... que dificil es!!!
ResponderEliminarLo fácil y difícil es relativo.
EliminarHola, eché un vistazo a tu blog beta y te quería preguntar como haces para que tu cursor tenga ese texto?, Gracias.
ResponderEliminarMira la categoría "Cursores", ahí verás algunos efectos para el cursor.
Eliminar
ResponderEliminarHola 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;)
Hola soraya, ¿en dónde exactamente quieres poner el dibujo?
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMira esta entrada:
Eliminarhttp://ciudadblogger.com/2009/07/decora-los-titulos-de-los-post-con.html
Este comentario ha sido eliminado por el autor.
EliminarEncima 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.
Eliminarcomo 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
ResponderEliminarresponde por fa!
como puedo hacer barra interface flotante fija en la parte inferior
ResponderEliminary cuando entre a otras paginas este barra que no se actualice junto con la pagina que siempre este abierta por fa ayuda broo
En Blogger no se puede german, cuando carga la página cargan todos los elementos que hay en ella.
EliminarExcelente truco Potro!
ResponderEliminaroye como le hago para poner la imagen centrada?
checa mi blog http://revistapixelmx.blogspot.mx/?m=0
¿Para centrar una imagen estática? Cambia el left:0; por left:45%;
EliminarSi, potro no se centra, checa en mi blog y veras que se carga hacia la derecha http://revistapixelmx.blogspot.mx/?m=0
ResponderEliminarCá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.
EliminarPERFECTO POTRO!! eres un maestro, gracias totales.
ResponderEliminarHola 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.
ResponderEliminarNo he comprendido, de forma fija es como se menciona en esta entrada, si la quieres en la sidebar no estará flotante.
Eliminary eso cómo se hace? el que quede en la sidebar
ResponderEliminarSólo es usar el gadget de Imagen.
EliminarMe 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
ResponderEliminarPOTRO 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
ResponderEliminarHEPP¡¡ AHI POTRO
No tengo algún gadget que haga eso :/
EliminarHola, mira el comentario #79
ResponderEliminar
ResponderEliminarHola 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...
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.
EliminarEn 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.
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.
ResponderEliminarhola potro
ResponderEliminarMe gustaria saber si puede hacer esto en una imagen flotante?
Muchas gracias
Esto mismo es una imagen flotante, a menos que tengamos conceptos distintos.
EliminarPotro 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.. :)
ResponderEliminarDespués de esto:
Eliminarstyle='
Agrega esto:
z-index:99999;
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?
ResponderEliminarGracia de nuevo.
PD: Ame tu blog eres muy buena onda en ayudar a la comunidad bloggera :)
Muchas gracias por tu comentario, puedes encerrar el código entre:
Eliminar<b:if cond='data:blog.url == data:blog.homepageUrl'>
y
</b:if>
Para que sólo se vea en la portada del blog.
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.
ResponderEliminarHola Raquel, en el código de la imagen flotante, después de style=' agrega:
Eliminarz-index:999;
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/
ResponderEliminarHola, prueba cambiando esto:
Eliminar#
Por esto:
#navbar
¿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.
ResponderEliminarExacto.
EliminarY ¿no se puede poner en el centro? Es decir centrar la imagen ??
ResponderEliminarpd: buen post
Sí, sólo cambia el valor de left:0; por ejemplo:
Eliminarleft: 45%;
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!!
ResponderEliminarhttp://gratisparatufiesta.blogspot.mx/
Hola, parece que al final pudiste resolverlo. Saludos.
EliminarPotro y si lo que quiero es poner un anuncio Adsense (120x600) como lo hago?
ResponderEliminarEso está penalizado, si AdSense se da cuenta que tienes un anuncio de esa manera te cancela la cuenta.
Eliminarholaa 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.
ResponderEliminarbueno 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.
ResponderEliminarEs 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.
Eliminarcomo 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
ResponderEliminarcomo 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
ResponderEliminarNo sé si ML tenga alguna restricción para ese tipo de códigos y por eso los evite.
EliminarHola 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
ResponderEliminarHola, después de style='
EliminarAgrega:
width:150px; height: 150px;
width es el ancho de la imagen, y height el alto.
Hola Potro quisiera saber si puedo poner un reproductor de musica en vez de una imagen fija (el reproductor es un codigo HTML)?
ResponderEliminarHola Potro quisiera saber si puedo poner un reproductor de musica mp3 en vez de una imagen fija (el reproductor es un codigo HTML)?
ResponderEliminarHola Potro quisiera saber si puedo poner un reproductor de musica en vez de una imagen fija (el reproductor es un codigo HTML)?
ResponderEliminarClaro. Pon tu reproductor en un gadget, luego pon antes de ]]></b:skin> esto:
Eliminar#ID {
position:fixed;
bottom:0;
left:0;
}
Donde dice ID debe ir la ID del gadget que que quieres hacer flotante.
Hola Potro,
ResponderEliminarme 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
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:
Eliminar#ID {
position:fixed;
bottom:0;
left:0;
}
Donde dice ID pondrías la ID del gadget que creaste y que quieres hacer flotante.
Saludos.
hola gracias por el aporte, bueno me podrias decir si quisiera cambiar el imagen por un script de seguir de facebook que codigo utilizaria.
ResponderEliminarGRACIAS ESPERO UNA RESPUESTA!
Hola, mira el comentario que está arriba del tuyo.
Eliminargracias 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.
ResponderEliminarMe podrias ayudar?
Lo primero sería usando condicionales:
Eliminarhttp://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
Mi pregunta es como hago si quiero ponerle un Link a esta imagen ?? .__.
ResponderEliminarDel segundo código de ejemplo cambia el signo de gato # por la URL que quieras ponerle.
EliminarDisculpa 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 :)
EliminarY se puede hacer para que los enlaces se abra con Pop Up ??
EliminarAgrega 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.
EliminarLo que pasa es que quiero hacer 4 y que esten seguidas uno arriba de otro
Eliminarpero 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 ?
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.
Eliminar¿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;
me podrias dar un ejemplo ??
Eliminarmis 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
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.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro, soy novata en blogger y me están sirviendo mucho tus tutoriales, gracias.
ResponderEliminarMe 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.
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.
EliminarAyuda quiero hacer esto mismo en mi plantilla dinámica pero no funciona este código, habrá una manera de hacerlo por css? o como hago?
ResponderEliminarHola Luis Alfredo, en esas plantillas no se pueden añadir elementos.
EliminarAmigo la imagen la quiero poner en una pagina del blog, ya lo he logrado, pero lo que quiero ahora es que la imagen desaparesca en cierto punto, por ejemplo que cuando vaya a la mitad de la pagina la imagen desaparesca, y al subir vuelva a aparecer, es posible?? gracias y saludos :D
ResponderEliminar