lunes, 17 de agosto de 2015

Efecto "Apagar las luces" para ver vídeos en blogger

Hoy presentaré un buen efecto y truco para nuestro blog en especial para aquellos que frecuentan el uso de vídeos, el efecto básicamente es un script que nos permite "apagar las luces" en otras palabras oscurecer el contenido de nuestro blog a la hora de ver un vídeo.


Que te pareces si vemos un DEMO del efecto haz clic en el botón de abajo:

http://bloggin-prueba.blogspot.com/2015/06/titulo-de-prueba-numero-2.html

 Para poner este efecto de " apagar las luces" haremos los siguientes pasos: 

- Vamos a la edición HTML de nuestro blog y buscamos la etiqueta </head> antes de ella pegamos lo siguiente: 
<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>
 - Luego buscamos lo siguiente ]]></b:skin> y antes de lo señalado pegamos lo siguiente:
/* 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.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
 - Ahora buscamos la etiqueta </body> y antes de ella pegamos esto:
<div id='oscuridad'/>
 - Y para culminar este breve efecto en tu blog, donde quieras poner tu vídeo peude ser entrada o página usaremos el siguiente código para que el efecto sea válido:
<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videoLuces">
...Pega aquí el código de tu vídeo...
</div>
</center>
Es todo para este tutorial espero les guste y sirva, hasta la próxima.

0 comentarios:

Publicar un comentario

SÍGUENOS EN: