Lo Último

Efecto apagar las luces




El efecto "Apagar las luces" sucede al presionar el botón y oscurece toda la página excepto el video de YouTube, un efecto asombroso que permite al espectador concentrarse sólo en el vídeo.

En Blogger In te enseñamos cómo poner éste efecto en cualquier vídeo de YouTube que muestres en una entrada, en un gadget o en una página de tu espacio.

Permite al espectador oscurecer toda la página pudiendo volver al estado normal pulsando en "Encender las luces".


Para poner este efecto de "apagar las luces" en el blog, procede de la siguiente forma:

Ir a tu "Escritorio Blogger"
Pulsar en tu "Blog"
Pulsar en "Plantilla"
Pulsa en "Edición HTML"






Antes de la etiqueta </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("Encender 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(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/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(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidad de la pantalla */
filter:alpha(opacity=90); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
\----------------------------------------------------------------------------------------------------------/
En rojo los parámetros que podéis cambiar para dejarlo a vuestro gusto, color de fondo y nivel de transparencia.





Luego, antes de <body> ó <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> agrega esto:
/-----------------------------------\
<div id='oscuridad'/>
\-----------------------------------/
Una vez pegados todos los códigos, Pulsa en "Guardar plantilla"





Y por último, donde quieras poner tu video, ya sea en una entrada, página o en un gadget procede de la siguiente forma:

En un gadget:

Ir a tu "Escritorio Blogger"
Pulsar en tu "Blog"
Pulsar en "Diseño"
Pulsa en "HTML Javascript"

 En la caja de texto introduce éste 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>
\----------------------------------------------------------------------------------------------------------/
En rojo el espacio para añadir el código de insercción del vídeo de YouTube.

Finalmente pulsa en "Guardar" y en "Guardar disposición" si es en un gadget. Y si es en una entrada sólo tienes que guardar el trabajo como en cualquier otra entrada.

Y ya puedes ir a tu blog a ver como queda tu nuevo efecto. Si queréis ver un ejemplo de como queda podéis verlo en una de las entradas de BH Cine pulsando Aquí.

APUNTE IMPORTANTE: Si tienes una plantilla muy modificada es posible que el efecto no funcione, prueba y si no funciona revierte los pasos dados en éstas instrucciónes.

Esto es todo! espero que disfrutes del nuevo y estético efecto "Apagar las luces" en tu blog de Blogger!!



Para estar actualizado en las novedades de Blogger In puedes seguir el blog, para ello ve al gadget al final de este blog y pulsa en "Participar en éste sitio" y sigue el asistente hasta el final y comprueba que apareces en el gadget. Feliz semana amigos!!