30 de abr de 2013

Vídeo com efeito apagar luz




Para quem usa vídeos com frequencia em seu blog, um bom efeito é este de "apagar luzes". Ao clicar, o vídeo fica em destaque, deixando o resto do blog em segundo plano e todo escuro, conforme puderam constatar na demonstração. Siga as dicas e instale este hack em seu blog.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Procure por </head>


Acima dele cole este próximo 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>


Agora procure por </body>


Acima dele cole este próximo código

<div id='oscuridad'/>


Salve.


Agora vamos dar estilo. Vá até o layot de seu blog.


Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 




Copie o código abaixo e cole no local indicado.




/* 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;
}


Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.




Salve. Agora clique em Layout...




Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código colando o código do vídeo no local indicado.



<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>
<div id="videoLuces">
COLE AQUI O CÓDIGO DO VÍDEO DO YOU TUBE
</div>
</center>

4 comentários:

  1. olá
    Elke!
    Este template
    está nos gratis seus?
    http://templaterevistajornal.blogspot.com.br/

    ResponderExcluir
  2. Olá amigo, teria como você fazer ou me passar um código do algo do tipo que essa parte de clicar para acender e pagar as luzes ficasse tipo um botão por favor?

    ResponderExcluir
  3. Tutorial maravilhoso, simples e super útil, obrigada! :D

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube