Imagen flotante

Me comenta Marga que le gustaría incluir un calendario que ha visto en "Pour les amoureux de Tilda" a ser posible entre el main (cuerpo de entradas) y la sidebar.
Me dice también que le gustaría que "flotase", es decir, que subiese y bajase cuando hacemos scroll en la página.

[1] En primer lugar hemos de ingresar a la página que hemos mencionado para obtener el código de uno de los calendarios.

[2] Colocamos el código que nos han dado en la web dentro de un div y lo pegamos en un elemento (Gadget) HTML en la sidebar, en la parte superior de la misma, para que cuando hagamos scroll en la página, el calendario se desplace desde arriba de la sidebar hasta el final de esta:

<div id="FloatIcon">
<iframe
src="http://completementblinkies.com/tilda_addict/horloges/tilda4.htm"
width=93 height=136 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0
SCROLLING=no></iframe>
</div>

[3] Vamos a colocar ahora unas líneas en el CSS de la plantilla siempre antes de ]]></b:skin> para controlar la posición del calendario:

#FloatIcon{
position:fixed;
text-align:left;
/*Si la ubicación del calendario no es la adecuada modificar los valores siguientes: */
margin-top:0px;
margin-left:-100px;
}

Nota: 
Podemos controlar la posición del calendario, modificando los valores que se indican en el código.

Si colocamos el código en un elemento sobre las entradas en lugar de arriba de la sidebar, y no modificamos el código CSS, el resultado será que el calendario flotará a la izquierda de nuestras entradas subiendo y bajando a lo largo de estas cuando hagamos scroll en la página:

Ver también:  Menú flotante para el blog.