Apagar a Luz Para Assistir Vídeos No Blogger

Compartilho com vocês este tutorial bem interessante mostrando como você pode colocar em cada um dos videos do seu blog o botão "Apagar e acender a luz". Assim, quando as pessoas online no seu blog estiverem assistindo os videos que estão no seu blog, elas poderão com a maior facilidade apagar a luz para ficar melhor para assistir o vídeo. Bem legal, não é?

Ainda mais se você tiver um blog de filmes online, será bem interessante se você colocar esse detalhe, pois, além de melhorar o Design do seu blog, ainda favorece os que estão online no blog.

Veja uma demonstração do código no vídeo abaixo:

Apagar a luz

Para colocar em seu blog... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

/* Apagar a Luz
----------------------------------------------- */
#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/AVvXsEjRoA9k9UIxDXsW4ZtiN_tUGpsAeRXTX_CZG6AmxvS4aB4QG4rgIyO4354-XYBW7c7IJqcLrHh-a9dXQ11VCpDGHte3_xJRnUDSOBp1XC8AQ1msFrrlMpYztdoiJ0D2zKyKMZRrgz_Z7dQ/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/AVvXsEgYL760GHl0Q2B6i8j7_Idg9ILkUaqW2BjPP-mR3t-aGpo1L8nppnmGCn5vQxtAhyphenhyphen30OnSnHnYAZkH9PX-xDGa0lT9o3t1hnMYHRQ4CbTMU9OjEjNZlq8KJ85Ua2rYzK9XEOZLlBtc3JAM/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidade */
filter:alpha(opacity=70); /* Opacidade */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Agora, procure pela tag

</head>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

<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 a luz").addClass("turnedOff");
});
});
//]]>
</script>

Agora, procure pela tag

</body>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

<div id='oscuridad'/>

Pronto. Agora você pode salvar e fechar a parte de edição HTML.

Agora, para ativar o código, você só precisa entrar na postagem normalmente, mudar de modo escrever para modo HTML e colar o código

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar a luz</a></div>
<div id="videoLuces">
...Aqui vem o código do seu vídeo...
</div>
</center>