Ya faltan pocos d?as para celebrar el d?a de San Valent?n y el romance ya se siente en la atm?sfera. Y ya que andamos con la pasi?n en las venas por qu� no adornamos el blog con unos corazones flotando por la p?gina y que cada uno tenga un enlace a una red social o al feed del sitio, digo, para que adem?s de vagar por la p?gina tengan una utilidad.
Puedes ver estos corazones en este blog de pruebas.
Para agregarlos entra en Dise?o | Edici?n de HTML y antes de </head> agrega esto:
<script type='text/javascript'>Ahora pega despu�s de <body> lo siguiente:
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function pagestart(){
//Aqu? le agregamos los IDs a las im?genes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
//Aqu? indicamos cu?ntas im?genes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
<!-- Corazones flotando por la p?gina -->Si usas una plantilla hecha con el Dise?ador de plantillas de Blogger entonces el c?digo anterior deber?s pegarlo despu�s de esta l?nea:
<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sxUQVjfA83n4VpPP3ilagATpz8ipkQBY_tfi4-gdbb9JkaixdOiyaVtKZkfe-Bq0Kq9pmOelgT3SPSgdA1awchwzYy4N-cI52oyY5MgQ2d0lPGXBSap-IDQ54sm6Ixh2HWTs9CRRioM/'/></a>
</div>
<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='http://twitter.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkpw1BQUXoyIv4qOhbCxdfwO9jMizpfwGak__C0RmSaABH4Ine4tioToGTYj-p2kfm5Muz40obSJRvnEezRFOBE7DVv1BvHlwb18seTh7QKIcZUTL4xqopmIOY4v-9QxXbhQdby86zUc/'/></a>
</div>
<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb83vdKQqT9371wKJZwvZ-4m-qiliCZvWLRme7Bx1UM0ye0HFKMhrkAcuoCe3tX9AuDKFqVLI4MvX6yb6sF8s-09eW2T-BG2VuQ5fqXjeGuemDEehPhid2k9A6GVS1g_7lAdsVyNjQ6xk/'/></a>
</div>
<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL de cualquier enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl46r88T8fdaLdqvP2Nbhzfz8L2D3vDolabJW35XOKMBC5ZIu7uhtSutEVUs26AAOyAXTh0QPmgusO-IM6153EjQKW21-wkRt8BwbfqOKxYbH3532ooCnX5No-WtTBZ_CC-QrdBktxhpI/'/></a>
</div>
<!-- Fin de Corazones flotando por la p?gina -->
<body expr:class='"loading" + data:blog.mobileClass'>
Ya s?lo agrega los nombres de usuario de Facebook y Twitter donde se indica en color rojo as? como el nombre de tu blog y el enlace a alg?n sitio que quieras.
Si deseas a?adir m?s corazones o im?genes busca esta parte del c?digo y agrega las l?neas en color verde como se indica:
//Aqu? le agregamos los IDs a las im?genes
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);
corazon5=new Chip("corazon5",47,68);
corazon6=new Chip("corazon6",47,68);
corazon7=new Chip("corazon7",47,68);
//Aqu? indicamos cu?ntas im?genes hay programadas
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
movechip("corazon5");
movechip("corazon6");
movechip("corazon7");
Si te fijas en todas las l?neas se han cambiado los n?meros de manera consecutiva, por lo que si agregas m?s l?neas tambi�n deber?n seguir n?meros consecutivos.
Y luego, en la otra parte del c?digo se agregar?an los c?digos de las im?genes tambi�n tomando en cuenta el ID con en n?mero consecutivo:
<div id='corazon5' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL del enlace'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl46r88T8fdaLdqvP2Nbhzfz8L2D3vDolabJW35XOKMBC5ZIu7uhtSutEVUs26AAOyAXTh0QPmgusO-IM6153EjQKW21-wkRt8BwbfqOKxYbH3532ooCnX5No-WtTBZ_CC-QrdBktxhpI/'/></a>
</div>
Seguramente nos hartaremos en poco tiempo de estos corazones, pero al menos durante el d?a de los enamorados quedar? ad hoc en el blog y los que somos m?s melosos lo dejaremos por m?s rato, ?Vive l'amour!
NOTA: En Internet Explorer no funciona.
?Otra opci?n?
No comments:
Post a Comment