viernes, 28 de noviembre de 2014

Precipitaciones en el blog


Hola hoy os quiero presentar un par de gadgets divertidos para esta época del año en la que la lluvia y la nieve o frío se dan a menudo, teniendo además la Navidad tan cerca.
Se trata de dos efectos atmosféricos que podemos incorporar en nuestro blog. La lluvia y la nieve.

Para ello solo debemos copiar los códigos como siempre en los gadgets.  Lo podeís poner en un gadget en un menú lateral  o mucho mejor en los dos menús laterales, para tener más lluvia por todo el blog. O en un gadget debajo de la cabecera.

Para añadir lluvia en tu blog, copia este código en un gadget de los de HTML ¿ recordáis?, el que tiene este icono:


<div style="display: none;">
<script src="http://blogparts.giffy.me/0117/parts.js" type="text/javascript"></script><br />
<div style="margin: 0; padding: 0; text-align: center;">
<a href="http://giffy.me/baby/"><img alt="降水確率100%ブログパーツ;" src="http://blogparts.giffy.me/0117/parts.gif" style="border: 0;" /></a></div>
<div style="font-size: 12px; margin: 10px 0 0 0; padding: 0; text-align: center;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習!</a></div>
</div>
Este código lo he obtenido de la página http://www.ciudadblogger.com/2014/10/poner-lluvia-en-el-blog.html. Pero a diferencia del código de la página lo que he hecho es omitir las líneas que incorporaban un efecto de sonido de lluvia y tormenta, porque creo que puede ser cargante para el visitante. Pero si lo deseáis con sonido incluido copiar el código del enlace de arriba.
Este código lo he obtenido de la página http://www.mybloggerwidgets.com/2013/04/add-snow-falling-effect-in-blogger.html. Con él conseguimos que copitos de nieve caigan delicadamente sobre nuestro blog. Es igual de fácil de aplicar. Lo hacemos con los gadgets en nuestros menús laterales o de arriba como en el caso anterior.


<script type="text/javascript">  //Configure below to change URL path to the snow image  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_GWOp0fLsx6t3Odi8fb2beyC4FzYEpTt4mzaZJbV9ySJ5jFOMWGrxQ9N96hzGksUZNK0gHRs2KN8Qzr4EsKXneYVQTr3fSgVKTRYBG_rMa3qjojZr9CVFQFbl9ZGAThhwqHy04lRryKY/s400/snow.gif"  // Configure below to change number of snow to render  var no = 30;  // 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)? "http://2.bp.blogspot.com/-MsCdyoGtGdA/UX5gk72qNoI/AAAAAAAAAfQ/LaKTmUG-aJM/s1600/snow+falling+effect.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>

No hay comentarios:

Publicar un comentario