Como no ando muy inspirado hoy y anteayer salió el tema en una conversación de messenger, voy a tratar de hacer un breve tutorial sobre cómo colocar una imagen flotante en el blog. Seguro que las habéis visto más de una vez navegando por vuestros blogs favoritos, suelen ser imágenes con personajes graciosos pidiendo la participación de la gente con comentarios etc.. (Hasta donde me llega la memoria, uno de los primeros blogs donde vi aplicar esto fue en el “blog que no se quiere morir” aka blog de javimoya)

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í:

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í:

Recomiendo colocar esa linea justo antes del </body> 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.

Espero que no resulte complicado de seguir este mini tutorial, si así fuera podéis como siempre preguntar o aportar lo que queráis en los comentarios.