28

Imagen flotante en blogger

Algunos de los que habéis pasado alguna vez antes por mi blog habréis visto hace tiempo, la imagen de una mosca (IE) que estaba a la derecha de la página, simplemente la puse ahí un poco a "ojo" probando aquí y allá en la plantilla, pero, sinceramente, no fui capaz a ponerla como quería, es decir, flotante o lo que es lo mismo que cuando bajes la página se mantenga siempre en la misma posición. Hoy he conseguido ponerla así gracias a LIAMNGLS, os recomiendo una visita a su blog, allí os explica como poner una imagen flotante de una forma sencilla y fácil de entender, además su blog tiene otras muchas cosillas interesantes.
¡Que os divirtáis!

Añadido:Abajo, en los comentarios de esta misma entrada, he puesto como conseguir la imagen flotante de una forma más sencilla y que se ve en IE y Firefox.
Antes de </head> ponéis esto:
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Entradas Relacionadas:

28 comentarios:


Jorge ChünK

Hola que tal Rosa, Soy de México. Realmente me han sorprendido como ayudas a los demas con sus blogs, por eso el tuyo esta super padre. Ahora no he podio colocar mi imagen flotante. Podrias ayudarme, talvez sea por que tengo blog beta, nose que podria ser, no encuentro los comandos. Gracias y Felicidaes

Anónimo

Hola Jorge, bienvenido.

He visitado tu blog para ver que plantilla estas usando y he hecho pruebas con una igual, a mi me ha salido, he usado la misma imagen que tiene liamngls en la suya (el jamón) has de tener cuidado con la que uses, no sea mayor que esa y descorriga tu plantilla. Prueba así:

Coloca este código justo después de /* Sidebar Boxes
----------------------------------------------- */

#flotante {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 200px;
width: 200px;
background: url( http://img518.imageshack.us/img518/9598/guijuelovf8.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}
en background: url pones la dirección de tu imagen (entre los parentésis)

Luego justo después de <!-- End #sidebar --> copias este código:

<a id="flotante">Guijuelo</a>
Cambias "Guijuelo" por el nombre que quieras para tu imagen

USA VISTA PREVIA ANTES DE GUARDAR NINGÚN CAMBIO

Si tienes dudas o problemas no dudes en consultar ¿ok?
Saludos!

Jorge ChünK

Hola rosa que tal, pues si me ha ayudado mucho las instrucciones que tu me has dado, ahora no encuentro el apratado !-- End # sidebar -->, para colocar el otro codigo, podrias volverme ayudar. Gracias y sigues siendo el blog mejor explicado.Ya pronto estaras en mi blog. Saludos jorge De México

Anónimo

Tienes razon jorge, en tu plantilla yo tampoco lo veo, a veces, colocando algo en la sidebar, alguna parte de la plantilla desaparece misteriosamente. Pero tu tranquilo, todo tiene arreglo...

Coloca el último trozo justo antes de </body> a mi me ha salido.


Aquí puedes ver mi prueba.

http://estoydepruebasaqui.blogspot.com/

¡Animo y no te rindas!

Anónimo

Jorge he encontrado una forma sencillísima de ponerla, además se ve con firefox e IE perfectamente y no restingre el tamaño.
Justo después de </head>
pones esto:
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Yo lo he puesto así en mis blogs.
Saludos!

Liamngls

Muchas gracias por la reseña. Una cosa importante es guardar una copia de la plantilla siempre que vayamos a modificar algo, precisamente para poder recuperar alguna línea que se pierda por el camino o poder volver de forma fácil al estado anterior.

Es una de esas cosas de las que uno se da cuenta de su importancia cuando la ha pifiado.

Este blog está muy bien, enhorabuena :-)

Anónimo

Gracias a ti Liamngls por la visita, tu blog es uno de mis favoritos, suelo visitarlo a menudo pero nunca he comentado... :-(

Jorge ChünK

Gracias Rosa Y Liamngls. Ya lo esatare probando cuanto antes jejejeje. GRacias de nuevo por su atención.Saludos desde México

Milagros

Una vez más encontré en tu blog lo que necesitaba, y muy clarito.
Lo pusé en el blog "alejandroaura" para recordar la presentación de su libro de poemas que será el martes próximo.
Y ha quedado rechulo.

Mil gracias...

.: Alexia Stark :.

Hola de nuevo Rosa, vuelvo a tener un problemilla T_T

Pongo ese código para que se vea tanto en IE y Firefox, pero se me ve arriba del todo y queda horrible, que tendria que poner para que se me viera a la derecha de pie de pagina?

Anónimo

Alexia, acabo de hacerlo en la copia de tu plantilla (en la que estoy mirando lo de los iconos) y sin problemas.

¿Lo has puesto justo antes de </head>??

.: Alexia Stark :.

En serio.... no lo entiendo... lo habia probado varias veces, incluso con el IE que no lo uso nunca y siempre me salia arriba... por si acaso era tema de la plantilla habia probado el otro (el largo) y nada... y ahora despues de leer tu respuesta lo he vuelto a probar y....FUNCIONA!!! eso como se come?? >.<
Si lo habia puesto ahi antes... misterios de la vida >.<

De verdad, muchisimas gracias Rosa eres un sol (^o^)

Marta Nieves Montero González

:-)Mi muy estimada y admirada Rosa:


Quiero felicitarte por tu extraordinaria labor que realizas en tu blog, por la generosidad que te premia y por la dulzura con que siempre tratas a tus lectores.

De igual forma, quisiera manifestarte mis más sinceras y cordiales felicitaciones por esta Navidad y espero que el próximo año te colme de Salud, Paz, Felicidad y Prosperidad.

Con todo mi corazón.

Un saco de besos y otro de abrazos para que tengas durante algún tiempo.

¡Sé feliz, mi niña!

Vesta, desde mi corazón.

Anónimo

Vesta, mil gracias cielo:-L
Ahora mismo paso de visita...;)

beni master

hola rosa no me salio la imagen, quisiera que me ayudaras, bueno intente de las dos formas posibles, la que me salio fue, la de poner el codigo antes del head, si salio la imagen de fondo, pero el contenido, incluso los enlaces y las etiquetas no se veian, solamente los anuncios porque sera, y por cierto quiero poner un perfil, pero no me gusta que mi perfil, muestre todos los blogger, que siguo, es que no me gustaria que no me gustaria qeu descubrieran los blogger que siguo, saludos espero tu respuesta.

Anónimo

rapero12 En tu escritorio ve a editar perfil y allí puedes marcar o no los sitios que sigues para que se vean.

En cuanto a la imagen, probablemente será la url que usas, pero como no puedo revisar tu blog, no puedo decirte más...

Gudafeta

Hola podrian decirme comno colocar una imagen en lugar de la flecha que sube el blog, la imagen es del tipo "deja un comentario"
saludos,

Anónimo

Gudafeta Si es una imagen que va a estar ahí sin hacer ninguna función, la colocas tal como explico en esta misma entrada.

Si lo que quieres es que además haga la función de "Ir arriba" coloca eso precisamente en el buscador, es decir, esas mismas palabras "ir arriba" hay más de un sistema...

Carlos Martínez

Hola rosa, como estas? Tengo una duda, como podría hacer que la imagen flotante tenga una opción de cerrar, ya sea por texto o con la misma imagen, la cosa es que me gustaría hacerlo con CSS, pero en este lenguaje ando muy crudo y agradecería tu ayuda :(. Disculpa la molestia

Anónimo

Carlos Martínez No se como hacer eso con una imagen... ¿quizá estás pensando en algo como un cartel o así para dejar un "aviso" y que luego de leído o visto pueda cerrarse?...algo así si podría decirte como hacerlo.

Carlos Martínez

mmmm... si, eso mismo quiero, si podrías ayudarme :), disculpa la tardanza en responder pero ando algo ful últimamente...

Anónimo

Carlos Mira aquí:
http://gemablog-.blogspot.com/2008/10/cartel-de-aviso-flotante.html

Unknown

Hola Rosa, solo pasaba para saludarte y felicitarte por el magnifico trabajo que haces en tu blog, realmente admirable.
Llegué hasta este blog por medio de este otro: blogearporblogear.blogspot.com

La verdad está muy bueno, vuelvo a felicitarte y te paso mi blog para que lo mires y me des tu opinión.

softnex.blogspot.com

Bye

Rosa

Brayan Chavez ¡Muchas gracias!!!

Unknown

Rosa lo trate de poner en un HTML Javascript y me funciono de maravilla no afuerzaz deve ser en < / head > salu2 :)

Anónimo

[..::GigioZ24::..] Si, así es, y antes de </body> y en realidad casi donde se coloque...

_RosarioZapien_

hola ke tal esta muy xulo tu blog keria saver si cuando ponga por ejemplo uno de facebook en que parte lo pondria arriva del de Twitter o donde o abajo

postada: hay dice que tiene ke ser arriva de head pero como ya puse el de twitter keria saber si me podrias sacar de la duda

ESTE ES MI BLOG :P

http://www.espaciodigitalx.blogspot.com

Anónimo

-º_Rzm_º- Sería todo igual, solo que para que no se vea "montada" sobre la de Twitter, tendrías que cambiar los valores en esta línea de su código:

bottom:0px;right:0px;

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S