Lo más habitual es colocar la imagen en la parte inferior derecha de la página y fuera de lo que es el layout principal de la plantilla pero en realidad se puede colocar donde queráis y adaptarlo a la estructura concreta de la misma.
Vamos con el código. El primer paso consiste en crear un selector de tipo ID en en vuestra hoja de estilo. Sería algo así:
#imgflotante {
position:fixed;
right:0;
bottom:0;
}
Después vamos al código HTML de la plantilla para colocar la imagen y simplemente asignamos ese ID a la etiqueta img correspondiente. Quedaría algo tal que así:position:fixed;
right:0;
bottom:0;
}

Ah, lo que yo hice en dos pasos separando estilos de lo que es HTML puro y duro también se puede conseguir con una única linea, pero lo hice así porque a efectos de claridad en el código es siempre mejor tener las cosas separadas. No obstante si por el motivo que sea preferís tenerlo todo con una única declaración la otra opción sería ésta:

Para acabar, solo comentar que se puede mejorar el ejemplo convirtiendo la imagen en un enlace que lleve al index de vuestro sitio cuando hagamos clic o simplemente y aprovechando que lo hemos puesto en la parte inferior de la pantalla, que nos lleve a la parte superior haciendo uso de un ancla.
fuente
http://www.xeduced.com/2009/02/27/colocar-una-imagen-flotante-en-el-blog/
http://www.mirarpormirar.com/articulo/como-poner-una-imagen-flotante-en-tu-blog/
http://recursosparatublog.blogspot.com/2009/11/imagen-flotante-en-el-blog-trucos.html
http://www.paranoias.es/como-poner-una-imagen-flontante-con-efecto-ir-arriba/
http://ciudadblogger.com/2009/03/poner-imagen-estatica-en-el-blog.html
0 comentarios:
Publicar un comentario