Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Poner una imagen flotante en el blog

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.

Kira dice...

Quedó muy bien gracias a lo fácil que explicas todo :) Muchas gracias!!!

Zamuell dice...

Jaja muy bien escogida la imagen del ejemplo Jaime, me gusta. Ya lo puse en mi blog y se ve estupendamente.

Jaime Trujillo Escobedo dice...

Me alegro mucho Kira. Espero que mis entradas continúen ayudándote a conseguir el blog que deseas.

Jaime Trujillo Escobedo dice...

¡Gracias Zamuell! Se trata de un truco sencillo pero muy útil y que además se visualiza sin problemas en cualquier navegador.

teofermi dice...

gracias Jaime, me quedo como yo queria, eres un genio

Jaime Trujillo Escobedo dice...

Teofermi, no solo veo que obtuviste un precioso resultado sino que supiste incluir dos imágenes en posiciones distintas ;).

Laube dice...

Qué bueno, Jaime... Creo que próximamente me va avenir de perlas!
Un besoteeeeeeeeee

Jaime Trujillo Escobedo dice...

¡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!

Monica Navarro dice...

parece sencillo, algun dia lo probare :)

teofermi dice...

Muchas gracias Jaime, pero queria preguntarte una cosa, ami la imagen no se me mueve como a ti..¿porque es eso?

Laube dice...

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

Cocofansclub dice...

Muy bueno !lo use para anunciar un cumpleaños
muchas gracias Jaime

Jaime Trujillo Escobedo dice...

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.

Jaime Trujillo Escobedo dice...

¡Quedó muy bien esa hojita con el cumpleaños de Coco, Claudia! Gracias a ti por comentar.

Jaime Trujillo Escobedo dice...

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 ;).

Jaime Trujillo Escobedo dice...

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.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo