08 diciembre 2013

Efectos de Navidad para Blogger

gadget navidad para blogger

Vease tambien esta entrada reciente (2014)
Recopilatorio de Efectos de Navidad para Blogger (2014)

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.

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>

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='&quot;loading&quot; + 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 !!


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

21 comentarios

Gracias por los gadgets me encantan pero veo que hay uno que sale en "ver demo" que no has puesto, el del papa noel que recorre el blog en un trineo. Podrías ponerlo por favor? Es que me encanta.

Pilar ya está actualizada la entrada, antes de los fuegos artificiales lo puedes ver.
Saludos.

Muy bueno los gadgets, aunque de momento use de este post sólo la nieve ya que recargaría mucho el blog con las imagenes, tenía que darle un toque de navidad, el que quiera verlo como quedó aquí dejo el link. acepto sugerencias. conciencia-agroecologica.blogspot.com Saludos...

Dos preguntas si me pudieras aclarar: primero, cuando se cambia la plantilla se borran los gadget y su disposición? y segundo como se hace para cambiar la imagen de fondo del blog?? si tienes unos articulos que me recomiendes mejor. gracias de antemano.

Daniel, al cambiar de plantilla los gadget se mantienen pero la disposición cambia.
En cuanto a la imagen del fondo, prueba Con esta Entrada

Me ha encantado tu blog.
Un saludo

http://deoropesaafuenlabrada.blogspot.com/

Gracias Yolanda por entrar y comentar en este blog.
Saludos.

Como han cambiado lo de la plantilla no se como meter lo de las estrellas laterales. Me puedes echar una mano?
Un saludo

Yolanda, entra en el panel de administración-Diseño-Añadir un gadget
HTML/Javascript y dentro colocas el código del que hayas elegido.

Muchas gracias, pensé que me tenía que meter en la plantilla.

Es genial, y sencillísimo, cosa que yo siempre agradezco. Lo he puesto en mi blog. Gracias ¡¡¡

Me gusta tu programación, la recomendé, agradezco que sepas compartir
mira como quedo.

http://minalapaz2013.blogspot.mx/

Muchas gracias por la pequeña lección. He decorado el blog como quería gracias a estos gadget. Claro y fácil.
Te agradezco que los hayas compartido. Buen trabajo.
Salu2

Muchísimas gracias al fin una página dónde lo explican bien y es sencillo de poner!!

Me he quedado con la nieve y funciona perfectamente, fácil y sencillo.
Gracias.

muchas gracias puse en mi blog la de nieve cayendo

asi queda

https://peliparatodos.blogspot.com.ar/

es verdad queda super bien, delicado y para nada invasivo

https://peliparatodos.blogspot.com.ar/

Fantastico, muchas gracias me ha ayudado muchísimo


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"