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;
}
Recomiendo colocar esa linea justo antes del tanto si usas Blogger como Wordpress. Aunque aquí hemos puesto la imagen en la esquina inferior derecha, se puede perfectamente colocar dentro del contenedor y posición de la pantalla que deseéis. Tan solo es jugar un poco con los parámetros CSS y las particularidades de vuestra plantilla concreta, con la que me imagino que estaréis familiarizados.
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:
Se puede hacer en cualquier plataforma, pero me imagino que de ésta última manera es más cómodo para los usuarios de Blogger que tienen que lidiar con plantillas mas raritas.
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