Al decir imagen flotante me refiero a una imagen estática que permanece fija en un apartado específico del blog aunque bajemos o subamos la barra de desplazamiento. Resulta ideal para mostrar logotipos pero se puede colocar un mensaje o tu fotografía preferida.
Puedes ver un ejemplo justo aquí, en la esquina inferior izquierda.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </body> en tu plantilla y justo antes añade esta línea:
<img style="border:none;position:fixed;top:0;right:0;" src="URL IMAGEN"/>
Reemplaza URL IMAGEN con la dirección del icono, logo o mensaje.
Con este código, la imagen aparecerá en la esquina superior derecha. Afortunadamente, puedes cambiar tanto la esquina en la que se mostrará como la distancia que mantendrá entre el margen superior, inferior, izquierdo o derecho.
Al utilizar el atributo top haremos que la imagen se muestre en la parte superior del blog. Con bottom conseguirás que se sitúe en la parte inferior. Si te fijas, justo después de top se encuentra la cifra 0, que indica el margen superior (o inferior si editas dicho atributo).
Incrementa la cifra a 10 por ejemplo para lograr una separación cómoda.
Con right se consigue que la imagen aparezca a la derecha y a un margen de 0 píxeles (también puede incrementarse para aumentar la distancia). Sustituye dicho término por left para cambiar la posición del icono a la izquierda y edita así mismo, el margen a tu gusto.
También puedes hacer que la imagen flotante actúe como enlace hacia otro sitio web. El código a utilizar sería el mismo pero agregando lo que ves en color naranja
<a href="DIRECCION PAGINA"><img style="border:none;position:fixed;top:0;right:0;" src="URL IMAGEN"/></a>
Inserta la URL de la página web o blog en DIRECCION PAGINA y listo.
Te puede interesar: Flechita flotante en una esquina del blog para volver arriba.
¿Problemas al comentar? Utiliza 
Quedó muy bien gracias a lo fácil que explicas todo :) Muchas gracias!!!
Jaja muy bien escogida la imagen del ejemplo Jaime, me gusta. Ya lo puse en mi blog y se ve estupendamente.
Me alegro mucho Kira. Espero que mis entradas continúen ayudándote a conseguir el blog que deseas.
¡Gracias Zamuell! Se trata de un truco sencillo pero muy útil y que además se visualiza sin problemas en cualquier navegador.
gracias Jaime, me quedo como yo queria, eres un genio
Teofermi, no solo veo que obtuviste un precioso resultado sino que supiste incluir dos imágenes en posiciones distintas ;).
Qué bueno, Jaime... Creo que próximamente me va avenir de perlas!
Un besoteeeeeeeeee
¡Seguro que si, Laube! Por cierto, al reemplazar el atributo fixed con absolute la imagen permanecerá en la posición deseada pero dejará de 'flotar' (por si prefieres esta otra característica). ¡Abrazos!
parece sencillo, algun dia lo probare :)
Muchas gracias Jaime, pero queria preguntarte una cosa, ami la imagen no se me mueve como a ti..¿porque es eso?
Pues está bien que se pueda dejar completamente fija, pero me gusta más que flote en la esquinita... Sobre todo para los logos e imágenes personales e incluso algo que quieras anunciar,no?.
Un besote
Muy bueno !lo use para anunciar un cumpleaños
muchas gracias Jaime
Por supuesto Laube. Dejar la imagen o el icono fijo podría servirnos para algo relaccionado con el diseño de la propia plantilla pero no para incluir un anuncio. Abrazote.
¡Quedó muy bien esa hojita con el cumpleaños de Coco, Claudia! Gracias a ti por comentar.
Así es, Monica, muy fácil de realizar y simple de editar. Estoy seguro de que en tu blog podría servir para incluir algun mensaje en el futuro ;).
Teofermi, el movimiento de la imagen flotante al pasar el cursor se debe a la utilización de la propiedad hover en el CSS del icono. Estoy redactando una entrada en la que se explica todo al respecto.