Para poner una imagen flotante en nuestro blog igual que la que tengo yo en la esquina inferior derecha, sólo necesitas 2 cosas,
- La imagen, a poder ser .png para poder ponerla con el fondo transparente.
- 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:
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.
Muchisimas gracias ! Ahora solo me falta buscar la imagen correcta y ponerlo 🙂
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 !
Carlos tienes que quitarle el borde poniendo border:none; dentro del style, algo así:
Vale !! Muchas gracias !! ya esta 🙂
De nada Carlos, cualquier otra cosa ya sabes 😉
Hola, si quisiera ocultar esta imagen en Vista móvil ¿como lo podría hacer?
Gracias por la respuesta de antemano.