Como poner una imagen flotante en tu blog

Parece estar de moda eso de poner una pequeña imagen flotante fija, a la derecha o izquierda del blog. No hay duda de que queda bien, y es bastante llamativo, idóneo si quieres transmitir alguna información o enlace a tus lectores.

Tan solo debes buscar o diseñar una imagen adecuada, utilizar un poco de CSS, y ya tienes tu imagen flotante.

Imagen flotante con CSS

Debes colocar el siguiente código antes de la etiqueta </head>, cambiando evidentemente "enlace" e "imagen", por las direcciones correspondientes.

Obtendrás una imagen más o menos centrada en la parte derecha de la pantalla, ejemplo:

Puedes modificar la altura aumentando o disminuyendo el valor del parámetro top.

Posición de la imagen flotante

Es posible configurar la posición de la imagen flotante a tu gusto, variando algunos parámetros.

Tomando como referencia el código anterior:

• Parte Superior: Cambia el valor del parámetro top: 350px; por top: 0px;
• Parte Inferior: Quita el parámetro top: 350px; y sustitúyelo por bottom: 0px;
• Parte Izquierda: Cambia el parámetro right: 0px; por left: 0px;

Aviso: El único inconveniente es que para versiones antiguas de IE, verán la imagen flotante justo encima de la cabecera del blog, ya que no reconocen la propiedad "fixed".