Pues ya nos encontramos en el ultimo mes de este gran año, preparándonos para la Navidad y al igual que nuestro hogar, todos los que tenemos un sitio web en Blogger o cualquier otra plataforma queremos lucirlo con adornos de acuerdo a estas fechas.

Para ello, he recopilado distintos Gadgets HTML navideños, provenientes de varias fuentes. Todos se encuentran disponibles de manera gratuita y para insertarlos solo tienes que copiar su código y pegarlo en el editor de tu web.

Si no sabes como añadir gadgets a tu web exactamente, aquí te dejo un tutorial donde explico como hacerlo con las plataformas de creación web mas famosas, como JIMDO o Blogger.

Recuerda no llenar o saturar tu sitio con estos complementos u otros, para cuidar la experiencia de usuario y no olvides compartir este artículo. Comencemos.

1. Muñeco de Nieve colgando

Este muñeco animado se mostrara en la parte superior, a la derecha de tu web. Con la intención de aparentar que esta colgado como un adorno típico navideño. Puedes ver el ejemplo de este gadget en aquí.

Código:

<div style="text-align: center;"><a style= "@media screen and (max-width: 980px) display: none; left: 0px; height: 200px; width: 70px; position: fixed; top: 0px;"><img src="http://www.imagenesanimadas.net/Navidad/Adornos/adornos-01.gif" _fcksavedurl="" alt="" /></a></div>

Es posible modificar su tamaño cambiando el valor de los atributos: «width:» y «height:» y su posición con «left:» y «top:».

Para no perjudicar la vista desde dispositivos móviles de tu web o blog, el muñeco se oculta cuando recibes una visita desde estos.

2. Papá Noel andando en su Trineo

Este maravilloso gadget basado en JavaScript, al insertarlo en tu sitio muestra a «Santaclaus» viajando en su trineo por la pantalla con un diseño realmente atractivo. Puedes ver un ejemplo aquí.

Código:

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

3. Árbol Navideño luminoso

Se trata de un hermoso árbol de Navidad, que tendrá lugar en la parte inferior a la derecha de tu web. Puedes ver el ejemplo de este gadget en esta página.

Código:

<div style="text-align: center;"><a style= "@media screen and (max-width: 980px) display: none; right: 3px; height: 167px; width: 100px; position: fixed; bottom: -5px;"><img src="https://image.ibb.co/mepY4b/ezgif_com_optimize.gif" _fcksavedurl="" alt="" /></a></div>

Tienes la posibilidad de cambiar el árbol, solo elige uno en formato GIF de Internet (puede ser de este sitio), copia su URL y pégala dentro del código en (remplazando la de la original): <img src=»https://image.ibb.co/mepY4b/ezgif_com_optimize.gif«.

También puedes alterar su posición modificando el valor de los atributos «right:» y «bottom:».

4. Nieve cayendo (Estilo 1)

Al poner este código JavaScript en tu blog o web, le caerá nieve suavemente desde la parte superior, es un fantástico efecto y que no genera una distracción tan perjudicial como otros complementos. Puedes ver el ejemplo aquí.

Código:

<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>

5. Luces de Navidad arriba

Lo que hace este gadget es mostrar una serie típica de luces que se suelen ver en estas fechas, animada, específicamente en la parte superior. Puedes ver el ejemplo en esta página.

Código:

<style type="text/css">
.luces {
background-image: url(https://lh6.googleusercontent.com/-0-h4Co-Y-nI/TuuwZct5hrI/AAAAAAAAB-g/RKjXYFZwlHY/s500/luces%25252012.gif);
background-repeat:repeat-x;
height:47px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>

Puedes cambiar el estilo de las luces, eligiendo uno de estos diseños e insertando el código HTML a tu sitio.

6. Nieve cayendo (Estilo 2)

Con este widget JavaScript, caen «Copos» de nieve con un peculiar movimiento que hacen que tu web se vea preciosa. Puedes ver el ejemplo de como se vería aquí.

Código:

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
  function openwindow(){
window.open("autumn_effect.htm","","width=350,height=500")
}

  //Configure below to change URL path to the snow image
  var snowsrc="http://www.dynamicdrive.com/dynamicindex3/snow3.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // 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://www.dynamicdrive.com/dynamicindex3/snow3.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;
  if (snowdistance=="windowheight"){
    doc_height = window.innerHeight || iecompattest().clientHeight
  }
  else{
    doc_height = iecompattest().scrollHeight
  }
    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>

 

7. Cursor con iconos Navideños

Hablamos de un efecto que logra que varios iconos con motivo navideño aparezcan a lo largo del trayecto que haces con el mouse. Desde esferas hasta botas de Papá Noel. Chécalo aquí.

Código:

<!-- Cursor de Navidad -->
<div style='display:none'><script type="text/javascript" src="http://blogparts.giffy.me/0035/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/"><img style="border:0;" src="http://blogparts.giffy.me/0035/parts.png" alt="クリスマスの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/" rel="nofollow">無料で面白タイピング！</a></p></div>

8. Fantásticas estrellas cayendo

Podrás hacer que un montón de estrellas se luzcan cayendo desde lo mas alto en tu web, creando un efecto visual muy atractivo. Observa un ejemplo en esta página.

<script type="text/javascript" src="http://blogparts.giffy.me/0074/parts.js"></script>

9. Días que faltan para Navidad

Este gadget sirve para indicar a modo de «Cuenta regresiva» los días restantes para que llegue la Navidad. Cuenta con un diseño muy minimalista pero que no llega a la total simpleza. Puedes ver el ejemplo en esta página.

Código:

<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>

 

 

10. Burbujas que suben con objetos Navideños

Es el efecto mas ambicioso y laborioso de la lista, ya que aparece burbujas con dirección hacia arriba, que llevan consigo adornos sobre estas fechas. Pasándoles el cursor, revientan. Ve el ejemplo aquí.

Código:

<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/16/16833/18/parts.js"></script>

Nota importante: Algunos scripts tardan en aparecer, por lo que debes esperar un tiempo para que se carguen totalmente en tu web o blog, no te preocupes.

Bueno, finalmente espero que te hayan gustado como a mi estos efectos y gadgets navideños, deja un comentario con el link de tu blog o web para ver como quedo. Hasta la próxima.

Fuentes: AmorSevillista, CiudadBlogger