Você já devem ter visto este efeito em outros blogs, inclusive aqui no PH. Geralmente é colocado quando se tem um post com vídeos e acima você vê um link "Apagar as luzes" clicando nele, faz com que a tela toda do seu PC fique escura e só é visualizada o vídeo. Pois bem. Irei passar o código pra vocês.
Modelo > editar Html > pesquise por:
</head>
e acima dele, cole 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 as Luzes").addClass("turnedOff");
});
});
//]]>
</script>
|
Ctrl+F ou
F3 e pesquise por:
</body>
acima dele, cole o seguinte código:
<div id='oscuridad'/>
Ctrl+F ou
F3 e pesquise por:
]]></b:skin>
e acima dele, cole o seguinte código:
/* 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.9; /* Opacidade da Tela */
filter:alpha(opacity=90); /* Opacidade da tela */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
VERMELHO: altere a imagem da lâmpada quando for para apagar as luzes
VERDE: altere a imagem da lâmpada quando for para acender as luzes
SE NÃO DEU NADA DE ERRADO, SALVE!
código final para as postagens: antes do vídeo na parte de Html cole o código:
<div id="apagador">
<a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
ou
<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
código do vídeo
</div>
</center>
VERMELHO: coloque o código do vídeo
Crédito: Meu blog de codigos.
Byee♥
