» » » Imagen flotante en el blog

Imagen flotante en el blog


Una imagen flotante es una imagen estática que permanece visible en el 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 aquí, en la esquina superior derecha una imagen y el la esquina inferior derecha con una frase.

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, se pueden 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 que se sitúe en la parte inferior. 
  • 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.
  • Con right la imagen aparezca a la derecha y a un margen de 0 píxeles (incrementar para aumentar la distancia). Sustituye por left para cambiar la posición a la izquierda y el margen.

►Imagen flotante como enlace

Para que la imagen flotante actúe como enlace hacia otro sitio web, se utiliza el mismo pero agregando lo que ves en color verde (Direccion Web), donde hay que insertar la URL de la página web o blog de enlace; y </a>  pata cerrar correctamente el enlace.

<a href="Direccion Web"><img style="border:none;position:fixed;top:0;right:0;" src="URL imagen"/></a>

Así tendrás una Imagen flotante en el blog de Blogger

Te puede interesar: Flecha flotante en una esquina del blog para volver arriba.




Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top