Criando o efeito "Apagar a luz" para ver vídeos no Blogger

Este é um efeito super interessante e que poucas pessoas sabem fazer, recebi alguns comentários no nosso Formulário de Avaliação pedindo que fizemos um tutorial ensinando a como fazer isto.
Vejamos agora como fazer este efeito que diminui a luz ao redor de um vídeo e o deixa em destaque na página:

Vídeo exibido sem o efeito

Vídeo exibido com o efeito

Clique aqui e veja como isto funciona na prática 

Vejamos:

A Primeira coisa a fazer é um Backup de seu template. Caso o script não funcione no seu template, você pode voltar a ter seu template original.

Depois que você fez o Backup, abra o "Editar HTML" dê CTRL+F e procure por:</head> e cole antes dela o 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 a Luz").removeClass("turnedOff");
else
$(this).html("Acender as Luzes").addClass("turnedOff");
});
});
//]]>
</script>

Logo após colar o script, procure por: ]]></b:skin> e cole acima dela o CSS:

/* 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/AVvXsEjtWa2sRDafIDRVsPbiEvptc4Qgpx4stoyH-53bITOrAtKTJJFleQLvNT1lD8PEd0Rokswos8KeVhnple6NYbLLkgerZYKyq3_QCOO_KdWEVFfBqg3hL25-kLJ9vrdmmWvoyHRHFgYSXYA/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/AVvXsEhOOkN96eLDm973PIoxnd3C8lspHhtVvgX-dyl87ivaAisL-KJN4KqjsGYIdwbgSPbUrY1aeStsnbydB0NW2iJGME-IBHNO6Ri3qY8Rmrtx6pCiy3MsusbI-v_Q9E7WVWJDikPoLGkzv9U/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidade da Tela */
filter:alpha(opacity=90); /* Opacidade da tela */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Antes da tag </body> cole o seguinte código:

<div id='oscuridad'/>

Visualize seu template, se estiver tudo OK salve!

Agora toda vez que você publicar um vídeo em seus artigos, adicione o seguinte código:

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
...Aqui cole o código do Vídeo...
</div>
</center>

E pronto!

Se este script não funcionar em seu template, pode ser que você tenha outros scripts em seu blog e isto pode acarretar conflitos. Verifique o artigo da Vanessa do Mundo Blogger para tentar resolver este problema:

• Por que alguns scripts não funcionam no meu blog?

Este script foi localizado no blog em espanhol: Cuidadblogger

Até Mais!