Efecto humo en el cursor

Para los cursores ya habíamos visto algunos tutoriales para darles efectos(estrellas que caen, burbujas que suben y explosión de estrellas).

Hoy vamos a ver otro efecto, ideal para blogs de cocina, de cafés o de estilo dark, que podemos agregarle a nuestro cursor. Se trata de un efecto que hace que cuando hacemos clic en cualquier parte de nuestro blog salga humo del cursor.

( ↪ Ver DEMO)

Para agregar el efecto sigue estos sencillos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, en la casilla search buscaremos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type="text/javascript">
//Efecto humo en el cursor
// <![CDATA[
var smokeyness=100; // cantidad de humo
var density=40; // densidad del humo
var swide=800;
var shigh=600;
var toke=new Array();
var tokex=new Array();
var tokedx=new Array();
var tokey=new Array();
var nicotine=new Array();
var mousedown=false;
var x=400;
var y=300;
var sleft=sdown=0;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(puff);

function puff() { if (document.getElementById) {
var i, fag;
for (i=0; i<smokeyness; i++) {
fag=document.createElement("div");
toke[i]=fag.style;
toke[i].position="absolute";
toke[i].backgroundColor="transparent";
toke[i].font="bold "+density+"px Tahoma, Geneva, sans-serif";
toke[i].color="rgba(234,234,234,0.033)";
toke[i].zIndex="9999";
toke[i].pointerEvents="none";
toke[i].visibility="hidden";
fag.appendChild(document.createTextNode(String.fromCharCode('0x25CF')));

document.body.appendChild(fag);
tokey[i]=false;
}
set_scroll();
set_width();
setInterval(drag, 50);
}}

function drag() {
var c;
if (mousedown) for (c=0; c<smokeyness; c++) if (tokey[c]===false) {
toke[c].left=(tokex[c]=x-density/2)+"px";
toke[c].top=(tokey[c]=y-density)+"px";
toke[c].visibility="visible";
tokedx[c]=(c%2?1.5:-1.5)*Math.random();
nicotine[c]=80;
break;
}
for (c=0; c<smokeyness; c++) if (tokey[c]!==false) smoke_rising(c);
}


document.onmousedown=function(){set_scroll();if(ie_version)setTimeout('mousedown=true', 51);else mousedown=true;};
document.onmouseup=function(){mousedown=false};

function smoke_rising(i) {
var cancer;
tokey[i]-=4+i%3;
tokex[i]+=tokedx[i]-0.5+Math.random();
if (tokey[i]>sdown-density*2 && tokex[i]>sleft && tokex[i]<sleft+swide-density && (nicotine[i]+=2)<256) {
cancer=nicotine[i].toString(16);
cancer="#"+cancer+cancer+cancer;
if (ie_version && ie_version<10) toke[i].filter="Glow(Color="+cancer+",Strength="+Math.floor(nicotine[i]/5)+")";
else if (ie_version) toke[i].textShadow='#000000 0px 0px '+Math.floor(nicotine[i]/5)+'px';
else toke[i].textShadow=cancer+' 0px 0px '+Math.floor(nicotine[i]/5)+'px';
toke[i].top=tokey[i]+"px";
toke[i].left=tokex[i]+"px";
}
else {
toke[i].visibility="hidden";
tokey[i]=false;
}
}

document.onmousemove=mouse;
function mouse(e) {
if (e) {
y=e.pageY;
x=e.pageX;
}
else {
set_scroll();
y=event.y+sdown;
x=event.x+sleft;
}
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (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;
}
}
// ]]>
</script>

3.§ Si queremos, podemos cambiar la cantidad y la densidad del humo.

4.§ Damos clic a guardar y listo.

Título de tu blog en movimiento

Hoy veremos cómo agregarle movimiento o desplazamiento al título de nuestro blog. Este efecto de movimiento se verá en tres zonas: la barra de título de la página, la pestaña del navegador y abajo en la pestaña de la barra de herramientas.

( ↪ Ver DEMO)

Agregar este efecto es bastante sencillo, sólo necesitamos agregar este script a la plantilla de nuestro blog siguiendo estos pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta <head>.

3.§ Debajo de <head> pegaremos el siguiente script:

<script>
//<![CDATA[
var txt="Aquí-Título-de-tu-blog-o-texto";
var espera=95;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
//]]>
</script>

4.§ Reemplazamos o destacado en cursiva por el título de nuestro blog u otro texto y damos clic en Guardar plantilla.

Botón para agrandar o achicar el tamaño de letra del blog con jQuery

En un post anterior habíamos visto cómo agregar los botones para agrandar o achicar los textos usando un script muy sencillo. Hoy haremos algo similar, pero usando la librería jQuery, que le dará un efecto deslizante al momento de pasar de un tamaño de fuente a otro.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

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

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'agrandar') {
finalNum *= 1.1;
}
else if (this.id == 'achicar'){
finalNum /=1.1;
}
else if (this.id == 'normal'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

6.§ Damos click a guardar.

7.§ Ahora, vamos a Diseño - Añadir un gadget y escogemos HTML/Javascript. En el nuevo elemento pegaremos el siguiente código:

<input id="agrandar" title="Agrandar texto" type="button" value="T+" />
<input id="normal" title="Texto normal" type="button" value="T" />
<input id="achicar" title="Achicar texto" type="button" value="T-" />

8.§ Damos clic a guardar.

PASO OPCIONAL

Este es un paso alternativo, para agregar estilo a los botones, como borde, cambiar el color del botón y de la fuente, etc.

1.§ Nuevamente vamos a Plantilla - Editar HTML. Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta ]]></b:skin> y antes de éste, pegamos los siguientes estilos CSS:

#agrandar, #normal, #achicar{
width: 35px;
height: 35px;
color: #fff;
font-weight: bold;
background: #e2e2e2;
border: 2px solid #fc98bb;
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
cursor: pointer;
}

Podemos modificar los estilos a nuestro gusto o incluso separar un estilo distinto para cada botón.

Efecto clic explosión de estrellas en el cursor

En tutoriales anteriores habíamos visto dos efectos diferentes para nuestro cursor: el efecto de burbujas que subían y el efecto de estrellas que caían al mover el cursor en nuestro blog.

Hoy vamos a ver otro efecto más para el cursor de nuestro blog. Se trata de un efecto de explosión de estrellas de colores. Este efecto funciona al dar clic en cualquiera parte de nuestro blog (por ejemplo, al momento de seleccionar algo).

Al momento de dar clic se producirá el efecto de explosión de varias estrellas de colores.

( ↪ Ver DEMO)

Para agregar este efecto, seguimos estos sencillos pasos:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>
//Cursor explosion estrellas
// <![CDATA[
var sparks=75;
var speed=33;
var bangs=5;
var colours=new Array('#0033ff', '#ff0033', '#00ee00', '#9933ff', '#00ccff', '#ff9933', '#ff00cc');
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {
var i, j;
window.onscroll=set_scroll;
window.onresize=set_width;
document.onclick=eksplode;
set_width();
set_scroll();
for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
stars[j]=createDiv('*', 13);
document.body.appendChild(stars[j]);
}
}}

function createDiv(char, size) {
var div, sty;
div=document.createElement('div');
sty=div.style;
sty.font=size+'px monospace';
sty.position='absolute';
sty.backgroundColor='transparent';
sty.visibility='hidden';
sty.zIndex='101';
div.appendChild(document.createTextNode(char));
return (div);
}

function bang(N) {
var i, Z, A=0;
for (i=sparks*N; i<sparks*(N+1); i++) {
if (decay[i]) {
Z=stars[i].style;
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity[N]);
if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
else {
Z.left=Xpos[i]+'px';
Z.top=Ypos[i]+'px';
}
if (decay[i]==15) Z.fontSize='7px';
else if (decay[i]==7) Z.fontSize='2px';
else if (decay[i]==1) Z.visibility='hidden';
decay[i]--;
}
else A++;
}
if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}

function eksplode(e) {
var x, y, i, M, Z, N;
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
N=++count%bangs;
M=Math.floor(Math.random()*3*colours.length);
intensity[N]=5+Math.random()*4;
for (i=N*sparks; i<(N+1)*sparks; i++) {
Xpos[i]=x;
Ypos[i]=y-5;
dY[i]=(Math.random()-0.5)*intensity[N];
dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
decay[i]=16+Math.floor(Math.random()*16);
Z=stars[i].style;
if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
else if (M<2*colours.length) Z.color=colours[count%colours.length];
else Z.color=colours[i%colours.length];
Z.fontSize='13px';
Z.visibility='visible';
}
clearTimeout(timers[N]);
bang(N);
}

function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min-7;
shigh=sh_min-7;
}

function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (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;
}
}
// ]]>
</script>

3.§ Si dejamos el código tal como está, las estrellas cambiarán de color cada vez que demos clic; si queremos que las estrellas sean de un color único, cambiamos lo resaltado en negrita por el color de nuestra preferencia

4.§ Damos clic a guardar y listo.

Ver demo

Meny, un menú deslizante que voltea al blog en 3D

Meny es un menú tridimencional bastante peculiar y llamativo, no sólo por la forma como muestra los enlaces, sino por la forma como "pone" al blog. Lo que hace este menú es que al pasar el cursor para mostrarlo, se desliza el contenido del menú mientras voltea al blog con un efecto 3D.

La mejor forma de entenderlo es viendo el demo en este blog de pruebas, sólo pasa el cursor por la flecha para ver este menú en funcionamiento.

El script es de Hakim El Hattab y para suerte de muchos no usa ni jQuery ni Scriptaculous, así que en la mayoría de los casos no debería haber problemas de compatibilidad.

Implementar este menú que voltea la página en 3D es bastante sencillo, sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega los estilos:

/* Meny Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #eee; /* Color de fondo del menú */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 24px; /* Tamaño del título del menú */
color:#fff; /* Color del título del menú */
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; /* Color de la flecha */
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; /* Color de la flecha */
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; /* Color de la flecha */
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; /* Color de la flecha */
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Luego busca la etiqueta <body> o esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de las dos agrega lo siguiente:

<div class='meny'>
<h4>Menú</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>

Por último añade antes de </body> este código:

</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* MIT licensed
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left";
var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style;
var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null};
var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g();
v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0";
x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%";
j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"};
O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )";
V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"};
break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )";
n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position);
e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div");
e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0;
e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
}catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style;
switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0";
W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j;
W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style;
if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;
}else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L);
Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b);
}}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible";
if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500);
y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false;
Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S;
e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden";
});}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I();
}else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight;
if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault();
}}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width);
if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u();
return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true;
}}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f;
},addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={};
for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""};
}var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60);
}else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"];
for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/\s+$/gi,"")+" "+a;
},removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b);
}},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2);
d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop();
});return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}


var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}

//]]>
</script>

Cambia las URLs de los enlaces y los nombres de los mismos donde se indica en color rojo. Luego guarda los cambios y listo.

Si quisieras agregar más enlaces sólo pon antes de </ul> una línea como esta por cada enlace extra que desees:

<li><a href='URL del enlace'>Texto del enlace</a></li>

Adicionalmente puedes cambiar la orientación de la página cuando se voltea, puede ser a la izquierda como está por defecto, a la derecha, arriba o abajo. Eso se modifica donde dice left en el último código y podrás cambiarlo por right, top, o bottom

Si tuvieras mucho contenido a lo largo entonces se verá mejor si lo cambias por top o bottom, aunque también cambiará la orientación del menú.

Nieve cayendo en el blog

Quedan muy pocos días para Navidad y en el tutorial de hoy, veremos cómo agregar un efecto de copos de nieve que caen en nuestro blog.

( ↪ Ver DEMO)

1.§ Vamos a Diseño - Añadir un gadget y elegimos HTML/Javascript.

2.§ Pegaremos el siguiente script:

<script type='text/javascript'>
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWx6fqGZPNJA8JIlNW27DhjmeyYDJwROsaCHc0Xvdz_GQwZXPntlqFQM1XTwPBeTP0A9L3aZGcUNyjHfKp5yaJ44qClfnPVYNCxnwNOTpnME58PKkavVmEs9aRukGQDq2AW3JIXnFKkpw/s400/nieve2_jessi_diyva.png",22,22);
newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgbONR334ETp3aJzBz06O1u081uZJVZ-n8fIattDNVRNbw0Are7NXKCtGKZ54wD3U_LVIpF_XOQmR8_1TPwGf5HTHpE1hzeaiqfIbdwZyCJLSKFOEdvX1Nx3DI1TQnmvohBOTJJ08Eh9K/s400/nieve1_jessi_diyva.png",22,22);

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.

Nieve en el fondo del blog sólo con CSS

Hemos visto algunas maneras de poner nieve en el blog, ésta en particular me parece atractiva dado que no necesitamos usar scripts, sólo CSS y tres pequeñas imágenes. La idea es de Joshua Johnson y puedes ver el demo en este blog de pruebas.

Una ventaja de éste método es que al no utilizar scripts no sobrecargamos el blog, la desventaja es que usuarios con navegadores no modernos no podrán verlo (en Internet Explorer funciona de la versión 10 para arriba).

La nieve caerá en el fondo del blog, no encima de él, lo cual además de evitar que se obstruyan enlaces y contenido (porque los copos son imágenes), evitará también que se obstruya la visibilidad del contenido del blog.

Para poner esta nieve en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de
]]></b:skin> pega esto:

/* Nieve en el fondo del blog
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#contenedor-nieve {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KZ0yd9WAxnYHg-W03smSAnpdAmPq8WL2fl709QckR23BEC7J6VyKXxqsgc7tT64x8x6G2DYD59DKusWwamr7KdIZTaX99-P1M_t-byQLg-WecfTFTwNh1ZnVdCXF5VBaBEkJn-eeoQo/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEs_6FCK1eInxwPis8kaF_QbcZjUGy-WDrMIGQqbF4YGG1VVrzH2eKuMEzSx5MHbxK0UPPxlDmhGs8zGn4o0J1NVJalVdT7wAihChex9M2FH11S_XD6Nqqkfe_5VopzCn1psvA-XX3UTk/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HK4SiD7BQaFztnfOwRq9BPe42VYYIEV3AtcoOQzmmcMtnIQGKoLk3hI7mydfVJ4NEpGs1BnZm_t4jsoz_MX24WG8EDCQTDpvZgg7AfzYEZ0qiI2K_VUsjGuF62KXr_8lcvmmGeNxYJE/s300/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

Ahora busca la etiqueta <body> o esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y debajo de cualquiera de las dos agrega esto:

<div id='contenedor-nieve'>

Por último busca la etiqueta </body> y arriba de ella agrega:

</div>

Guarda los cambios y listo.

Como puedes apreciar es un método sencillo, fácil de instalar, no obstruye el contenido del blog, y lo mejor es que no tiene nada de scripts, sólo bondades del CSS y nada más.

Si prefieres un método que no sea en el fondo del blog sino encima de él, y que funcione en todos los navegadores entonces estas dos opciones podrán servirte:
Nieve en el blog que se acumula al final de la página
Nieve en el blog

Page Peel, efecto de página doblada con jQuery

Page Peel es ese popular efecto de página doblada que al pasar el cursor de despliega para mostrar "lo que que hay atrás", como si se tratase de un libro.
Hay muchas formas de hacerlo, muchas de ellas usan archivos flash lo que lo hace menos personalizable, la que veremos en esta entrada es una versión de Soh TanakaEl sitio del autor ya no existe, hecha con jQuery.

Regularmente el contenido que hay "detrás" es una imagen de suscripción al feed pero puedes poner cualquier imagen y que enlace a cualquier página, la que tú elijas.

Puedes ver un ejemplo en este blog de pruebas, en la esquina superior derecha verás un doblez, al pasar el cursor encima se mostrará el contenido que hay debajo.

Para poner este efecto de página doblada en el blog entra en la Edición de HTML y antes de </head> pega el script:

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

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

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

/* Página doblada
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Cambiar a 30px si tienes la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXIoE0G5vozAVPJ2PTzchwHoOCK5TKz4Tk9pTOlmM3xkpxASSGF-y5BBLMudPj7WQ2YQoDRCQluBSPkcFL3lucg8z8WGr9S2cg0ny-uDYJ7F5KlG-40cb3mwa6sfbSi1I2WYWcCxJXYU0/s0/pagina-detras.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

Por último pega después de <body> o de:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Lo siguiente:

<div id='pageflip'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5WsWXU_AwydWgauecwwihnWuQ0tt93G1z3eaH156kEP08EuoLqmL_sPB9KvVcaDtzUdoa8UenHl7GsbMO9Xl1gVXJD7w5p_Ye9i0uAzc6ogWQV2KmkY5c8DuZ_oVqodtVMi0YucHCJU/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

En color azul verás una URL, esa es la URL de la imagen que en este caso es una invitación a sucribirse al feed, puedes cambiarla por otra (del mismo tamaño) si lo deseas.
En color rojo verás dónde debes poner el nombre de tu blog, ese será el enlace al feed de tu blog cuando el usuario dé click en la imagen posterior, pero puedes poner cualquier URL en caso de que quieras que enlace a otra página.

Recuerda que usa jQuery, así que deberás tener sólo una versión del mismo, y si usas Scriptaculous o Mootools deberás aplicar unos cambios.

Efecto de desvanecimiento al cargar las páginas del blog

Un efecto muy habitual en jQuery es el efecto fade que es un efecto de desvanecimiento, y podemos usarlo de tantas maneras como por ejemplo en la navegación del blog. El siguiente script hace justamente eso, carga la página con un efecto de desvanecimiento cuando navegamos en los enlaces internos que hay en el blog, como por ejemplo los títulos de las entradas, los enlaces de las etiquetas, los enlaces de navegación, archivo, etc.

Puedes ver un ejemplo en este blog de pruebas, haz click en el título de alguna entrada y verás el efecto de desvanecimiento al cargar la página.

Para poner este efecto de desvanecimiento en tu blog agrega después de <head> el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #f2f2f2; /* Color del desvanecimiento */
}
</style>

Guarda los cambios y listo. En color verde puedes ver dónde cambiar el color con el que se desvanece la página al cargar.

El script original oculta el body de la página mientras carga, yo he preferido cambiar esa propiedad por un z-index negativo para evitar problemas con los robots de los buscadores y que esto pueda efectar el posicionamiento.

¿Problemas?

Hay que considerar que este tipo de efectos podría reatrasar el tiempo de carga del blog, así que se recomendaría su uso sólo cuando el blog es rápido en cargar y no tiene tantos scripts.

Si ya usas otra versión de jQuery elimina las demás y deja sólo esta que es la que se leerá primero.

Si usas Mootools o Scriptaculous tendrás que hacerle unas modificaciones al código para que puedan ser compatibles.

Si tuvieras otro script con un efecto de desvanecimiento podría interferir con este y hacer que no se vea nada en la página excepto el color del desvanecimiento, en esos casos también es mejor prescindir de este script.

También puedes usar este efecto sólo en algunos enlaces, por ejemplo, si quieres que se aplique al hacer click en los títulos de las entradas, en los enlaces de navegación (entradas antiguas y entradas recientes), y en el gadget de Páginas, entonces cambia esta línea:

$("a").click(function(event){

Por esta:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

En algunos casos podrá cargar la página por un segundo y luego cargarla con el efecto de desvanecimiento, esto puede ser "normal" debido a que el navegador está tardando en leer el script al cargar la página.

Fuera de estos inconvenientes me parece que es una forma muy elegante de cargar las páginas del blog mientras navegamos por ellas, ¿no creen?

Vía | CGnauta

Imágenes estilo vintage en el blog, sólo con CSS

Instagram ha hecho que muchos tomen el gusto por las fotos estilo vintage, así que es muy común ver por todas partes este tipo de fotos que dan un aspecto de ser algo viejas.

Si no quieres usar un programa para tener tus fotos tipo vintage, puedes usar CSS y obtener un resultado similar. En sí lo que haremos será aplicarle una sombra difuminada al interior de la imagen, le añadiremos un borde, le pondremos un color encima (que será la que le dará ese efecto tipo Instagram), y encima de la imagen otra imagen semitransparente estilo grunge que le dará el toque viejo.

Puedes ver el ejemplo en esta imagen de abajo, al pasar el cursor cambia a su estado normal aunque conserva el borde.

Obviamente habrá imágenes a las que les quede mejor este tipo de efectos que a otras, pero independientemente de eso sí hay que hacer unas observaciones:

1. Está hecho con estilos CSS así que como ya sabemos habrá navegadores que no los reconocerá, específicamente Internet Explorer, así que en ese navegador no se verá ningún efecto.
2. Al pasar el cursor por la imagen cambia con un efecto de transición, pero éste sólo se ve en Firefox.
3. Las imágenes no estarán centradas, podrás alinearlas a la izquierda (por defecto), o a la derecha.

Habiendo aclarado lo anterior empecemos. Lo primero es entrar en la Edición de HTML y pegar antes de ]]></b:skin> los estilos:

/* Imágenes Vintage
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Cambiar por right si quieres que las imágenes se alineen a la derecha */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* rojo */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNIjQ61uQIDK54ziY1YYDE6A6jlYTx9SIpob147qgkvHnQJhBJtuQH3cmVm4vwFO-iZnbcE4daYZE5ogXQHNCL06RGAnh-699zMIzwPkPW8_n9JdzgKFQ-Uz6huNqI5O4pO2G6oqGxf0Q/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Por último usa este código en tus entradas o donde quieras mostrar la imagen:

<div class="vintage">
<img border="0" src="URL de la imagen" /></div>
<div style="clear: both;"/>

Agrega la URL de la imagen donde se indica y listo.
Si quisieras que el texto de la entrada rodee la imagen entonces elimina la etiqueta en color azul.
En el primer código verás en negrita la línea que corresponde al color de la imagen, puedes modificarla por algún otro color, estos son algunos ejemplos de lo tradicional en vintage:

background-color: rgba(0,0,255, 0.5); /* azul */
background-color: rgba(0,255,255, 0.5); /* aqua */
background-color: rgba(0,255,0, 0.5); /* verde */
background-color: rgba(255,0,240, 0.5); /* violeta */
background-color: rgba(255,102,0, 0.6); /* sepia */
background-color: rgba(0,0,0, 0.6); /* colores más oscuros */

Si quisieras que la imagen permanezca siempre así sin que regrese a su estado original al pasar el cursor entonces elimina esta perte del primer código:

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

Y eso es todo, con este pequeño experimento podrás tener tus imágenes al estilo vintage usando sólo CSS.

Slideshow de imágenes como fondo del blog

En la entrada anterior vimos cómo hacer que la imagen de fondo del blog cubra toda la pantalla sin importar la resolución del monitor. El método que usamos con jQuery es un plugin llamado BackStretch el cual también tiene la opción de crear un slideshow de imágenes como fondo del blog sin perder la cualidad de ajustarse al ancho y alto de la pantalla.

Lo que haremos en esta en estrada es justamente eso, que el fondo del blog tenga imágenes que vayan cambiando, todas con un efecto de desvanecimiento entre cada transición.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este slideshow de imágenes en el fondo del blog entra en la Edición HTML de la plantilla y antes de </head> agrega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

Ahí agrega las URLs de las imágenes que estarán como fondo del blog.

Si quisieras añadir más imágenes sólo agrega después de var images = [ otra línea como esta:

 "URL de la imagen",

Las imágenes irán pasando según el orden que las hayas puesto, si quisieras que éstas fueran al azar entonces cambia la segunda parte del código por este:

<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="URL de la imagen";
images[ 2 ]="URL de la imagen";
images[ 3 ]="URL de la imagen";
images[ 4 ]="URL de la imagen";
images[ 5 ]="URL de la imagen";

  Array.prototype.shuffle = function() {
  var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
  }
};

  images.shuffle();
  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

También puedes añadir más imágenes agregando una línea como esta:

images[ 6 ]="URL de la imagen";

Sin embargo verás que en este caso hay unos números consecutivos en color azul, por lo que si agregas otra será la 6, luego la 7, etc.

En ambos casos puedes modificar el tiempo que dura cada imagen en el 5000 que está al final del script.

La ventaja de este slideshow en el fondo del blog es que las imágenes se redimensionarán automáticamente al tamaño del monitor, así que en cualquier resolución se deberá ver bien.

No está de más recordar que si usas Scriptaculous deberás hacer unos cambios, y si ya usas jQuery deberás dejar sólo una versión.


Página del autor | BackStretch

Usar un archivo flash como fondo del blog

La otra vez vimos cómo poner un video de YouTube como fondo del blog, ahora veremos algo similar pero con un archivo SWF, es decir, veremos cómo poner un archivo flash (SWF) como fondo del blog.

Puedes ver un ejemplo en este blog de pruebas.

Los archivos flash (SWF) son esas animaciones que se crean con programas especiales para este tipo de archivos, aunque también hay programas que permiten convertir películas en estos formatos.

Por lo tanto, primero deberás tener un archivo en flash (entre más grande mejor) subido a tu alojamiento, aunque mientras puedes probar con el archivo que usé en el blog de pruebas.

El procedimiento en realidad es muy sencillo ya que es sólo un paso a seguir. Sólo ingresa a la Edición HTML de la plantilla, y localiza la etiqueta <body> o esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Justo debajo de cualquiera de ellas dos agrega este código:

<object height='100%' id='fondoflash' width='100%'>
<param name='movie' value='URL del archivo SWF'/>
<param name='scale' value='exactFit'/>
<param name='wmode' value='transparent'/>
<embed height='100%' scale='exactFit' src='URL del archivo SWF' type='application/x-shockwave-flash' width='100%' wmode='transparent'/>
</object>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#fondoflash {
height: 100%;
z-index:-9999;
position:fixed;
margin: 0 auto;
}
</style>

Pon la URL del archivo en formato .SWF donde se indica (dos veces) y listo.

Si quieres usar el archivo del blog de pruebas puedes descargarlo aquí y subirlo a tu alojamiento.

Este procedimiento está probado en Internet Explorer 9, Chrome 21.0, Firefox 14, Safari 6, y Opera 12, en todos funciona sin problema.

El archivo flash se adaptará al ancho y alto de la ventana del navegador, es decir, que ocupará el 100% del ancho y alto de la misma, por lo tanto no se recomienda usar animaciones que tengan medidas muy cuadradas (por ejemplo 600x600) sino mas bien rectangulares (por ejemplo 1200x720) para que no se distorsione tanto.

En Softonic puedes encontrar algunos programas para la creación de animaciones en flash.

Agregar un video de YouTube como fondo del blog

Me preguntan por Facebook cómo poner un video como fondo del blog, es decir, que en lugar de que sea un color o una imagen sea un video. Eso podemos hacerlo gracias al plugin Tubular de jQuery que permite usar un video de YouTube como fondo de una página web.

Aunque el resultado puede ser muy original y atractivo, debo decir que tiene tres inconvenientes: que no se puede silenciar, que si el video tiene anuncios éstos también se mostrarán, y que puede hacer muy lenta la carga del blog, así que si alguien quiere usarlo puede considerar ponerlo sólo en ocasiones especiales, o en blogs que carguen muy rápido.

También se puede hacer en HTML5, el problema es que con ese método se necesita cargar el video en 3 formatos distintos (.mp4, .webm y .ovg) además de una imagen para los navegadores que no lo soporten, así que con esta opción de YouTube me parece más práctica pese a los inconvenientes que tiene.

En este blog de pruebas puedes ver el demo funcionando.

El primer paso es poner justo después de <head> el script:

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

<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);

jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}

function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>

Luego localiza la etiqueta <body>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de ellas dos agrega lo siguiente:

<div id='wrapper-video'>

Luego antes de </body> coloca esta etiqueta de cierre:

</div>

Guarda los cambios y listo. En color rojo debes poner la ID del video de YouTube, la ID son los caracteres que aparecen al final de la URL:

Recuerda: No tiene opción de silenciar, así que si no quisieras que tenga sonido como en el demo del blog de pruebas tendrás que elegir un video que no tenga sonido. También se recomienda usar un video en HD para que no aparezcan partes negras alrededor del video.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deberás aplicar unos cambios a la segunda parte sel primer código que se agrega para que puedas usarlo.

Autor | jQuery Tubular

Cambiar color de selección de texto en el blog

Varias personas me han estado preguntando que cómo hago para poner un color de selección al texto de mi blog, como pueden ver en esta imagen:


Éso se puede hacer de una forma muy sencilla:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y justo antes de éste, pegaremos el siguiente código:

::-moz-selection { background: #ff0066; color: white; /* Firefox */ }
::-moz-selection { background: #ff0066; color: white; /* Opera */ }
::-moz-selection { background: #ff0066; color: white; /* Chrome */ }

Donde #ff0066 es el color de selección, que podemos cambiar por cualquier otro; white es el color del texto al momento de seleccionarlo.
Lamentablemente, el color de selección no funciona en IE.

Botones de Ir Arriba e Ir abajo con jQuery

Hace poco vimos cómo poner un botón de Ir arriba con jQuery, pues esto es parecido, pero no igual. Esto es porque los botones siempre están visibles a diferencia del otro, y sólo se desvanecen ligeramente cuando movemos el scroll de la página, pero además, también incluye la función de ir hasta abajo del blog.

Puedes ver un ejemplo en este blog de pruebas, los botones se encuentran en la parte inferior izquierda.

Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.

Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:

/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhRYl0l8C9A3QwENuQkdhelS6aRoXA8ogL_Yus2307qXOQx7iFOaMhbN4b_504rdyB3QB67KEPMf4gFLjYHTGYX2NeL5nVcUvdVAq5tZIcUAtLx99QmnHCQtJG_aaVh8ub5zt275nCDdY/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCh5mFtlu-r6jagp7fAyHBtkZ1AiaSMoFigfwgsLYqq-Ucan4sjb3DWIf_TkoP9tfFYF4KgIjOaSF0eAMfQVu2WIwiFlG3LlurOR2TYAVBZ26S2pAvwavX7kwjJJBr8x1N-6EDaaoj1U/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Luego antes de </body> pega este código:

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

<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Y listo, así se sencillo. En el primer código puedes ver en color verde algunos estilos que puedes modificar. Las flechas son imágenes, así que puedes cambiarlas por otras cambiando las URLs de las mismas que se encuentran también en el primer código. Si quieres cambiarlas del lado derecho ahí mismo verás qué valores debes modificar.

En el segundo código he puesto en color gris el script de jQuery, sólo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo.

Si usas Scriptaculous podrías aplicar el "parche", pero si no te quieres complicar la vida usa estos botones con Scriptaculous.

Vía | Codrops

Aumentar imágenes al pasar el cursor con efecto deslizante

Hay muchos métodos para expandir imágenes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto.

Puedes ver el demo aquí mismo pasando el cursor sobre esta imagen en miniatura:

Para lograr este efecto en tus imágenes ingresa a la Edición HTML y agrega antes de </head> el script:

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>

Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Agrega la URL de la imagen donde se indica y listo, así de fácil y sencillo.
La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color azul deberás poner el tamaño que tendrá la miniatura.

Nada complicado ¿verdad? ;)

"Apagar las luces" para ver videos

Este es uno de los scripts que más nos gustan a los que disfrutamos ver videos en la red, es un script de Janko y funciona con jQuery.

Se trata de "apagar las luces" para que todo lo que haya en la página se oscurezca menos el video, así no habrá otros elementos que nos distraigan mientras vemos el video y nos sentiremos como en el cine :)

Puedes ver un ejemplo aquí mismo, presionando el enlace que dice "Apagar las luces".
Cuando lo desees puedes presionar de nuevo el enlace y las luces se encenderán.

Apagar las luces

Para poner este efecto de "apagar las luces" en el blog, entra en la Edición HTML y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Prender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Después agrega antes de ]]></b:skin> los estilos:

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQVvegs61x3RwY5F7BwAA37X_eKoWGe-6cpBVC8VSRW3iwuhg9esI8pvyPyl4sTI2pGU0hR9Iha_d6o6taik3ngZbYAIneFX8VKMtn2MBo8TnWlCAncJZ2_IAHdv46jpB7Pe3kJ3h6Q1I/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAtMFHH5MiYzRu20VHrFQWeE5-zyEjTc0wIQ2sjqYxXUIQqegFMZJb23i14tnt6353uZQ3XYzs_RnNGU7VtBPdfzl-5mn3ro3-97DoC9lnjBnl4vXMy3aQglKIrAvV_O1GycCMKC-_k0/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Luego, antes de </body> agrega esto:

<div id='oscuridad'/>

Y por último, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este código:

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videoLuces">
...Aquí el código del video...
</div>
</center>

Agrega donde se indica el código de tu video y listo. A disfrutar los videos con las luces apagadas.

Recuerda que el truquillo usa jQuery, así que si usas Scriptaculous o Mootools deberás aplicar un parche, y si usas otra versión de jQuery deberás usar sólo una.