31 diciembre 2016

Script de Nieve cayendo por el blog

¡Hola chicos! Esta no es una entrada demasiado complicada. La subo en fin de semana porque afecta al diseño del blog en cuanto a su apariencia. Os voy a hablar hoy de los scripts, que son un conjunto de órdenes que se van ejecutando línea a línea por toda la web. Dicho así puede resultar complicado de entender pero si analizamos su significado (guión, ya que proviene del inglés) podemos deducir que es un conjunto de órdenes que nuestra web interpreta

De acuerdo, ahora que tenemos una idea de qué son los scripts, vamos a aprender a utilizar uno que en estas fechas suele ser recurrente: La nieve cayendo por el blog, el mismo que uso yo en estos momentos. ¡Comencemos pues!


Lo primero que he de decir es que yo, en particular, no me especializo en scripts, y este en concreto que os voy a mostrar hoy lo encontré en San Google de la mano de los compañeros de "Blogginred", web bastante interesante a la que podéis acceder clicando aquí:


Bien, lo que debemos saber antes de comenzar es que los scripts se añaden al blog en forma de gadget: sin embargo este es un gadget invisible y sin título, lo único que será visible serán esos copos que caen desde la parte superior del blog.

El script es un conjunto de líneas de HTML, por tanto el gadget a añadir debe ser del tipo HTML/Javascript. En concreto el código que vamos a utilizar va a ser el siguiente:

<script type='text/javascript'>
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWudfMezIpU9lKamDQG-lvQqpPNteg26zjCrda_pinpHEk33VRzcFaTXICJWWSjiLGYWTJMVGJXVuv54DJy9YSf44yd4DU6o_qEmpTZ6rzMsR-Mxtr31j9T1l_zCkr05mdL8r6W_JR0_N/s400/nieve2_jessi_diyva.png",22,22);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPJ8CpSF2LGq7ijVF1AX3E8GOgQjVHJKBqzY5livNPrkacMDNuccldh_WMyJxCLr3Ufj_znmhiA6DdDjwsy7KRZBcZVj0uEqbYhVSVwEHJcgXpFOSYldXRRIE3w8Gg1IjA5JWm9Wo_QNc/s400/nieve1_jessi_diyva.png",22,22);

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>
Sí, es largo, pero no hay que hacerle ninguna modificación. Ahora vamos a añadirlo, para ello accedemos a nuestro escritorio Blogger, y una vez allí vamos a la pestaña diseño. ¿Dónde debemos añadir nuestro script? Yo lo he colocado en el pie del blog, ya que si lo ponía en la parte superior bajo la cabecera me dejaba un espacio en blanco entre la misma y mi menú. Con esto quiero decir que yo lo colocaría en un sitio en el que no pueda haber ninguna inconveniencia.

He de remarcar que la posición del gadget es INDIFERENTE, no importa que lo pongamos en el pie del blog o en la cabecera, o en las columnas, etc. El efecto va a ser el mismo.

Pues, como he dicho, accedemos a nuestro escritorio Blogger y a 'Diseño', allí localizamos la zona en la que vamos a colocar el script, clicamos en 'Añadir un gadget' y elegimos el del tipo "HTML/Javascript". En el cuadro de diálogo que nos aparece debemos pegar el código que mencioné anteriormente, y en el título del gadget debemos escribir lo siguiente:

&nbsp;
Debe quedarnos de la siguiente manera:


Por último clicaremos en 'Guardar', y ¡ya podremos comprobar los resultados en nuestro blog!

Espero que os haya gustado y que os haya resultado sencillo, como siempre, espero también que me mostréis los resultados y ¡que dejéis vuestra huella en los comentarios!

2 comentarios:

Un comentario ayuda no sólo al autor del blog, sino también a todos aquéllos que entran en él ya que pueden ayudar a resolver dudas que antes no habían sido mencionadas, por ejemplo. Así pues, ¡no lo dudéis y dejad vuestra huella!

Recordad que estaréis ayudando además a más gente y, si no fuera por alguna duda, dejad vuestra huella para conocer vuestras opiniones tras leer cada entrada. ¡Gracias por seguir a la huella azul!

Este sitio utiliza cookies, si continúas navegando entenderemos que aceptas nuestra política de cookies. Aceptar Saber más