Ojos que siguen al cursor

Una forma graciosa de mantener entretenidos a los lectores peque?os (y no tan peque?os) en nuestro blog, es con unos ojos que siguen al cursor por donde �ste se mueva. El objetivo es meramente de entretenimiento para quitarle un poco de seriedad al blog y hacer que los lectores se diviertan.
Puedes ver el ejemplo aqu? mismo, mueve el cursor por la p?gina y los ojos te seguir?n.

Colocar estos ojos que siguen al cursor no nos quitar? mucho tiempo. Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript. Y si usas la nueva interfaz entra en Dise?o | A?adir gadget | HTML/Javascript. Ah? pega esto:

<script type='text/javascript'>
//<![CDATA[
// Ojos que siguen al cursor
// Script original de Oopstudios.com
// Adaptado por ciudadblogger.com

EYES = {};
EYES.stack = [];
//
EYES.follow = function (eye) {
var el1 = document.getElementById (eye);
var el2 = el1.getElementsByTagName ("IMG");
el2 = el2[0];
el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;
el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";
el1.maxDist = 6 * el1.offsetWidth;
EYES.stack.push ([el1, el2]);
};
EYES.mousemove = function (e) {
if (!EYES.stack.length) {
return;
}
//
var mouseX = mouseY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//

for (var e=0, l=EYES.stack.length; e<l; e++) {
var el = EYES.stack[e];
var elX = elY = 0;
if (el[0].offsetParent) {
obj = el[0];
do {
elX += obj.offsetLeft;
elY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);
el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);
var difX = mouseX - el[0].centreX;
var difY = mouseY - el[0].centreY;
var dTan = Math.atan2 (difX, difY);
var dist = Math.sqrt ((difX * difX) + (difY * difY));
dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));
var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);
var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);
el[1].style.margin = newY + "px 0 0 " + newX + "px";
}
};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);
else document.addEventListener ("mousemove", EYES.mousemove, false);
//]]>
</script>


<div style="position:relative; height:150px; margin-bottom:30px;">
<div id="Ojo1" style="width: 170px; height: 140px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWRmrCWtcWtQX7DcJXpaqNyghbIIk6A99f1JAxpfS6xpliGC25cbcvAYLNOicUM6Exr5PkIzGBaG70a4Y8T9PYAQdaBIlSNT7EmuRJWQe3TbmJusR_zjYLeP0N1wZVUwoChoJwXfAz74/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IvkrdJHvRPknnMf3zAKStWRjs7lg4ZN003wUUNRjzCpMMvl8yOwWu7HpN0ARkNSH9BRmHjZDxbi3CLjVOKowiwFBC39vgLp2PacoujZHW-zeo8u-gSsEpgnOGWoQ3_0P-NzUToZ7_1M/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmw9vwpIkc-TQBmd6zSNyBymBWR2bA24J9zLNiUnz_Ko2j9rmRK6aw0rnivtgRvUZ1UtR_talw4KxFUAdKl6hgj09zBp1zDUIH8w0jtYw6zlwr1rtRcmM2IgC90Y2r5REg2e26Ok8F3DQ/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IvkrdJHvRPknnMf3zAKStWRjs7lg4ZN003wUUNRjzCpMMvl8yOwWu7HpN0ARkNSH9BRmHjZDxbi3CLjVOKowiwFBC39vgLp2PacoujZHW-zeo8u-gSsEpgnOGWoQ3_0P-NzUToZ7_1M/s30/pupila.png" width="23" height="23" /></div>
</div>


<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>

Guarda los cambios y listo. Los ojos se ver?n mucho mejor si los pones debajo de la cabecera, as? que s?lo basta arrastrrar el gadget debajo de la cabecera para que quede ah?.

Pero para que haya un poco de variedad he puesto a su disposici?n cuatro tipo de ojos diferentes, s?lo tienes que eliminar la parte gris tenue y en su lugar poner uno de estos c?digos.

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2_2jsnWuz2yMDXMTPMA_yWuQ6mRh-ZZ2me16FYEKZyg4TuN3LmN6-xmj1e76IkXzG1LK6-gU9O0Fit-HjRzvXI0AmIKHe4r5rI4n2RzADfGvbWboy8AHYDRg1uGDZI7QkL0zHlCkff8/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSM1k2qyXIjUvFbX7nHN5gmQCTrvJEg18nHnCL5nPPxNCX9kixhO2fnDjKYRb2WHQLhGfSe1tlOU4VbCt_NB1WSyu4LIZzgU3JlFKxxMocR8Koid_LJEM1u9P2j4AvWJnFcxCPqU57dvg/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-vgL9-yre1mizwAsmxz9YzlnYfW6kfwacwNMB0fnjzVbvShws4WKEVUteFbxtfzLxXCAFQEGImiT3OOAd9DMN8Rsv4k-WRgPIXDs0mBjGT3pjFXuSqRewuoCUsbpMnLgKFxBsaJ3EcXY/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSM1k2qyXIjUvFbX7nHN5gmQCTrvJEg18nHnCL5nPPxNCX9kixhO2fnDjKYRb2WHQLhGfSe1tlOU4VbCt_NB1WSyu4LIZzgU3JlFKxxMocR8Koid_LJEM1u9P2j4AvWJnFcxCPqU57dvg/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1RgiGxHSnaLXRcd040ChtaABJoErwO6vENbyt7PzFfLrVIFFtyc9zm1szhHVLfw2xPvj9fq-Zw-3xVHeenHdhKuLJzqZVL50wZSnOydVzsVRg_2WnUe8yLZ39YyssE4IuKcI7FIfzGg/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusKqM0JEZ9MCY0Nnp4kH4obdGn029qauOWdaqzhrSvUvwkdeq_cS3jRL9JXU9URK4b8xYmb7CHvQDMHs4WAhFcLJ127LGzB_s_rJP6kCtrBOpCoVpj2g5dqYoIr1OT8IUTrKKZCa3A3g/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMip2M5mi6CG1OXNPSib4GVqRdWG4i-T_L1UGECaW2wv5bm7BOVgahFZDWp1JgAOILIlbWzuFLJ5f_eie8220Bsz3wDZ6OOPm4j0yysqjA0avEDBJAqnadiZEgxDsDbvBaJt14n4i2ywU/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhusKqM0JEZ9MCY0Nnp4kH4obdGn029qauOWdaqzhrSvUvwkdeq_cS3jRL9JXU9URK4b8xYmb7CHvQDMHs4WAhFcLJ127LGzB_s_rJP6kCtrBOpCoVpj2g5dqYoIr1OT8IUTrKKZCa3A3g/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:161px; margin-bottom:30px;">
<div id="Ojo1" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hM7uGS4NWIoDxm9iT5FUU7N5T5VyebkLtAlih8Lrg32KU2Lis9pC-bP8jqaYZPquWpV9n_EISX9-AHSoNQLNgId6naWUycsa8APnFYi8TKAl04oGPDzZEp47fkDCTW5U6vTJTTKNZjs/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o5uQkFEUopWsEkJhkNMfLg7eXiNqVAY8js5KhwhB1arY9aXmgG5rZoRAV7ZZfZ2SwB9iISwoG6QJcI62bXK2ddjP7QkiS9gbbGfdJ6_oY2BRxBZ1zCncDxTz0SL501OsQNOuyFOe54k/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo2" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXbLeUOEvQA6p2wo8yUAoeZNixYgqSZD8-_01k57rBUCfd1DyI9risFYxF0lLVeyYgogWsU6Xs59B4B-SlvPikDP_0bE9mCfgOaFt8Fvs9VQXxaywoGymDuBpP-d0Cx4cXKJ8BK5HPsXo/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o5uQkFEUopWsEkJhkNMfLg7eXiNqVAY8js5KhwhB1arY9aXmgG5rZoRAV7ZZfZ2SwB9iISwoG6QJcI62bXK2ddjP7QkiS9gbbGfdJ6_oY2BRxBZ1zCncDxTz0SL501OsQNOuyFOe54k/s71/pupila.png" width="65" height="65" /></div>
</div>

Si quisieras mover los ojos m?s a la izquierda o derecha entonces debes modificar las partes en color rojo, el primer valor es la distancia del primer ojo desde la izquierda, y el segundo valor es la distancia del segundo ojo tambi�n desde la izquierda. Por lo tanto, para separar o juntar m?s los ojos s?lo debes modificar el segundo valor de left.

Ojal? que se diviertan tanto como seguro sus lectores lo har?n :)

Murci�lagos volando por la p?gina

Si no te decidiste por los fantasmas en el blog quiz? quieras que unos murci�lagos se paseen por toda la p?gina para darle ese toque de terror a este Halloween.

Estos peque?os mam?feros se desplazar?n por toda la p?gina aun cuando bajemos el scroll. Al inicio ir?n volando juntos pero poco a poco se ir?n dispersando por toda la p?gina.
Puedes verlos en este blog de pruebas.

Para poner estos murci�lagos volando en el blog, entra en la Edici?n de HTML y antes de </head> pega este script:

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Murci�lagos volando por el blog
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
***********************************************/

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(){
murcielago1=new Chip("murcielago1",147,168);
murcielago2=new Chip("murcielago2",47,68);
murcielago3=new Chip("murcielago3",47,68);
murcielago4=new Chip("murcielago4",47,68);

movechip("murcielago1");
movechip("murcielago2");
movechip("murcielago3");
movechip("murcielago4");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

Ahora antes de </body> pega este c?digo:

<!-- Murci�lagos volando -->
<div id='murcielago1' style='position:absolute; z-index:80; left: -500px; width:125px; height:108px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVXvZtEathhrNXiyiCyV4_S0KdUg4txbSnB8_7qn5cgn7s1TJ0gDqKvisA3aex7PxdYoq8FSZeRxr0XvWBra4KYUDiA_m_38mO5Q8TQfN2Td3YsHGn0hMRJmepq8dh5lvJiinu6iVzhc/s125/murcielago1.gif'/></div>
<div id='murcielago2' style='position:absolute; z-index:81; left: -600px; width:120px; height:99px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkA-on_XC5wHJJ2zZnVfRk8C8H2odwi5WEKIRV_TVKnZ7hzHYu0n7KS9-Bnm7dO7ijL6uTCaLstjMFH8x-r3zgVIb8z7aJZSllOWApQK4c29g9WCm2t0zZfxaN6w6VUa-MWRiv9N6zgbE/s120/murcielago2.gif'/></div>
<div id='murcielago3' style='position:absolute; z-index:82; left: -700px; width:160px; height:120px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6wNn1WGg9INzRNDteZAkOGIst8opYAPlQgKEq6mI-Bd56dmD5P36dOe5V_yCayoXy688HQkTCynw4VLo7SI5mXOaq2lXH49ZosqzBpmSklGYjn4A81fF4t7ypYIaLfkcLBirOC-YPtio/s160/murcielago3.gif'/></div>
<div id='murcielago4' style='position:absolute; z-index:83; left: -800px; width:106px; height:85px;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW3YsugzpURTtToCVNMYMJT6RbRnwYhP1F3fjJ9EBOa5qK_yF-tOgBQrBOo7C_KX7Lgh0paoQy6KeakxfAXvN1YhFRFXqvE4jTjNSq-k9AKE8MmYZdjGeJTmh2MkVvMyoaNa9DAPwhEhE/s106/murcielago4.gif'/></div>
<!-- Fin de los murci�lagos -->

Eso es todo; es una forma sencilla de decorar el blog para la pr?xima noche de brujas. Combinado con los sonidos de Halloween seguro le dar?n un ambiente de terror a tu blog.

Sonidos de Halloween al entrar al blog

Ya tenemos el Halloween a la vuelta de la esquina, as? que hay que apresurarnos a pensar c?mo decorar el blog para la noche brujas.

Se me ocurri? que podr?amos utilizar el reproductor de Google Reader que vimos la entrada anterior, pero ahora lo meteremos dentro de un script para que pueda reproducir varios sonidos al azar cada vez que cargue el blog.

Puedes ver el ejemplo en este blog de pruebas. Al entrar te recibir? un escalofriante sonido, si recargas la p?gina se reproducir? otro sonido al azar.

Son 13 sonidos diferentes... ?coincidencia? No

Los sonidos son variados, hay risas de brujas, lamentos de fantasmas, aullidos de lobos, gritos, y hasta el famoso tema de Bach (Tocata y fuga) que seguro le dar? un ambiente apropiado a estas fechas.

Para poner estos sonidos de Halloween en el blog s?lo entra en la Edici?n de HTML y antes de </body> agrega lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Sonidos de Halloween
// ciudadblogger.com
var mp3 = [
"https://sites.google.com/site/ciudadbloggerfiles/Home/Aullido1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Aullido2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Bach1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Campanas1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Canto-Nina1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Fantasma1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Fantasma2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Grito1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Grito2.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Monstruo1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa-Aullido1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa1.mp3",
"https://sites.google.com/site/ciudadbloggerfiles/Home/Risa2.mp3",
];

var ran_unrounded = Math.random()*mp3.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+mp3[ran_number]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>

Guarda los cambios y listo, a asustar a tus lectores.

Puedes quitar o poner m?s sonidos, s?lo hay que eliminar o agregar una l?nea como esta:

"URL del sonido MP3",

• El reproductor no se ver? pues se ha reducido su ancho y alto a cero.
• Los sonidos son aleatorios as? que podr?n repetirse algunas veces.
• Se reproduce autom?ticamente cada vez que se recargue la p?gina o se ingrese a una p?gina del blog.
• No usa cookies por lo tanto se escuchar? siempre, pero son sonidos breves no mayores a 10 segundos en su mayor?a as? que no son molestos, adem?s, son s?lo para esta temporada, despu�s podr?n quitarse.

Si lo deseas puedes descargar los archivos y subirlos a tu propio hosting.

Descargar | Sonidos de Halloween

Usar el reproductor de Google Reader en Blogger

Gmail y Google Reader poseen un reproductor de audio que quiz? no es visualmente el mejor que encontremos en la red pero sin duda es muy veloz en cargar al estar alojado en Google.

Ambos son muy similares y el c?digo es como el de cualquier otro reproductor de su tipo, y como ya dijimos, est? alojado en Google as? que nosotros s?lo tenemos que preocuparnos por alojar nuestras canciones en un servidor y listo.

Reproductor de Google Reader

No, no es el Chavo del 8, es la Marcha Turca de Beethoven, pero lo que ahora nos importa no es eso, sino c?mo usar este reproductor. S?lo tenemos que poner en un elemento HTML/Javascript, o en una entrada, el c?digo siguiente:

<object width="350" height="27" id="movie" type="application/x-shockwave-flash" data="http://reader.googleusercontent.com/reader/ui/3523697345-audio-player.swf?audioUrl=URL del archivo MP3"> <param name="movie" value="http://reader.googleusercontent.com/reader/ui/3523697345-audio-player.swf?audioUrl=URL del archivo MP3" /> <param name="wmode" value="transparent" > <param name="allowScriptAccess" value="never"> <param name="flashvars=" value="playerMode=embedded"> </object>

Ah? agregamos en las dos partes donde se indica, la URL de nuestra canci?n y listo.

AVISO
El reproductor de Gmail ya no funciona, ?nicamente el de Google Reader.

El reproductor de Gmail es muy similar, s?lo var?a un poco en el dise?o.

Reproductor de Gmail

En c?digo que usamos para este reproductor es el siguiente:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="250px" height="27px" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="http://mail.google.com/mail/html/audio.swf"/> <param name="FlashVars" value="audioUrl=URL del archivo MP3"/> <param name="wmode" value="transparent" /> <embed id="Player" src="http://mail.google.com/mail/html/audio.swf?audioUrl=URL del archivo MP3" wmode="transparent" width="250px" height="27px" name="Player" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

De igual forma ah? agregamos dos veces la URL de nuestra canci?n.

Si quieres que la canci?n se reproduzca autom?ticamente entonces agrega despu�s de cada URL este par?metro: &autoPlay=true De modo que la URL quedar?a m?s o menos as?:

http://tuhosting.com/cancion.mp3&autoPlay=true

Es un reproductor de mp3 sencillo pero que cumple su objetivo perfectamente. Y aunque funciona en todos los navegadores en Safari puede dar problemas si se tiene un dominio propio, pero los que no tienen dominio propio pueden usarlo sin problemas.

Personalizar el Lightbox de Blogger

Ahora s?, los que han elegido usar el Lightbox de Blogger tienen un sistema de ventanas modales para mostrar las im?genes del blog de una forma distinta a la habitual.

S?, es muy bonita y le da algo de estilo a las im?genes, pero... ?debemos conformarnos con el color negro de la pantalla? No, la verdad es que podemos personalizar el Lightbox a nuestro entero gusto.

Me refiero a que pasaremos de esto:

A esto:

Podemos modificar todo el aspecto de la ventana modal por completo, el color de fondo, la transparencia, el bot?n de cerrar, el borde de las im?genes, los textos que aparecen en ella, y la barra donde se muestran las miniaturas de las im?genes.

Lo ?nico que tenemos que hacer es sobre escribir los estilos por defecto y cambiarlos por los nuestros. As? que entramos a la Edici?n HTML de la plantilla y antes de ]]></b:skin> pega lo siguiente:

/* Lightbox de Blogger
----------------------------------------------- */
/* Color de fondo de la pantalla */
.CSS_LIGHTBOX_BG_MASK {
background-color: #E0ECF8 !important;
opacity: 0.9 !important;
filter: alpha(opacity=90) !important;
}

/* Estilos de las im?genes */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFF !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 5px #000000;
-moz-box-shadow: 10px 10px 5px #000000;
box-shadow: 10px 10px 5px #000000;
}

/* Icono para cerrar la ventana modal */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(URL de la imagen) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Color de fondo de la barra de miniaturas */
.CSS_LIGHTBOX_FILMSTRIP {background-color: #000 !important;}

/* Color del texto de la informaci?n de la imagen */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #000 !important;}

/* Color del ?ndice (n?mero de im?genes) */
.CSS_LIGHTBOX_INDEX_INFO {color: #000 !important;}

Las anotaciones en color verde explican a qu� ?rea corresponde cada parte.

El /* Color de fondo de la pantalla */ puedes cambiarlo por el que quieras, incluso puedes cambiarlo por una imagen. Si deseas hacer eso entonces cambia esta l?nea:

background-color: #E0ECF8 !important;

Por esta otra:

background-image:url(URL de la imagen) !important;

La opacidad est? justo debajo, con un valor inferior el fondo se har? m?s transparente. Con el valor 1 (y 100 en filter) perder? toda transparencia.

Para el icono de cerrar la ventana se debe agregar la URL de la imagen donde se indica. Debajo se encuentra el ancho y alto (width y height) de este icono, tambi�n se debe especificar.

Si no quisieras que aparezca la informaci?n de la imagen (generalmente es la URL de ella) agrega debajo de /* Color del texto de la informaci?n de la imagen */ esto:

display: none;

Los estilos de las im?genes se pueden modificar tanto como queramos, se pueden cambiar los bordes redondeados, la sombra, etc. pero recuerda que es CSS3 as? que versiones antiguas de Internet Explorer no lo ver?n.

Es un truco sencillo que nos puede ayudar a personalizar un aspecto m?s del blog para que se adapte al dise?o de la plantilla, y para que nuestro Lightbox no se vea igual al de todos.

Puedes ver un demo de este Lightbox personalizado en este blog de pruebas.

Activar o desactivar el Lightbox de Blogger

Hace casi un mes Blogger lanz? el Lightbox nativo de Blogger, un sistema de ventanas modales para ver las im?genes de una forma distinta a lo habitual.

Las quejas no faltaron, no por lo bien o mal que pudiera estar esta nueva caracter?stica, sino porque muchos nos sent?amos frustados al no poder decidir la forma como quer?amos que nuestras im?genes se vieran. As? que a los pocos d?as Blogger deshabilit? el Lightbox con la promesa de mejorarlo.

Hoy desde Blogger Buzz han anunciado su re-lanzamiento, ahora con la posibilidad de habilitarlo o no desde el panel de control.

Si deseas activar o desactivar el Lightbox de Blogger s?lo tienes que entrar en Configuraci?n | Formato | Open images in Lightbox, y ah? seleccionar S?, o No.

Si usas la nueva interfaz entonces entra en Configuraci?n | Entradas y comentarios | Open images in Lightbox, y de igual manera selecciona la opci?n que deseas.

Ahora s?, tienes la libertad de elegir si quieres estas ventanas modales en tu blog, o no.

Carrusel de im?genes con Scriptaculous

Este es un carrusel de im?genes de Brian R. Miedlar que muestra las im?genes con un efecto de deslizamiento y regresa al inicio una vez llegado a la ?ltima imagen. Est? hecho con Scriptaculous as? que quienes usen jQuery ya saben que deber?n aplicar un hack para que ambos scripts funcionen.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de im?genes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edici?n HTML de tu plantilla y agrega antes de </head> esto:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

<script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el c?digo gris, pero el resto s?. Ah? coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.

.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las im?genes */
height:100px; /* Alto del contenedor de las im?genes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAaG-5zq4o3_Eop8qVgeqX3Xvh2SxKr8NeFRzmw85flGt1KyNdCZ8mSwsVaehdAlKaakX9JJ2CoQkUnd4y2FYTR8Izu93szVc7RgZTjQJy0eDqJ2YN8sv6pHrDVpaBoB_Gk3poMkyoVU/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAQvG6XwqU9fYYAGNUIRtp_MyP61ZNqUnYwMA6jH1dq7RPmzz4AvkEUjEn4srsf6lxECi2rUwMmAHGs0QA8jFUEsmr-p2u_mpELG2TCXFYLUK2lw7syxzmWlcEGLC0saWef2lfhcZAlMw/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

Despu�s entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pega la estructura del carrusel:

<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Atr?s</div>
<div class="button navButton next" style="display:none;">Adelante</div>
<div class="container">
<div class="items">


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>



</div>
</div>
</div>

Ah? agrega las URLs de los enlaces y las URLs de las im?genes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo c?digo he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son im?genes as? que si quieres cambiarles su color o usar otras, tendr?s que cambiar las dos URLs que se encuentran en ese c?digo.

El tama?o.

El ancho del carrusel yo lo he puesto de 685px, as? que debajo de la cabecera podr?a quedar muy bien. Si quieres cambiar la longitud entonces tendr?s que cambiar el /* Ancho del contenedor */ (que es el tama?o de todo el carrusel), el /* Ancho del contenedor de las im?genes */ (que es el ?rea donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas m?s im?genes o si quitas algunas, tambi�n tendr?s que modificar el ancho total de las miniaturas, de lo contrario se mostrar?n algunas im?genes debajo de otras.

Para a?adir m?s im?genes agrega antes de los </div> en color azul un pedazo de c?digo como este:

<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

Para alinear el gadget s?lo cambia la distancia desde la izquierda (en color verde) por otro valor, uno m?s grande har? que se recorra hacia la derecha.

El carrusel muestra grupos de 5 im?genes en cada avance o retroceso, si deseas modificar este valor deber?s editar el archivo application.js y ah? dentro buscar esta parte:

setSize: 5,

Ese 5 es el n?mero de im?genes que se muestran en cada avance, s?lo c?mbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar as? que se recomienda alojar los scripts en la plantilla.

Y ahora s?, es todo.

jQuery: sus versiones y el conflicto entre ellas

Muchos conocen y usan jQuery, la librer?a de efectos de mayor uso por los fant?sticos plugins que ofrece. Quienes lo usan saben que no es compatible con algunas librer?as de efectos pero tambi�n c?mo solucionar esa incompatibilidad.

Sin embargo, algunas veces ponemos dos o m?s gadgets que usan jQuery y las cosas no resultan tan bien c?mo esper?bamos. La raz?n en la mayor?a de los casos es que cada vez que ponemos un gadget o un efecto agregamos jQuery de nuevo, as? que la plantilla se va llenando de varias versiones de jQuery y aqu? es donde se genera el conflicto y las cosas no funcionan.

?Qu� hacer? Primero que nada procurar tener siempre la ?ltima versi?n de jQuery, al d?a de hoy 1 de mayo de 2014 la versi?n m?s actual es la 2.1.0, pero para que puedas estar al tanto de cu?l es la ?ltima versi?n visita el cat?logo de librer?as de Google API, ah? ver?s la ?ltima versi?n estable de jQuery y la URL del script.

?C?mo lo ponemos? Siempre antes de </head> o despu�s de <head> una l?nea as?:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'/>

Lo segundo es, ya puesta la ?ltima versi?n de jQuery procedemos a buscar las versiones antiguas y eliminarlas una por una. Para hacerlo m?s f?cil usa las teclas CTRL + F y usa el t�rmino jquery/ para encontrarlo. Deber? estar como la l?nea anterior aunque la URL no sea exactamente igual, esto es porque puede estar alojado en otro servidor.

Una vez que localices una versi?n anterior, por ejemplo la 2.1.0, elim?nala, guarda los cambios y revisa que todo lo que requiera jQuery siga funcionando, si todo est? bien regresa a buscar m?s versiones antiguas (o repetidas) y elim?nalas.

Tenemos que hacerlo una por una y cada vez que lo hagamos revisar que todo funcione, esto es porque algunos plugins funcionan s?lo con determinada versi?n de jQuery, as? que es probable que alg?n gadget o efecto pueda funcionar unicamente con una versi?n antigua. En esos casos lo ideal es buscar un gadget similar que s? funcione con la ?ltima versi?n para evitar depender de un script anticuado.

Habiendo eliminado las versiones repetidas, o antiguas de jQuery tendr?s un blog que no s?lo cargar? un poco m?s r?pido sino que evitar?s conflictos entre las diferentes versiones de jQuery.

As? que cada vez que uses algo que necesita jQuery, no necesitas agregar el script de nuevo, si ya lo tienes continua con los dem?s pasos, y sino funciona entones es probable que ese "algo" que has agregado s?lo funcione con una versi?n en particular.