Tutorial: Imagen flotante en tu blog Septiembre 27, 2007
Como podéis observar en la esquina inferior derecha del blog, hoy he realizado el cambio de añadir la simpática imagen de Homer Simpson como en Moskis.
¿Cómo podéis aplicar una imagen flotante en vuestro blog?
Muy sencillo:
- Lo primero es tener la imagen que queremos colocar, yo recomiendo que no sobrepase los 200×200 píxeles.
- Editamos la hoja de estilo de nuestra bitácora style.css, la plantila para los que utilicéis blogger. Añadimos las siguientes líneas:
#flotante {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 200px;
width: 200px;
background: url( http://imagenparasubir.jpg) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
- Por último editáis el archivo sidebar.php y nos ponemos al final del todo, mientras que en Blogger buscamos dónde termina la barra lateral y añadimos el siguiente código:
<a id=“flotante”>Comenta</a>
Cargando...
5 Respuestas a “Tutorial: Imagen flotante en tu blog”
Hola, buen post, no se por qué no se me había ocurrido hacer un post explicando esto pero me alegro que lo hayas hecho
Solo una cosa que se me ocurre añadir, se puede poner right: 15; por ejemplo para separar un poco la imagen del borde de la pantalla
También es posible usar un div vacío: Así se pueden borrar el text-indent y el text-decoration
[…] aquellos que se preguntan cómo se pone ese Homercillo de la esquina inferior de la pantalla, en David J.G. hay un pequeño tutorial para usarlo en Blogger, WordPress, […]
Hola un saludo, segui los pasos y no me funciono…
Saludos.
A mi tampoco me salio, sean un poco más explicitos porfa….En especial las insctrucciones para blogger
Funciona muy bien pero sabe alguien como aplicar una liga sobre la imagen? la idea es generar un link a otra pagina para efectos de funcionalidad tangible.
saludos.