Llegan las fiestas de navidad y para celebrarlo como todos los años, he recopilado unos cuántos efectos navideños muy simpáticos para adornar nuestros blog estas navidades.
Estos gadget lo pondremos dentro de un elemento HTML/Javascript para evitar tocar la plantilla, así que sólo entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código que más te haya llamado la atención.
<script type="text/javascript">
var speed=30; // A menor numero más rápido
var flakes=150; // Numero de Copos de Nieve
var flake_image="http://i60.servimg.com/u/f60/13/20/23/83/sin_ta11.png"; // URL de la imagen de nieve
var swide, shigh;
var dx=new Array();
var xp=new Array();
var yp=new Array();
var am=new Array();
var sty=new Array();
window.onload=function() { if (document.getElementById) {
var k, f, b;
b=document.createElement("div");
b.style.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
for (var i=0; i<flakes; i++) {
dx[i]=0;
am[i]=Math.random()*20;
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=Math.random()*shigh;
sty[i]=0.75+1.25*Math.random();
f=document.createElement("div");
f.style.position="absolute";
f.setAttribute("id", "flk"+i);
f.style.zIndex=i;
f.style.top=yp[i]+"px";
f.style.left=xp[i]+"px";
k=document.createElement("img");
k.src=flake_image;
f.appendChild(k);
b.appendChild(f);
}
setInterval("winter_snow()", speed);
}}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600
}
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
document.getElementById("bod").style.top=sdown+"px";
document.getElementById("bod").style.left=sleft+"px";
}
function winter_snow() {
for (var i=0; i<flakes; i++) {
yp[i]+=sty[i];
if (yp[i]>shigh-30) {
xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
yp[i]=0;
sty[i]=0.75+1.25*Math.random();
}
dx[i]+=0.02+Math.random()/10;
document.getElementById("flk"+i).style.top=yp[i]+"px";
document.getElementById("flk"+i).style.left=(xp[i]+am[i]*Math.sin(dx[i]))+"px";
}
}
</script>
ESTRELLAS BRILLANDO POR EL BLOG
VER DEMO
<script type="text/javascript" src="http://blogparts.giffy.me/0074/parts.js"></script>
HOJAS QUE CAEN DESDE ARRIBA DEL BLOG
VER DEMO
<script type="text/javascript" src="http://blogparts.giffy.me/0004/parts.js"></script>
BOLAS QUE SUBEN CON OBJETOS NAVIDEÑOS EN SU INTERIOR
VER DEMO
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/16/16833/18/parts.js"></script>
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/3/3575/8/parts.js"></script>
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/17/17044/6/parts.js"></script>
GADGET DE DÍAS QUE FALTAN PARA NAVIDAD
VER DEMO
<style>@charset "utf-8";
/* CSS Document */
.sm_counter_cont {
position: relative;
width: 200px;
border-radius: 5px;
float: left;
background:#fff;
padding: 5px 10px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 30px;
margin-top: 10px;
box-shadow:inset 0px 1px 8px rgba(0,0,0,0.1);
}
.sm_santa {
width: 50px;
height: 70px;
position: absolute;
left: -18px;
top: -10px;
background-image: url(http://conversionvoodoo.com/Clients/blogposts/smalltimer/images/santa.png);
}
.sm_counter_cont h1 {
font-size: 15px;
margin: 0 0 2% 0;
text-align: CENTER;
color: #000;
}
.sm_counter_column {
color: #000;
width: 23%;
float: left;
border-top: 1px solid #ccc;
padding: 2% 0px;
margin: 0px 1%;
border-radius: 5px;
background-color: #FFF;
text-align: center;
}
.sm_column_top {
font-weight: bold;
}
.sm_column_bottom {
text-transform: uppercase;
font-size: 7px;
color: #898989;
}</style>
<div class="sm_counter_cont">
<div class="sm_santa"></div>
<h1>! Días para Navidad !</h1>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasdays"></div>
<div class="sm_column_bottom">Dias</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmashours"></div>
<div class="sm_column_bottom">Horas</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasminutes"></div>
<div class="sm_column_bottom">Minutos</div>
</div>
<div class="sm_counter_column">
<div class="sm_column_top" id="xmasseconds"></div>
<div class="sm_column_bottom">Segundos</div>
</div>
</div>
<script type="text/javascript">
function calculateXmasCounter() {
//calculate
var now = new Date();
var current_year = now.getFullYear();
var xmas = new Date(current_year, 11, 25, 0, 0, 0, 0); //Xmas Date (be careful: 11 is December)
var hoursleft = 23 - now.getHours();
var minutesleft = 59 - now.getMinutes();
var secondsleft = 59 - now.getSeconds();
var daysleft = Math.floor((xmas - now) / (1000*60*60*24));
//format 0 prefixes
if (minutesleft < 10) minutesleft = "0" + minutesleft;
if (secondsleft < 10) secondsleft = "0" + secondsleft;
//display
document.getElementById('xmasdays').innerHTML = (daysleft < 0) ? 0 : daysleft;
document.getElementById('xmashours').innerHTML = (daysleft < 0) ? 0 : hoursleft;
document.getElementById('xmasminutes').innerHTML = (daysleft < 0) ? "00" : minutesleft;
document.getElementById('xmasseconds').innerHTML = (daysleft < 0) ? "00" : secondsleft;
}
calculateXmasCounter();
setInterval(calculateXmasCounter, 1000);
</script>
PAPA NOEL TE DESEA FELIZ NAVIDAD
VER DEMO
<script src="http://img50.xooimage.com/files/0/8/e/papa-noel-2306a2b.js" type="text/javascript"></script>
<span id="supertext" style="color: white; font-family: Arial; font-size: 12px; font-style: normal; font-weight: normal; left: 0; position: absolute; text-align: center; text-decoration: none; top: 0; z-index: 99999999;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohzJ1dIcxd5uIKepvn-I8tTLHahLIw0VbjHeqBgdSZ-JO8mkdryGcvM514HDoE4-EyjsfAstOoSHgjJi1ltsqSKFAnJafp-dPhzvcL1SyADNJbeQwnRLEiZLxBGtuQmBkdTe_Y71PG4a6/s1600/papa-noel.gif" /><br />¡¡¡ FELIZ NAVIDAD !!!</span>
ESTRELLAS QUE SE DESPLAZAN DE IZQUIERDA A DERECHA
VER DEMO
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/0/7/20/parts.js"></script>
PAPA NOEL RECORRE EL BLOG EN UN TRINEO
VER DEMO
<script src="http://bpmaker.giffy.me/userdata/user/0/1/212/parts.js" type="text/javascript"></script>
FUEGOS ARTIFICIALES SOLO CON CSS
VER DEMO
Para colocar los fuegos en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de
]]></b:skin> pega esto:
/* Fuegos Artificiales en el fondo del blog
----------------------------------------------- */
@keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes fire{
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-fuego {
background-image: url(http://www.sologif.net/Celebraciones/Fuegos-Artificiales/fuegos-artificiales-07.gif), url(http://img.123gif.es/fuegos-artificiales/fuegos-artificiales-17.gif);
-webkit-animation: fire 40s linear infinite;
-moz-animation: fire 40s linear infinite;
-ms-animation: fire 40s linear infinite;
animation: fire 40s linear infinite;
}
Ahora busca la etiqueta
<body> en las plantillas antiguas, o éste código en las plantillas nuevas:
<body expr:class='"loading" + data:blog.mobileClass'>
Y debajo de cualquiera de las dos agrega esto:
<div id='contenedor-fuego'>
Por último busca la etiqueta
</body> y arriba de ella agrega:
</div>
Guarda los cambios y listo.
PD: La desventaja de este método es que usuarios con
navegadores no modernos no podrán verlo (
en Internet Explorer funciona de la versión 10 para arriba).
!!! Espero que disfruten esta recopilación de gadget Navideños !!
Publicaciones Relacionadas
trucos blog
