Insertar imagen fija en blog

En más de un blog habréis visto que en alguna zona del mismo aparece una imagen y aunque nos desplacemos con las barras de desplazamiento la imagen sigue visualizándose permaneciendo fija.

Para crear este tipo de imagen, tan solo debemos insertar un pequeño código en nuestra plantilla.

En primer lugar, como siempre, realizaremos la copia de seguridad de la plantilla.

Una vez hecha, accedemos a la ficha Diseño -> Edición de HTML y bajamos hasta el cuerpo de la página (body).

Justo antes de la etiqueta </body>, pegamos el siguiente código:

<a href="direccion_URL_pagina"><img src="direccion_URL_imagen" alt="ir arriba" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Vamos a analizar el código anterior para que sepáis lo que debéis modificar.

En dirección_URL_página escribiremos la dirección a la que queremos que se acceda cuando hagamos clic sobre la imagen.

En dirección_URL_imagen tendremos que escribir la dirección donde está alojada la imagen.

Con el código anterior, la imagen se muestra en la parte inferior (bottom) derecha (right), aunque podemos cambiar esta alineación modificando la propiedad style.

ACTUALIZACIÓN 10 DICIEMBRE 2009

Los distintos valores para cambiar la alineación de la imagen son los siguientes:

  • Top: alineación parte superior.
  • Bottom: alineación parte inferior.
  • Left: alineación parte izquierda.
  • Right: alineación parte derecha.

Combinando estos valores podremos alinear la imagen en los diferentes vértices de la ventana de nuestro navegador.

8 comentarios:

bienperrucho dijo...

gracias me sirvio mucho para i blog
bienperrucho.blogspot.com
bienperrucho2.blogspot.com

José M dijo...

de nada, saludos :)

Anónimo dijo...

se podria insertar la imagen centrada, como se puede mover a lo largo de la ventana??? no lo logro hacer cambiando los valores de right y bottom
espero tu respuesta gracias de antemano!!!

José M dijo...

Hola Anónimo

puedes utilizar las siguientes alineaciones:

Top: parte superior
Bottom: parte inferior
Right: parte derecha
Left: parte izquierda

Combinando estos valores podrás alinear la imagen en los diferentes vértices de la ventana del navegador.

Saludos :)

KaRoL ScAnDiu dijo...

Wuenas.. me has ayudado mucho y he podido poner la imagen... pero una dudilla: ¿Se puede poner mas de una??
Me refiero a que la tengo puesta a la izquierda pero quisiera poner una a la derecha también.... ¿se puede?

Y grax de nuevo, mi Blog es http://tedoymialma.blogspot.com/ , pasate y verás...

José M dijo...

Hola KaRoL ScAnDiu

claro que puedes, debes agregar otra vez el mismo código con el único cambio de la alineación de la imagen

Saludos :)

*✿。Mianaly。✿* dijo...

Hola muchas gracias amigo¡¡¡ tengo una pregunta como puedo hacer que la imagen fija se deslize y muestre mi chat como en este blog donde el osito desliza el chat de la derecha... o de que forma con q terminos o como se llama la aplicacion para buscarla en la red.. gracias aqui la web q tiene esa aplicacion: http://annyz-kawaii.blogspot.com/

José M dijo...

Hola *✿。Mianaly。✿*

si quieres que la imagen se deslice tendrás que incluirla dentro de la etiqueta MARQUEE.

Y si además quieres que al hacer clic sobre ella acceda al chat o a cualquier otra página lo podrás conseguir utilizando la etiqueta HTML de hipervínculo A HREF

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.