27

Y más nieve en el blog

En entradas anteriores vimos como incluir un efecto de nieve en el blog usando varios sistemas:

->Nieve usando la etiqueta marquee.
->Nieve usando un script externo.
->Nieve que se va acumulando al final de la página.

En esta entrada vamos a utilizar un script que solo tendremos que copiar y pegar -desde Diseño- en un gadget HTML/Javascript.
Mucho mejor si después de añadir el gadget lo movemos al pie del blog, nos será más fácil así el localizarlo después para retirar la "nieve".

El script utiliza una imagen "copo de nieve", pero podrá cambiarse fácilmente por una estrellita, una bolita de árbol de Navidad... cualquier icono apropiado para estas fechas.

Código:

<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

var numberOfSnows = 20;
var snowSpeed = 0.9;
var inTheFace = 5;
var setTimeOutSpeed = 50;

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";
for (i = 0; i < numberOfSnows; i++){
document.write('<div id="snows'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFVI/AAAAAAAAAyE/ybhMOZzH_i4/s320/snow2.gif" class="snow" width="20"/></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}
function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);
oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);
iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);
field = (h > w)?h:w;
}
function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = snowSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}
function animate(){
for (i = 0; i < numberOfSnows; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}
function init(){
win();
for (i = 0; i < numberOfSnows; i++){
strs[i] = document.getElementById("snows"+(idx+i)).style;
rst(i);
}
animate();
}
if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
<style>
.snow {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
html {
overflow-x:hidden;
}
</style>

Configuración:
-> var numberOfSnows = 20; Cambiamos aquí el valor para mostrar mayor o menor número de copos.
-> var snowSpeed = 0.9; Valor que controla la velocidad de desplazamiento de los copos.
-> var setTimeOutSpeed = 50; Valor que controla la velocidad de aparición de los copos.
-> En esta línea del script, podemos sustituir la url de la imagen por la que vamos a utilizar en nuestro caso y controlar su tamaño (width="20"):
<img src="http://3.bp.blogspot.com/_YG8aI6aU-bQ/R1oZPy7XFXI/AAAAAAAAAyU/k9q1UUaZIGE/s320/snow4.gif" class="snow" width="20"/>

Nota:
En las plantillas del Diseñador de Blogger, funciona mal o directamente no funciona.

VER EJEMPLO:Estrellas de nieve

Entradas Relacionadas:

27 comentarios:


Graciela

Tesoro, éste año no nieva en el blog jajaja...a mi me encanta y lo tengo guardado el que se acumula.

Con el calor que estamos soportando, escuchando las noticias de España...un pedido: me envías con alguna paloma o pájaro una bolsa enorme llena de copos :P

Besitos :)

El Pico Del Area

Buenas Rosa,

En primer lugar enhorabuena por tu blog. Estoy ahora mismo creando mi primer blog y quería incluir unos gadgets, pero en el apartado de diseño, al darle en la plantilla a ¨Añadir un gadget¨sólo me sále la opción de añadir el url del gadget. Entonces, cómo y dónde puedo hacer para incluir gadgets con código html? si lo incluyo directamente en el codigo html de la plantilla no sé dónde ponerlo...
muchas gracias por tu ayuda

Saludos

Antonio

Hola rosa de nuevo :)
Hoy he instalado una plantilla de Templates.
Y al entrar Mi blog hay 3 icono rss facebook twitter
Me gustaria que al dar un clik a facebook o twitter se fuera a mi perfil de facebook y twitter.
Saludos

WillRampling

TENGO UNA DUDA!!.
Es que hice un blog con Artisteer pero le quiero colocar disqus y puedo; funciona todo muy bien pero cuando me voy a la portada dice: "0 comentarios cuando si hay de disqus", AYUDAAA!

WillRampling

Por favor ayuda!

josi

hola, disculpa pero tengo un problema y una amiga me recomendó que acudiera a ti.
mi problema es el siguiente:
al momento de crear una entrada, le pongo colores a las letras, subo imagenes, agrego enlaces, etc. pero cuando publico la entrada sale el texto con letras negras, no aparecen la imágenes ni los enlaces. No sé que puede estar pasando. el problema apareció hace 5 día aproximadamente.
Si sabes como solucionarlo te lo agradecería muchísimo.

http://wolfitha.blogspot.com/

Andy

quedo muy bueno, gracias

xCanibalx

genial, ya que se acerca la navidad, no seria malo tener un poco de nieve =).

hola rosa hace tiempo que no te escribo la verdad por que siempre encontraba lo que necesitaba aquí, pero en este caso necesito saber algo y si tu me puedes ayudar pliss.

quiero saber si es posible ver solamente los post de un autor y si se puede como hacerlo.

bueno esa es mi inquietud de antemano gracias por tu tiempo y que tengas una feliz navidad este año, suerte y saludos.

Adm/Car10s

Hola Rosa soy yo de nuevo :) Espero si me puedas responder estas dos pregunticas jejeje y disculpa el fastidio. :$

Si te das cuenta en mi blog no e podido instalar dos cosas fundamentales como lo es, la paginacion de paginas. solo tengo el gadget de "los archivos del blog" debajo de las entradas, porque e aplicado todo lo que encuentro en Internet y nada se me ve abajo, no se si tengo un código que lo bloquea pero no me dice error todo sale perfecto pero nunca se me ve :/

y la otra pregunta, en mi blog trabajo con leer + e imágenes en miniatura, como puedo hacer para que cuando entren a las entradas antiguas las columnas desaparezcan y las entradas se vean como las tuyas?

Rosa

Graciela Ja, ja, corazón! Yo te la enviaría, pero mucho me temo no llegue a su destino sin deshacerse :S
¡Felices y calurosas Fiestas! :F

Rosa

El Pico Del Area Cuando vas a Diseño, Añadir un nuevo gadget, ahí en esa ventanita que se abre, ves varias opciones... buscador, etiquetas, etc... uno de ellos dice HTML/Javascript, es ese el que has de seleccionar para colocar código dentro.

Rosa

Antonio Coloca la url de tus páginas en el código de cada icono, en a href... más fácil imposible.

Rosa

WillRampling Dos comentarios aquí, más un email... con uno suficiente. Y como te contesté en el email, ni manejo Arister, ni he usado nunca Discus, así que no puedo ayudarte.

Rosa

josi No tengo ni idea cielo... quizá un problema en el editor de entradas :O
¿Has probado a editarlas usando otro navegador?

Rosa

xCanibalx ¿Exactamente, cual es tu idea?

Rosa

Adm/Car10s ¿Y cual es tu blog? :O

Pilar

Hola Rosa, mucho tiempo sin dejarte unas letras, pero hoy no me escapo sin darte las gracias por esta nieve tan guapa. Espero que nieve en mi blog por Navidad.
Felices Fiestas!!!
Un beso

Simple Mind

Rosa muchas gracias, he puesto el efecto nieve en mi blog y ha quedado "niquelao". Sin duda, era el toque definitivo que necesitaba mi blog para hacerlo totalmente navideño. ¡¡¡FELICES FIESTAS!!!

elvalordelasvivencias.blogspot.com

Antonio

Muchas gracia ya he podido poner la url en las imágenes.

Rosa

Pilar ¡Felices Fiestas!! :D

Rosa

Simple Mind ¡Felices Fiestas!!

xCanibalx

mi idea es es solo ver los post de un autor determinado, ya que en mi blog somo 4, y quiero poner enlazado su nombre y que aparezca los post de cada uno de nosotros.

es posible hacer eso?

Rosa

xCanibalx No, que yo sepa. Al menos a mi ahora mismo no se me ocurre como...

LaDy

hola! .. ahh k emocion gracias a ti mi blog va a poder alegrarse esta navidad!! :D

Adm/Car10s

WWW.3XTRAS.COM ESE ES MI BLOG. :) FELIZ NAVIDAD!

xCanibalx

haha, pues muchas gracias =) que tengas un feliz año, y muy agradecido por toda tu ayuda suerte.

Rosa

xCanibalx Suerte para ti también y Feliz Año!

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S