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
SE NÃO DEU NADA DE ERRADO, SALVE!
código final para as postagens:
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>
Nenhum comentário:
Postar um comentário
Olá! Obrigada pela sua visita e comentário♥