Ya faltan pocos días para el 14 de febrero, así que hoy les traigo un tutorial que les servirá para colocar corazones que caen por su blog. Es muy sencillo de aplicar al blog, como ya se darán cuenta.
( ↪ Ver DEMO)
1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y elegimos HTML/Javascript.
2.§ Pegaremos el siguiente script:
1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y elegimos HTML/Javascript.
2.§ Pegaremos el siguiente script:
<script type='text/javascript'>Lo que está en negrita, es la URL del gif de corazón, que podemos reemplazar por otra imagen.
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}
var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);
function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>
3.§ Finalmente, damos click en Guardar.
19 opinaron:
OHHHHHHHHH!!!!!...Gracias Jessica!!!!!...me encantó!!!!
» pachiarts:
Vi tu blog y quedó muy lindo!
S@lu2
Genial, la usare en mi web k stoy x lanzar !!! Muchas Gracias
» David Ramirez:
Seguro tu sitio web se verá muy bien con este script. Gracias por tu comentario.
S@lu2
Me encanto :D
» Livia Rangel:
Muchas gracias (:
S@lu2
muchas gracias lo hice y ya estan cayendo muchos corazones en mi blog MUCHAS GRACIAS
» amores y labores:
Qué bueno que te gustó este tutorial. El efecto de los corazones cayendo es muy bonito (:
S@lu2
Muchas gracias por ponerlo, me encanta :)
» cristina angulo lara:
Qué bueno que te guste este lindo efecto. Gracias por tu visita (:
S@lu2
Chicas hermoso el blog.Las felicito.
» Luisa Bustamante:
Gracias, me alegra mucho que te guste el blog. Por cierto, en este blog sólo escribe una persona (yo), quizás más adelante se una alguien más (:
S@lu2
Buenisiimoo, ya lo puse en mi blog y quedo hermoso! Gracias x tu tutorial genia.(:
Buenisiimoo, ya lo puse en mi blog y quedo hermoso! Gracias x tu tutorial genia.(:
Muchas Gracias por el tip Lo puse en mi blog y creo que se ve bien Gracias nuevamente este es mi blog por si gustan visitarlo Saludos
http://tusdiscosaqui.blogspot.mx/
» Pablo Ramos:
Qué bueno que el tutorial te haya gustado. Y claro, acabo de visitar tu blog y ha quedado muy bien (:
Gracias por el comentario y la visita al blog.
S@lu2
Muchas gracias ya esta en mi blog a ver si lo pueden ver :v
Muchas gracias ya esta en mi blog a ver si lo pueden ver :v
muchas gracias y una pregunta sabes porque algunos gadget al ponerlos en HTML/JavaScript no aparecen, me refiero a efectos como este de los corazones cayendo...
Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"
Gracias por participar en el blog.