Agregar una imagen flotante (fija)

Esta idea sencilla y vistosa te permite poner una imagen en una esquina del blog que quedará siempre sobre el resto de los contenidos y será visible aún cuando el usuario se desplace por la página. El procedimiento es muy simple, lo más importante es la creatividad a la hora de elegir la imagen y lo que ella transmite. Para comprender mejor la idea puedes ver en este mismo blog, donde se ha mezclado esta técnica con una que mostrábamos antes (indicador de carga del blog): la imagen flotante aparece sólo mientras dura la carga del blog (presiona F5 para verla con más atención).

1) Ubicar la imagen

La posición de la imagen no está determinada por el lugar donde escribas el código, por lo que puedes ponerla donde gustes; puedes insertarlo en un elemento de página en el lugar donde te resulte más cómodo (aunque es preferible bien arriba, así carga antes que el resto). El verdadero lugar donde aparecerá la imagen proviene de lo que escribas en el código, como verás más abajo...

Sólo ve a Plantilla » Elementos de la página » Añadir un elemento de página » HTML/Javascript » pega el siguiente fragmento:

<img style="display: scroll; position: fixed; bottom: 30px; left: 60px;" src="URL-DE-LA-IMAGEN"/>

Reemplaza URL-DE-LA-IMAGEN por la ubicación correspondiente del gráfico y cambia a tu gusto los siguientes parámetros marcados con azul:



Para poner la imagen bien cerca del ángulo superior derecho, por ejemplo, el código quedaría así:

<img style="display: scroll; position: fixed; top: 10px; right: 10px;" src="URL-DE-LA-IMAGEN"/>

2) Utilizar la imagen como indicador de carga (opcional)

Sigue los pasos indicados aquí, y agrega:
style="display: scroll; position: fixed; top: 10px; right: 10px;
entre "img" y "src".