Como poner una imagen flotante en el blog

Para poner una imagen flotante en nuestro blog igual que la que tengo yo en la esquina inferior derecha, sólo necesitas 2 cosas,

  1. La imagen, a poder ser .png para poder ponerla con el fondo transparente.
  2. Añadir un pequeño código HTML a la plantilla(theme) de tu blog o Web.

El código HTML que hay que poner es este:

<img src="url-de-la-imagen" alt="Mi imagen flotante" border="0" style="position:fixed; bottom:0; right:0;" />

Y hay que ponerlo justo antes del </body> de nuestro theme, que suele estar en el archivo footer.php

Y el resultado es algo parecido a esto:

imagen-flotante

No necesariamente tiene que estar en el pie del blog y a la derecha, cambiando los parámetros bottom y right(y si fuese necesario añadiendo top y/o left) del código podremos colocar la imagen donde queramos.

También existe la opción de poner un enlace a nuestra imagen, que nos lleve a otra página o que simplemente suba hacía arriba, el código sería el siguiente:

<a href="#" rel="nofollow" title="Ir arriba" ><img src="url-de-la-imagen" alt="Mi imagen flotante" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Nota: Donde he puesto la almohadilla(#) se puede poner un anclaje(#arriba) al inicio de la página, o una URL, vosotros mismos.

Este post lo he preparado para Carlos, que me pidío através del formulario de contacto que le explicase como poner una imagen flotante en su blog.

6 pensamientos en “Como poner una imagen flotante en el blog

  1. Pingback: Bitacoras.com

  2. Bueno, despues de buscar y buscar, me a dado por poner la que tengo puesta de homer !

    Y claro, no entiendo porque me sale un recuadro alrededor… hay alguna forma de quitar el recuadro ese ?

    Gracias de nuevo !

  3. Carlos tienes que quitarle el borde poniendo border:none; dentro del style, algo así:

    <img src="url-de-la-imagen" alt="Mi imagen flotante" border="0" style="border:none; position:fixed; bottom:0; right:0;" />

Deja un comentario