• 1

La Navidad Llega a tu blog!





Es tiempo de navidad, la gente decora sus hogares y prepara todo con lujo detalle, entonces... ¿Por qué no decorar tú blog? Es nuestro espacio y lugar de relajamiento, trabajo y recreación, y es importante hacer aparentar a los demás que tenemos sentido navideño y que no descubran el verdadero Grinch que llevamos dentro.


NIEVE                                              

Empezamos con 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.

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? mira esta otra.

Para poner esa nieve en el blog copia y pega esto antes de </head>

<script language='javascript' type='text/javascript'>
//<![CDATA[
// Nevando en la pagina por Eloi Gallés Villaplana
// Adaptado a navegadores DOM por Iván Nieto - junio 2007

var numero = 16
var velocidad = 4
var imagennieve = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qIfwjf4F-Ypcb048oSOh-yB1mIEZZGRD6d6UfR-3kpQ9JhQ0oksQzndXpLmjZvb8F0M4UzbbY-51GmT65ot2tkkNQPJNrLviw3UnfT1NxgExRPfDRWMAs_WP_4cRGxjfx4eI-inIf9c9/"

var ns4arriba = (document.layers) ? 1 : 0
var ie4arriba = (document.all) ? 1 : 0
var dombrowser = (document.getElementById) ? 1 : 0

var dx, xp, yp
var am, stx, sty
var i, doc_ancho = 1024, doc_alto = 768

function nieva() {

 establece_dimensiones()

 dx = new Array()
 xp = new Array()
 yp = new Array()
 am = new Array()
 stx = new Array()
 sty = new Array();
    
 for (i = 0; i < numero; ++ i) {
  dx[i] = 0
  xp[i] = Math.random()*(doc_ancho-50)
  yp[i] = Math.random()*doc_alto
  am[i] = Math.random()*20
  stx[i] = 0.02 + Math.random()/10
  sty[i] = 0.7 + Math.random()
  if (document.layers) {
        if (i == 0) {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
    document.write("top=\"15\" visibility=\"show\"><img src=\"")
    document.write(imagennieve + "\" border=\"0\"></layer>")
        } else {
         document.write("<layer name=\"dot"+ i +"\" left=\"15\" ")
         document.write("top=\"15\" visibility=\"show\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></layer>")
        }
       } else if (document.all || document.getElementById) {
        if (i == 0) {
         document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
         document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
         document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></div>")
        } else {
         document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")
         document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ")
         document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"")
         document.write(imagennieve + "\" border=\"0\"></div>")
        }
       }
     }
    
 nieve()
}

function nieve() {
 for (i = 0; i < numero; ++ i) {
  yp[i] += sty[i];
  if (yp[i] > doc_alto) {
   xp[i] = Math.random()*(doc_ancho-am[i]-30)
   yp[i] = 0
   stx[i] = 0.02 + Math.random()/10
   sty[i] = 0.7 + Math.random()
   establece_dimensiones()
  }

  dx[i] += stx[i];

  
  if ( document.all ) {
   var copo = eval("dot" + i )
   copo.style.posLeft = xp[i] + am[i]*Math.sin(dx[i])
   copo.style.posTop = yp[i]
  }
  
  else if ( document.layers ) {
   var copo = eval("document.dot" + i)
   copo.left = xp[i] + am[i]*Math.sin(dx[i])
   copo.top = yp[i]
  }
  
  else if ( document.getElementById ) {
   var copo = document.getElementById( "dot" + i)
   copo.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px'
   copo.style.top = yp[i] + 'px'
  }
 }

 setTimeout("nieve()", velocidad)
}
function establece_dimensiones() {
 if (self.innerHeight) {
  doc_ancho = self.innerWidth
  doc_alto = self.innerHeight - 25
 } else if (document.documentElement && document.documentElement.clientHeight) {
  doc_ancho = document.documentElement.clientWidth
  doc_alto = document.documentElement.clientHeight - 25
 
 } else if (document.body) {
  doc_ancho = document.body.clientWidth
  doc_alto = document.body.clientHeight - 25
 }
}
//]]>
</script>


Luego antes de </body> pega esto:

<script language='javascript' type='text/javascript'>
nieva()
</script>

Al inicio del primer código que pegaste verás que dice var numero = 16 ahí puedes modificar el número de copos que quieres que aparezcan y en var velocidad = 4 la velocidad con la que caen.
Con estos sencillos pasos tendrás nieve cayendo en tu blog lo cual le dará un espíritu navideño


¿Ninguno de los dos anteriores te convence? mira este otro.

Si te gusta este procede igual que los anteriores e inserta este script en tu blog:

<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 


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



HOJAS QUE CAEN DESDE ARRIBA DEL BLOG


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


BOLAS QUE SUBEN CON OBJETOS NAVIDEÑOS EN SU INTERIOR


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


CORAZONES QUE SALEN DEL CURSOR


<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/3/3575/8/parts.js"></script>


ESTRELLAS QUE SUBEN Y BAJAN


<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/17/17044/6/parts.js"></script>


PAPA NOEL TE DESEA FELIZ NAVIDAD



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/AVvXsEgu2oe9a63yWiA9twaxIQ8wCAsk5dsnHwWFrBlG5V9Ojb1feu7vw8I-8IyrvME-9Zb5Hkg35VDA0-1PCJq9Nt2Ucp6RdaLJJLcp7D3h3kzRN4lZ7aIDta0zhWkr3aF8FutryIoeM8Xba5SF/s1600/papa-noel.gif" /><br />¡¡¡ FELIZ NAVIDAD !!!</span>



ESTRELLAS QUE SE DESPLAZAN DE IZQUIERDA A DERECHA



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



<script src="http://bpmaker.giffy.me/userdata/user/0/1/212/parts.js" type="text/javascript"></script>



FUEGOS ARTIFICIALES SOLO CON CSS


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>




GADGET DE DÍAS QUE FALTAN PARA NAVIDAD


Pega esto en tu archivo css:
<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>



Pega esto en tu archivo HTML:
<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>




CORONA NAVIDEÑA PARA LA CABECERA



Pega este código en un gadget "HTML/ Javascript"

<img style="border:none;position:absolute;top:0; left:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKf1blI_TNoepzHcs89YQY0dhh5_ivbZr-RGiCFtcY9GXtXAtGToEagA2uBRN-n9sUtWxX6-vQA-WbPSysIXYbaex6Z69Nt-zeqAJCG5rzWbRajY4RLr3qas3_bEkHOcOaa1e751CHyc/s1600/corona+navide%25C3%25B1a.png" />



Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" src="http://www.caxigalines.net/gifanimados/navidad/guirnaldas/guirnaldas2.gif" title="Feliz navidad" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="320" src="http://www.guauquecosas.com/wp-content/uploads/2013/11/Una-guirnalda-navide%C3%B1a.gif" title="Feliz navidad" width="320" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Xd6Pd_rE5ETWmfArgyJF4_JXBFOpTaOh4Q3VXVt7YkyYRP8OokRa6sChl-U1weE_0oaOOo0WSfwD-6Iieq2MHKZFQAI3_fiNH0G2AIdlQ0xAvkF24n1J7Qgy9vjNMiEdYTriiuCB020/s200/Navidad+(34).png" title="Feliz navidad" width="159" /></div>




Feliz navidad


<div id="navidad"> <img alt="Feliz navidad" height="185" src="http://cur.glitter-graphics.net/pub/3203/3203604egxjviugap.png" title="Feliz navidad" width="320" /></div>


ARBOL DE NAVIDAD





<img style="border:none;position:fixed;bottom:-10px; left:10px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhITAY3qyGyxyoO9f4KKrB8AyPEyu9uA_txPkG7uqMyPo8ICfmgmmfJ9VLXX6BTTJ3WDRSpPb4E4FiOl0FTwoJwkUXYv-vDXtFyLdGPSYGsjHnH0wNx5JtBQ79gcfGxjpl0APoSC2r6vJw/s1600/Christmas-tree-256%255B3%255D.png" />





PACK ICONOS SOCIALES NAVIDEÑOS

Christmas Social Bookmark (17 íconos):
Web oficial para descarga




Christmas Ornaments Social Media Icon Set (36 íconos):
Web oficial para descarga


 


 Pack 26 íconos navideños (Por Extreme John):
Web oficial para descarga






PERSONALIZA TU GORRO DE NAVIDAD


1 comentarios:

  1. Esta boca es mía12 de enero de 2015, 13:26

    No me lo puedo creeeeeer ... con efecto navideño, nieve, luces, papá noel ... Jorgeeeeee no me lo esperaba ¡¡¡
    Que guay. Me ha encantado. Y la entrada está chulísima.
    Tienes un requetepositivo ¡¡¡ Fdo: La que pone las notas, sin ruleta :)

    ResponderEliminar

Datos personales

Con la tecnología de Blogger.

Copyright © / Ariza Blog