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;">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.
<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.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