Cuenta regresiva para el 21 de diciembre de 2012

Dicen los que saben del tema, que el 21 de diciembre de 2012 se cumplir? una profec?a maya en la cual termina un ciclo de su calendario dando paso a una nueva era; se especula mucho sobre lo que suceder? y si bien hay muchas posturas en cuanto al tema, lo cierto es que es una fecha que est? en boca de muchos.
En mis vacaciones pasadas me encontr� en la Pen?nsula de Yucat?n mucha propaganda en camisetas, gorras, souvenirs, y espectaculares que hablan sobre este acontecimiento, as? que pens� que habr?a quienes les gustar?a tener en su blog algo alusivo a esta fecha, por ello dise?� estos gadgets.

Son dos contadores de cuenta regresiva para el 21 de diciembre de 2012 con motivos mayas que se instalan en un parpadeo, y que contar?n los d?as que faltan para que llegue esa fecha.

Cualquiera de ellos se agrega entrando en Dise?o | A?adir un gadget | HTML/Javascript.
Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript.
Ahora s?lo elige el c?digo del contador que m?s te guste y p�galo ah?.
Espero que sean de su agrado.

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdjVjK8XS1bhTvW7Tto3xpCecuYOPzVwDsubrkQg_FYcfyhUXrUlYZdeqKZbM8JLolvA_NyFIboZNxCQSX_RjP6H014RZT2nDNc0e_kQKCVqSIP77m73u9xxTVyHsY5NhCFuzeU9xNQuk/s260/calendario-maya1.png"border="0"width="260"height="120"cellpadding="0"style="-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"><tbody><tr><td><div style="margin-top:3px;margin-left:170px;font-size:45px;font-family:impact;color:#eee;text-shadow: 1px 1px 10px #ccc;"><script type="text/javascript">// Cuenta regresiva 21 Diciembre 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/$|,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();if (num < 10) num = '0' + num;for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("December 21, 2012","00","%days%");</script></div></td></tr></tbody></table>

<style>body:first-of-type .contador2012{margin-top:-30px;}</style><!--[if IE]> <style>.contador2012{position:relative;margin-top:-30px;}</style><![endif]-->
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1YILOlq6ApHbChDiXRY_G7Ft2hVtKMLTqm2CiWCXfz5IuH1PbbcEH4jGY4eBmhcHElj4j9ks8sH8bcJdPFilXzWNKGn2zq1IoQGDmc8pETbO48Anpat9TXf4JNeZWPu7UpfagtGXJDk/s260/calendario-maya2.png"border="1"bordercolor="5f4a35"cellspacing="0"width="260"height="120"cellpadding="0"><tbody><tr><td><div class="contador2012"style="position:absolute;margin-left:105px;padding-top:0px;font-size:45px;font-family:impact;color:#dbc49b;text-shadow: 1px 1px 5px #000;">
<script type="text/javascript">// Cuenta regresiva 21 Dieciembre 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/$|,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();if (num < 10) num = '0' + num;for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("December 21, 2012","00","%days%");</script></div></td></tr></tbody></table>

Reducir el espacio debajo de los comentarios

No es que sea un problema, pero algunos encuentran esteticamente poco atractivo el espacio que hay entre el formulario de comentarios y los enlaces de navegaci?n. No s� si sea mucho o poco espacio pues eso viene siendo relativo, lo cierto es que si no te gusta tener todo ese espacio no tienes que vivir con ello pues puedes modificarlo.

Para reducir el espacio que hay debajo de los comentarios ingresa a la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este c?digo:

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>

Busca el segundo height que se muestra en color rojo y cambia su valor por uno m?s bajo, por ejemplo height='260'
Y habiendo hecho eso el espacio se habr? reducido.

Si se te dificulta encontrar el c?digo gu?ate por la l?nea en color gris, pero toma en cuenta el height del cual hablamos aparece dos veces en ese c?digo, y el que hay que modificar es el segundo.

M?s luces de Navidad para el blog

S?, ya s� que ya hab?amos visto c?mo poner luces de Navidad en el blog, pero Vicky muy amablemente nos ha compartido sus im?genes y no me pude resistir a compartirlo tambi�n con ustedes, pues s� que muchos gustan de la variedad. Y si de variedad de trata pues aqu? hay 10 luces de Navidad que podemos usar para decorar el blog en estas fiestas.

Las luces quedar?n arriba del blog, y s?lo hay que entrar a la Edici?n HTML de la plantilla y agregar antes de </body> el c?digo que las luces que prefieras:

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13LI4UaKpDGVPsPJYJr_awQwGh08tpjTh8Te_FlQci1CttOydXEbqpm-VpmKxOTrr5ZfXC7BGn0DYh8PVzjva1-7ykPPsIo51NGvirFtjD9Z_gXpOjWzxBNoMjxkPvKKa_iNpkNjpFDo/s435/luces%2525209.gif);
background-repeat:repeat-x;
height:25px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_23iKGoYA5ILvtc-a691XcIluyPy2HO_v-2t-16DRzEGQxbCrQIf9wGQGYQmrlhS5Yt7Z5i8e7QJiZLEJvGb1aRFzP4jsodNrZLYBVtEsS3yCVLgLWoP7BpwWPIb0S41BJmOntlWfk4/s457/luces%25252010.gif);
background-repeat:repeat-x;
height:32px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzM8beFgSKvx1ovGtWAFE1981RmWULGL0wHNUoIghQD1mvKZEN85uAGFLeh2LRJG8Dd5yohotub8qB7cyfYULOXXvpd5c_vxajig1kMAOZj_DcwK7UM-6VPjuHcDsJ4HsGS7xofb9rVQ/s500/luces%25252012.gif);
background-repeat:repeat-x;
height:47px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGqsHgy0RdPfl7QZhmj7YEhNwFMzOWNIHPzdTAPla3zHETWq8Ru5gRTLuEJnmipAKPG4I3unBRUPCNRwg6Gdcx8A9KrwRJA8-LS1u5w3KNU43-m0LVXYPn6yJ7kZbwQ-NcuD4Cz1hAAI/s628/luces%25252014.gif);
background-repeat:repeat-x;
height:48px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhalHYsCJJ82UAb7bppLr-lLQMukdywcGzrXYKAyPLE5XAsvIQVw6Jh3vrqIdujpJexGlV8sssF-Kn4kdFJe_7CjrCkItXXg4VTaZgZiKj-roMEXJ3PHWLTAh1JLrmAAHYw0bCtyRsOvmk/s80/luces%25252015.gif);
background-repeat:repeat-x;
height:20px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKBADqoE1W7S_jwlB9xDfRvPHEKDhx3zBfNEOQGY0i7ib_X5KWz7Epv_lNkIwSv8Nx8V7dtLrO1fZnwULGZUl9mJgmNvPqQOfYl9T-BRbUqeWfsFHRUxd7utOCnU8dq3WZQkb9NrOjATQ/s360/luces%25252017.gif);
background-repeat:repeat-x;
height:21px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Ks0R5Nvp3A0EZukBZtHP0K45LDBaZieCAR_hnQ7fsz5mQ-MK-O2y_vplMRWHOVhCeYrk2-iKOckQfaREHvRNZuuoVQvJQY9v9AQnhS0sGO6kRJlix-xTQyxTi_7YPx4wHNUPHgthYns/s204/luces%25252036.gif);
background-repeat:repeat-x;
height:69px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWVwckyTrU609VTC2Ux2mB-Cc0rRm7MBmSgIsmY4Fob15dseLoDuJfM5QBSLaVXB8-Jkb5k9FR0_ICL-IvmymczTYiorgr8XSAY6RazcIrWZ3nTzTgZ6gvqMCR2kPz-npUtphOky0f_U/s123/luces%25252037.gif);
background-repeat:repeat-x;
height:44px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawH1mqG-6zFZ3Rt-C7jzYERUIUFiLM3o2oLo5vISDz9qP-zm2ui5QIM2r5wFEztMV904LojbPH26zP7HpFxHvYQi64VQLIu_mim_N65L5I8NLUSPm3xsZAuoOf6mIvJMgBBXbEpin8vQ/s333/luces8.gif);
background-repeat:repeat-x;
height:45px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkqqrrAms_CogJCZ6t8Uu9cVEgkB-kAKS9zZLXXiCCVL6f9_01IMrIk5sAhxwdalfdtFK12NYRRaas2N4fKh96jhW53yEhN9PGjBG-fJRIdauTW2ofaR0iuQ9O0yl9Jf1ovwX1d1nDzs/s129/luces7.gif);
background-repeat:repeat-x;
height:43px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

Si quisieras que las luces fueran flotantes s?lo cambia position:absolute; por position:fixed; para que las luces de Navidad sean visibles aun cuando se baje la p?gina.

Y cuando acaben las fiestas decembrinas, o se te pase el esp?ritu navide?o (lo que pase primero), s?lo quita ese c?digo y se habr?n apagado las luces.

Cambiar de lugar los enlaces de navegaci?n

Los enlaces de navegaci?n son esos links que aparecen al final de todo el blog y al final de las entradas que dicen "Entradas recientes", "P?gina principal" y "Entradas antiguas". Siempre aparecen al final a menos que la plantilla los tenga ocultos.

Pero que siempre aparezcan ah? no significa que no podamos cambiarlos de lugar. De hecho vamos a ver c?mo cambiarlos de lugar, ya sea ponerlos arriba de todas las entradas, arriba de los comentarios, o arriba de cada entrada individual.

Lo que vamos a hacer es simple, primero condicionaremos los que ya tenemos para que no sean visibles en las entradas, as? que entra a la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este c?digo:

<b:include name='nextprev'/>

En su lugar pon este:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Con eso haremos que los que tenemos siempre debajo del todo no se muestren en las entradas individuales.

Ahora puedes decidir d?nde quieres tenerlos.

Arriba de los comentarios

Si quieres tenerlos entre el final de la entrada y el inicio de los comentarios, busca esta parte en tu plantilla:

</b:includable>
<b:includable id='status-message'>

Justo arriba de ese c?digo agrega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Arriba de cada la entrada

Con esta forma podr?s poner los enlaces de navegaci?n justo arriba de la entrada, es decir, antes del t?tulo del post.
Para ello busca esta l?nea:

<b:includable id='post' var='post'>

Debajo de ella agrega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Con esos dos m�todos anteriores los enlaces de navegaci?n se ver?n s?lo en las entradas individuales, as? que hay que ingresar al post para verlos.

Arriba de todas las entradas

Con esta forma haremos que se muestren hasta arriba de todas las entradas, as? que si quieres puedes conservar los enlaces de navegaci?n de hasta abajo, si es as? omite el primer paso, sino puedes continuar.

Para ponerlo arriba de todas las entradas busca esta l?nea:

<b:includable id='main' var='top'>

Debajo de ella agrega esto:

<b:include name='nextprev'/>

Independientemente de d?nde hayas decidido ponerlos puedes darles un poco de estilo, por ejemplo puedes cambiar los enlaces de navegaci?n por una imagen, o agregarle un poco de CSS, como ponerle un color de fondo, un borde, etc.

Tan s?lo a?ade antes de ]]></b:skin> este c?digo:

#blog-pager {
background:#eee; /* Color de fondo */
border:1px solid #ccc; /* Borde */
padding:8px;
/* Bordes redondeados */
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#blog-pager a {
background:#eee; /* Color de fondo */
color:#000; /* Color de los enlaces */
}

Ese es s?lo un ejemplo sencillo pero se pueden a?adir m?s estilos si lo deseas.

Santa Claus volando en su trineo por el blog

La Navidad pasada vimos c?mo poner el trineo de Santa Claus en el blog usando una imagen y el atributo MARQUEE; un m�todo sencillo que no requiere nada mas que una imagen. Sin embargo si quieres una decoraci?n de Navidad en tu blog m?s llamativa puedes tener este Santa Claus (o Pap? Noel) volando por el blog y soltando a su paso unos peque?os destellos.

Es un script de Giffy y puedes verlo volando por esta misma entrada, se cruzar? por el blog cada cierto tiempo de abajo hacia arriba.

El script no tiene opciones de configuraci?n, pero as? como est? me parece bastante lindo, y lo mejor es que se instala pegando tres l?neas de c?digo, as? que hasta el m?s novato puede llevarse este Santa Claus al blog.

Para ponerlo s?lo entra en la Edici?n HTML de la plantilla y agrega antes de </head> este script:

<!-- Santa Claus volando por el blog -->
<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" />
<!-- Santa Claus volando por el blog -->

Y listo. Cuando terminen las fiestas navide?as s?lo elimina ese c?digo y habr?s mandado a descansar a Santa Claus y su reno.

AVISO

El sitio que provee el gadget ha insertado un banner publicitario en el script, por lo que al tener este adorno se mostrar? dicho banner en la parte superior del blog. Si no deseas que aparezca el banner habr? que eliminar el gadget en forma definitiva.

Agregar la caja de comentarios de Facebook en Blogger

Uno de los temas m?s solicitados es c?mo poner la caja de comentarios de Facebook en el blog, y es que a veces se vuelve m?s f?cil comentar desde Facebook pues la mayor?a est? conectado a esa red social todo el tiempo, adem?s no necesitamos ingresar con nuestros datos de Google para poder comentar en un blog que contenga este tipo de comentarios.

Este m�todo lo vi en Vagabundia, donde explican c?mo agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las dem?s.

Como primer paso entra en la Edici?n HTML del blog y busca la etiqueta:

<body>

Si usas una plantilla del Dise?ador entonces la encontrar?s como:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de ellas agrega esto:

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Despu�s busca esta l?nea:

<b:includable id='post' var='post'>

Si vieras una flechita ▶ al lado de ella da click para que se expanda ese artilugio. Y justo antes del siguiente </b:includable> agrega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

As? se ve el ?rea donde se agrega el c?digo (la parte que est? arriba del ?rea marcada en rojo puede variar de plantilla en plantilla)

Con eso ya tendr?s la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).

La caja estar? arriba de los comentarios de Blogger. Si quieres que est� debajo del formulario de comentarios entonces el c?digo del plugin ponlo justo arriba de este c?digo:

</div>
<b:if cond='data:post.includeAd'>

Dentro del ?ltimo c?digo que a?adimos veremos estos par?metros:

data-num-posts='5'
data-width='500'
data-colorscheme='light'

El primero es el n?mero de comentarios que se mostrar?n; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ah? ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:

#comentariosFacebook {
background:#F2F2F2; /* Color de fondo del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* C?mbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

Si quieres que cada vez que alguien haga un comentario te llegue una notificaci?n de Facebook, y puedas moderar los comentarios, ser? necesario que crees una aplicaci?n. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es as?, entra a Facebook Developers y haz click en el bot?n Crear nueva aplicaci?n.

Ah? escribe el nombre de la aplicaci?n, acepta los t�rminos y click en Continuar.

En la siguiente pantalla haz click en Sitio web, ah? escribe la URL de tu blog donde lo pondr?s; tambi�n copia el n?mero que est? en App ID.

Ahora entra de nuevo en la Edici?n HTML de tu blog y pega antes de </head> esto:

<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID de APLICACI?N' property='fb:app_id'/>

En la ID de aplicaci?n agrega la serie de n?meros que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:

http://graph.facebook.com/usuario

Cambia donde se indica tu nombre de usuario y da click, ah? ver?s cu?l es la ID de tu usuario de Facebook (Gracias a Siniestro por el tip).

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale click en Configuraci?n. Ah? ver?s varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.

Una vez habiendo hecho todo lo anterior podr?s moderar los comentarios y recibir?s las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podr?s seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Al final de la entrada he puesto una para que puedas probar el resultado, pero cualquier duda sobre el tema d�jala en los comentarios de Blogger ;)

Nieve en el blog que se acumula al final de la p?gina

La temporada navide?a ya es oficial, y al menos los que estamos en el hemisferio norte relacionamos la nieve con la Navidad, as? que es hora de abrigarnos porque haremos que caiga nieve en el blog.

En esta ocasi?n usaremos un script de Schillmania que har? que caigan unos finos copos de nieve en el blog y que se ir?n acumulando al final de la p?gina. Adem?s, la tormenta de nieve se mueve en direcci?n contraria al cursor, por lo que si movemos el cursor a la derecha entonces la nieve caer? desde la izquierda y viceversa.

Puedes ver un ejemplo en este blog de pruebas.

Para no complicarnos descargando y subiendo archivos, pegaremos el script directo en un gadget, as? podr?s quitar la nieve del blog cuando quieras con s?lo eliminar el gadget.

Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript.

Si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript.

Ah? dentro del gadget pega el siguiente c?digo:

<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="&bull;";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>

Guarda los cambios y a aguantarse el fr?o virtual.

El n?mero 40 es la velocidad en la que cae la nieve, con un valor m?s bajo caer? m?s r?pida y con uno m?s alto caer? m?s despacio.

En color rojo est? el c?digo del color de la nieve, en este caso es blanca, pero puedes cambiarlo por otro en caso que tu blog sea de un color claro, sino pues no se ver?.

Cuando acabe la temporada navide?a s?lo elimina el gadget donde pusiste el c?digo y se habr? ido la nieve.

?No te gusta esta nieve? Aqu? hay otra opci?n para hacer que caiga nieve en el blog.