Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.
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.
Para poner este efecto de "apagar las luces" en el blog, entra en la Edición HTML y antes de </head> pega el script:
Y por último, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este código:
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 :)
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.
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'/>Después agrega antes de ]]></b:skin> los estilos:
< 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>
/* Apagar las lucesLuego, antes de </body> agrega esto:
----------------------------------------------- */
#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/AVvXsEjNYTCgoM2KKzm448FG1DfBrQUDvcp3iD2nwXvhbIlefFYIvuaVK4cg3VBpTjRYjZen0ZAnWxvzkbOa8Jzg80gvKhICsh4f5HAbvG8SkqcA6X2WoneKha_MNK-gSIVy0NEHD_6bAJ0nxy0/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/AVvXsEiB97L58pMU5idZ3okeQTFQCLBvpd03q2r5fB_esuVht3T_r_7wxBZ4rhBakP-mRB9SOzVykgYGkDIspDmhXnczCRTxcCB3K17cCqEW_0uQhMEOTH11o8FhMesitdXRXNOnE8jhle63Qpw/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;
}
<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.
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.
Ahora examinamos en nuestro equipo la ubicación donde tenemos el video, agregamos un título, aceptamos los Términos y condiciones y presionamos Subir video.
