Efecto flotante navideño

Las fechas navideñas no sólo remueven sentimientos también alteran nuestras actividades, nuestro horario y como no, nuestro blog.
Rosa nos hablaba el otro día sobre la forma de añadir un bonito efecto de nieve creado con un script de DynamicDrive
Otro efecto que me ha gustado mucho es el de Claudia de Girly Bogger es elegante y como ella bien puntualiza poco invasivo.
Siguiendo en la línea de efectos para el blog y también de la página de DynamicDrive es el efecto Floating images el autor Virtual Max ha creado un efecto suave de imágenes flotando.
A cualquiera de estos scripts podemos cambiarles las imágenes para que se adapte según las fechas o la temática como en este caso que sustituí los globos por iconos navideños.
Podemos añadir este efecto si nos situamos al final de la plantilla justo antes de </body>
"El siguiente script lo podéis descargar desde aquí o de la página del autor moveobj.js"

<script src='url-archivo-imagenflotante.js' type='text/javascript'> </script>

Justo después añadimos:

<script type='text/javascript'>/************************************************ Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)* Modified by Dynamic Drive for various improvements* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************///Step 1: Define unique variable names depending on number of flying images (ie:3):var flyimage1, flyimage2, flyimage3function pagestart(){//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):flyimage1=new Chip("flyimage1",47,68);flyimage2=new Chip("flyimage2",47,68);flyimage3=new Chip("flyimage3",47,68);//Step 3: Using the same variable names as 1), add or delete more of the below lines:movechip("flyimage1");movechip("flyimage2");movechip("flyimage3");}if (window.addEventListener)window.addEventListener("load", pagestart, false)else if (window.attachEvent)window.attachEvent("onload", pagestart)else if (document.getElementById)window.onload=pagestart</script>

Guardamos los cambios y nos situamos en plantilla de diseño para añadir un gadget escogemos la pestaña HTML/Javascript y en su interior añadimos lo siguiente:

<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_xF3vYYxMbAHl-Lw1GMMe-27O_6DWaVNmEVsO9cvMCy0_K0sbaMEvZCNxClldAbTW05mcWcXXsUqpseKMRIkqgJ8oWryFsRddxnjBdTicgfuK_SFf-xCVQYFzqPnKE4mkyBgCmhhhsg/s0/bell.png"/></a></div><div id="flyimage2" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXcsdSfLdtdj_OfRO62khW9pqCcxcbk9f2JGKVzknjCUupzp0HAaMmcPtOyTrTusrFZtCPEuKxrt8ZpCRu2npA3cUzdrXfw63hbmUqQf_QJ526H7M5Lj6DNvX9uuWObImQ8u9jCTaoKGc/s0/santa.png"/></a></div><div id="flyimage3" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ogNDa_eHVxi19ZiU3q6lAOYjPX6dxSJjIONjCK_R2ABxxa-VH25QEzu9ZYiC2Ga6c6DHWcuztRbMkYzbLSBz0xdhofDguIrt9_d_zZUah9bVTPESLMI2E_YSjR6WZQQyg-nxuI0nAlk/s0/star.png"/></a></div>

En color azul es la url de las imágenes que podemos sustituir por cualquier otra, recomiendo que el tamaño no sea demasiado grande de lo contrario entorpecería la lectura del blog, otra idea sería añadir una sola imagen para ello bastaría con omitir el div que la añade, es decir sería suficiente con añadir:

<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_xF3vYYxMbAHl-Lw1GMMe-27O_6DWaVNmEVsO9cvMCy0_K0sbaMEvZCNxClldAbTW05mcWcXXsUqpseKMRIkqgJ8oWryFsRddxnjBdTicgfuK_SFf-xCVQYFzqPnKE4mkyBgCmhhhsg/s0/bell.png"/></a></div>

Y en el script:
movechip("flyimage1");

Para añadir más imágenes sería a la inversa, añadimos al elemento de página una imagen más por ejemplo:
<div id="flyimage4" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_xF3vYYxMbAHl-Lw1GMMe-27O_6DWaVNmEVsO9cvMCy0_K0sbaMEvZCNxClldAbTW05mcWcXXsUqpseKMRIkqgJ8oWryFsRddxnjBdTicgfuK_SFf-xCVQYFzqPnKE4mkyBgCmhhhsg/s0/bell.png"/></a></div>

Y en el script:
movechip("flyimage4");

Las imágenes las podemos sustituir simplemente suprimiendo la parte de color azul y en su lugar añadiendo la url de vuestras imágenes.
También podemos hacer que esas imágenes sean un enlace para ello añadiremos la url de la página a enlazar sustituyendo el asterisco # (respetando las comillas)

ElHackerZ