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.
NIEVE EN EL BLOG
VER DEMO
<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>
CORAZONES QUE SALEN DEL CURSOR
VER DEMO
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/3/3575/8/parts.js"></script>
ESTRELLAS QUE SUBEN Y BAJAN
VER DEMO
<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="http://1.bp.blogspot.com/_WvACVGW1iPE/TPcegFOUyrI/AAAAAAAABcQ/RPTg-8kDaqc/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>
FUEGOS ARTIFICIALES SOLO CON CSS
VER DEMOPara 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 !!