Cargando...
Meta microcosmos: Efecto de nieve en tu blog
BIENVENIDO AL META!!!

Espero que algo de lo que encuentres en tu visita te sirva para mejorar y personalizar tu blog.
Para encontrar más trucos prueba con las pestañas situadas justo encima de estas líneas, usa el buscador de trucos que hay a la derecha o navega por las categorías que encontrarás en la sidebar bajo el título "Aquí encontrarás".
Si tienes cualquier duda, puedes preguntarme sobre lo que desees en un comentario e intentaré ayudarte lo antes posible.
Y si algo te ha sido útil, déjame igualmente un comentario y me encantará ver el truco implementado en tu blog!

Efecto de nieve en tu blog

¿Os apetece que nieve en vuestro blog de Blogger como en éste? Pues gracias al código que nos facilitan en Dynamic Drive es facilísimo! Podeis ver el efecto sobre un fondo que no sea blanco aquí.

Lo primero que teneis que hacer es elegir entre estos copos de nieve (o cualquier otra imagen que os guste) y subirla a un alojamiento de imágenes:



Y el código que vamos a usar es el siguiente:
<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

Copiamos este código y vamos a cualquier conversor HTML (yo uso el de Blogcrowds) y lo pegamos en la ventana donde dice "Parse HTML". Y en la parte superior del código hay que hacer los siguientes cambios:
- Donde pone //Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
sustituye URL_de_tu_copo por la URL del copo que te guste más.
- Donde pone // Configure below to change number of snow to render
var no = 10;
ponemos el número de copos que queremos que caigan (el número irá en función del tamaño del copo para no dificultar la lectura del blog).
- Donde pone // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0;
si queremos que los copos desaparezcan al cabo de un tiempo, cambiamos el 0 por el número de segundos que deseemos.
- Donde pone // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
elegimos pageheight si queremos que los copos bajen hasta el pie del blog antes de que aparezcan otros, o windowheight si queremos que desaparezcan tras rebasar el borde de la pantalla.

Cuando hayamos hecho los cambios clicamos sobre el botón que pone "Parse".

Vamos a Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
</body>
y justo antes pegamos el código que nos ha proporcionado el conversor HTML.

Clicamos sobre Vista Previa para comprobar el resultado y si queremos vamos probando a cambiar los parámetros variables; cuando estamos satisfechos guardamos cambios y listo! Cuando pasen estas fechas y querais quitarlo, sólo hay que borrar cuidadosamente el código que hemos añadido a la plantilla (Gracias Rosa por la puntualización).

P.D.: Teneis otro truco precioso para que nieve en el blog en El escaparate.

16 comentarios:

Anónimo dijo...

JA,JA,JA, ¡Me meoooo! (con perdón)

Yo misma dijo...

Ha sido buenísimo! Justo después de ponerlo en el blog de pruebas entré a el Escaparate para recordar cómo se quitaba el fondo navideño para que se viera mejor el efecto... y casi me da un ataque de la risa!!!
Pero el tuyo tiene muuucho más mérito, yo sólo he copiado y pegado ;)

Anónimo dijo...

Yo misma, no seas modesta...has tenido que buscarlo y probarlo, y además citas la fuente de donde lo has sacado, cosa que te honra.
Muchas de mis entradas también son así.

¡Enhorabuena y punto! No admito replicas.

Yo misma dijo...

Muchísimas gracias; la enhorabuena viniendo de ti es todo un honor.
Como el 99% de lo que hay aquí es copiado de otros sitios, siempre cito la fuente aunque yo haga modificaciones; no me gusta apropiarme de nada que no sea mío.
Y también he enlazado a tu entrada, así quien quiera ponerlo tiene otra opción para elegir :)

Gem@ dijo...

Precioso efecto nevado, pensaba postear sobre el código de Dynamic Drive pero con lo bien explicado que está mandaré a los interesados aquí y al blog de Rosa ;)

Yo misma dijo...

Gem@, gracias por el piropo pero en serio que no lo merezco; si está bien explicado es porque he aprendido de Rosa y de ti cómo hacerlo! Y creo que voy a dejar de publicar entradas, no quiero pisarles más ideas a mis dos maestras!!!

Gem@ dijo...

!Pero que dices¡ jajaja ¿dejar de publicar porque el tema de una entrada aparece en otro blog? pero hablar de motivos navideños es normal dado las fechas que estamos.
Si todo el mundo dejara de lado su blog por ese motivo no habría blogs de ayuda.
Por otra parte todo el mundo tiene su espacio, y es curioso pero en la blogosfera es en el único lugar que no he visto rivalidad sino todo lo contrario. :D

Yo misma dijo...

Es que siendo tan novata me da un apuro horrible pensar que puedo estar "pisándoles" ideas para entradas a mis dos grandes!!!
Pero supongo que tienes razón, en casi todos los blogs de ayuda estais poniendo cositas especiales para navidad, así que es inevitable que en este pequeño sitio de recopilación también ponga lo mismo!

Ya me había fijado en lo de la rivalidad, lo que (sobre todo para mí que estoy empezando) es muy reconfortante. Es imposible que haya rivalidad cuando todo lo que sé lo he aprendido de vosotras dos y algún sitio más...

Dude dijo...

uhhhhhhhh
que largo!!!

Muchas gracias por molestarte. Cuando tenga un rato lo "intentare" poner, por que soy muy torpe para los codigos html.

Salu2

Yo misma dijo...

Dude, de nada; anímate a intentarlo que si sigues cuidadosamente las instrucciones es muy fácil. Si tienes cualquier duda, pregunta, que espero saber respondértela!!!

Anónimo dijo...

gracias esta bueno el truco... pero no me funciona muy bien, se ve muy lento, si me pudieras ayudar te lo agradeceria mucho... por favor ve la pagina y me dices www.cyberzoneblog.uni.cc y si me puedes contactar a mi msn es kevinfertech@hotmail.com de antemano gracias... y felicidades

Yo misma dijo...

Kevintech, ya he ido a tu página y no veo la nieve, ni con el Firefox ni con el IE. Si te van lentos los copos, puede ser porque tu página tenga algún widget en Flash que lo ralentiza, a mí también me pasa en el portal de un foro donde también lo tengo puesto.

Anónimo dijo...

PREGUNTA IMPORTANTE
yo lo pude poner re bien, el unico inconveniente es que me aparece ma imagen con una cruz roja, como que no la ve porque es esto????

Yo misma dijo...

Anónimo 13, si no pones el enlace a tu web o blog no puedo saber dónde está exactamente el problema...

Evinawer dijo...

Muchas gracias por esto!!!
Estaba buscando desesperadamente este efecto de manera que funcionase! Gracias!

bayron dijo...

no encuentro donde cierra la etiqueta body al quien podría ayudarme ?????

Publicar un comentario

ENTRADAS MÁS POPULARES