<div style='position:absolute;top:100px;right: 30px;'>
<script language='JavaScript' src='http://www.gifss.com/creaciones/calendarios/121/calendario.js'/></div>
El código anterior, es del calendario establecido en el blog en la parte superior derecha, donde:
la posición, que puede ser absolute o relative, el calendario, está fijado en base al tamaño de la plantilla de nuestro blog, top:100px es respecto al margen superior, en el caso que fuese en el margen inferior en vez de top:100px pondriamos bottom:100px dónde 100px es la distancia en pixels de la zona donde se establezca.
right: 30px indica que está a 30 px del margen derecho.
http://www.gifss.com/creaciones/calendarios/121/calendario.js es la url donde está alojado el gif del calendario. Podríamos poner cualquier otra url de imagen, o gif o lo que nos interese.
Para el caso de la peonza se ha realizado un gif con fondo transparente el código que se ha insertado en el blog es el siguiente:
<a href='http://www.espiraledublogs.org/2011/archives/536' title='Comentar blog en V Premio Espiral'>
<img src="https://lh4.googleusercontent.com/_vzR5XFm52h8/TWd7uYLH-MI/AAAAAAAADMA/58v99MAaSe8/peonza.gif'' style='position: fixed; top:75px; left: 30px;width:80px; height:118px ; '/> </a>
href indica que va a redireccionar a otro sitio donde http://www.espiraledublogs.org/2011/archives/536 es el lugar donde se va cuando pinchamos en el gif de la peonza, title='Comentar blog en V Premio Espiral', es el mensaje que sale cuando, con el ratón nos posicionamos sin pinchar encima del gif y que nos dá una información. https://lh4.googleusercontent.com/_vzR5XFm52h8/TWd7uYLH-MI/AAAAAAAADMA/58v99MAaSe8/peonza.gif es la url donde se encuentra mi gif, sirve tambien para imagenes.
position: fixed; nos indica que la posicion está fija con respecto a la ventana del navegador y no de la plantilla, ver diferencia mientras el calentario al ir hacia abajo en el blog, se queda fijado en la parte superior del mismo, la peonza siempre esta en la misma altura de la pantalla.
left: 30px nos indica que está a la izquierda y width:80px; height:118px , indican el ancho y el alto del gif en mi caso, o de la imagen que quisieramos poner.
Éstos códigos se pueden poner en una entrada, como Gadget html, o bien en el cuerpo de la plantilla como es mi caso, y si fuese así, se deberá poner en configuración, Editar HTML, el código se introduce antes de </body>
Si no nos queremos quedar ciegos Ctrl+ F y nos lo buscará automáticamente en la plantilla.
0 comentarios: