Preguntaras que es lo que este script hace? Este apaga la luz asi todo lo que esta alrededor del video quedara en oscuras evitando que te veas distraido por otros elementos en la pagina mientras disfrutas de tu video favorito.
Bueno para ver un ejemplo de lo que estoy hablando dale click al enlace o link "Apaga las Luces".
Como Añadir el efecto de Luces Apagadas a Blogger
Para poner este efecto de "luces" en el blog, sigue estos pasos:
Paso 1. Entra a tu Plantilla > Editar HTML
Paso 2. Da Click en cualquier area del codigo y busca la siguiente etiqueta ,utiliza las teclas CTRL + F :
</head>
Paso 3. Despues que lo encuentres, pega el siguiente script arriba de este:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#darkness").toggle();
if ($("#darkness").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>
Nota Importante:Si ya tienes instalado una version de jquery en tu Plantilla, entonces remueva la linea roja.
Paso 4. Ahora busca la siguiente etiqueta ]]></b:skin> (Da click en la flecha de la izquierda si fuese necesario (podria usarand despues de expandirse, usar las teclas CTRL + F )
Paso 5. Justo arriba de ]]></b:skin> , añade el siguiente estilo de CSS :
/* Apagado de Luces
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
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/AVvXsEjahGA5E6CIAIRE7lcNHFDPK_B_qOF9e7jGjYeS2SJyaogcfE0f9PFLy7jSL4Ul_HNAVdY8FQveLmX6KeJKmrV2Dwc0jwU7ngocZrVYpFXCgn88OsNCa_zi-HphUtd4kHilse95aED95QWt/s1600/lights-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/AVvXsEivQ-i997i2_Q2YNxyOnZtVSsSDmB1f0ThHCR_pmV0PI0YyLeZOgohnMCi04hsfD8WINVGKyd9UKqPJtBqwRnH-1Mn6ltlP8pD5IcCyOgI5YYb8SJKcuZQQyz51wIOjqyZ70dpu4CUmCApm/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
Paso 6. Busca la siguiente etiqueta </body> y añade el siguiente codigo de html arriba o antes de este:
<div id='darkness'/>Paso 7. Da Click en boton de Guardar Plantilla para guardar cambios.
Luego, cuando desees añadir un video, sea en una entrada o articulo o en un Gadget como HTML/Javascript , usa el siguiente codigo:
<center>Añade el codigo del video donde indica y Listo. Puedes ahora disfrutar de tus videos con las luces apagadas!
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Apagado de Luces</a></div>
<div id="lightsVideo">
...Aqui va el codigo del video...
</div>
</center>
Recuerda que este super truco utiliza jQuery, si tienes instalado Scriptaculous o Mootools debes aplicar un parcho , o si utilizas otras versiones de jQuery, debes usar una sola version.Que lo disfrutes.
0 comentarios:
Publicar un comentario