Imagen flotante en blogger

Imagen flotante en Blogger

Para colocar una imagen flotante en Blogger que por lo general está fija en alguna de las esquinas de la página, debemos agregarle simplemente un style al código de una imagen en HTML. A esta imagen flotante se le pueden dar muchos usos, ya depende de cada quien qué fin darle.

Para los que ya manejen las imágenes en HTML de Blogger se les va a hacer súper sencillo. Si no conoces mucho del tema, visita por favor esta entrada.

El código se coloca en un gadget HTML, así de sencillo, este puede estar ubicado en cualquier parte de la plantilla, ya que la ubicación de la imagen se la daremos con el código del style.

La ruta sería: Diseño / Añadir un Gadget / HTML-Javascript y agregamos el siguiente código:

<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="URL que redirecciona"/><img src="URL de la imagen"/></a>

Ahora les voy a explicar las partes que podemos modificar del código:

Si queremos que la imagen esté en la parte inferior de la página, dejamos: bottom

Si queremos que la imagen esté en la parte superior de la página, dejamos: top

Si queremos darle una distancia ya sea desde la parte inferior o superior, reemplazamos 0px; por el valor que creamos necesario, ej: 50px; o 100px;  o lo dejan sin distancia, eso ya es al gusto de cada quien.

Si queremos que la imagen esté ubicada en la parte derecha de la página, dejamos: right

Si queremos que la imagen esté ubicada en la parte izquierda de la página, dejamos: left

Si queremos darle una distancia ya sea desde la parte derecha o izquierda, reemplazamos 0px; por el valor que creamos necesario, ej: 50px; o 100px;  o lo dejan sin distancia, eso ya es al gusto de cada quien.

Si no queremos que la imagen redireccione al hacer clic sobre ella, retiramos lo siguiente:

href="URL que redirecciona"

Si queremos usar la imagen como una flecha que lleve a la parte superior de la página, dejamos lo siguiente:

href="#"

La flecha como la que está en la parte derecha de Charkleons.com se creó usando el código de este tema, pero en la parte de la imagen, se colocó el código básico para dos imágenes en una.

Listo, eso sería todo, como pueden ver es algo super sencillo.

Espero que esta información les sea muy útil.

Gracias.