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.

7 comentarios en “Como poner una imagen flotante en el blog”

  1. 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 !

    Responder
  2. 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;" />
    Responder

Deja un comentario

Esta web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: