sábado, 22 de junho de 2013
Como colocar o efeito apagar luz no blog
Você já deve ter visto aqui no [A Escola Blogger], que os posts de vídeos tem um efeito super interessante que permite você escurecer todo o blog e deixar o vídeo em destaque, seri como apagar a luz do blog.
 |
| Click na imagem para ampliar |
 |
| Click na imagem para ampliar |
Vejam que a primeira imagem o vídeo está normal e na segunda imagem o vídeo está em destaque e todo o resto do blog fica escurecido.
1° Passo: Click em "Modelo", depois "Editar HTML"
2° Passo: De um click com o botão esquerdo do mouse dentro do corpo de códigos de seu blog e em seguida aperte as teclas: "Ctrl + F"
3° Passo: Pesquise por </HEAD> e cole antes de </head> 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>
<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>
4° Passo: Procure agora por: ]]></b:skin> e em seguida cole logo acima o código abaixo ▼
/* 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/AVvXsEjRYlRpQk9oOI6otIk0XLlfHPLehFEmPUNg-6RN6gPDxlydbl9rCt8xt0rEdKOHChtSU2U0WoVZYCcZo3XihQVTUlnFGUpn77CnFTYW5bzmDUFS2liTJHjC3bSZ8H2Pp-YdbZrMJuIJ77w/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/AVvXsEj6yNFk12RnzBSEZIXlPkRJGn32-iOtwK36TX8jyoilXJrWIWDPZDjXtTDtzmvwaeEnA6Foj8wn55IQtgR1Y1eSIuEOm_CWsJbHxghZMJv66AjDiBTGImih4Li3yHilOWVQnRoQ_qE3joo/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;
}
----------------------------------------------- */
#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/AVvXsEjRYlRpQk9oOI6otIk0XLlfHPLehFEmPUNg-6RN6gPDxlydbl9rCt8xt0rEdKOHChtSU2U0WoVZYCcZo3XihQVTUlnFGUpn77CnFTYW5bzmDUFS2liTJHjC3bSZ8H2Pp-YdbZrMJuIJ77w/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/AVvXsEj6yNFk12RnzBSEZIXlPkRJGn32-iOtwK36TX8jyoilXJrWIWDPZDjXtTDtzmvwaeEnA6Foj8wn55IQtgR1Y1eSIuEOm_CWsJbHxghZMJv66AjDiBTGImih4Li3yHilOWVQnRoQ_qE3joo/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;
}
5° Passo: Procure agora por: </body> e logo acima dele cole o código abaixo ▼
<div id='oscuridad'/>
Visualize e se estiver tudo ok salve
6° Passo: Agora toda vez que você for postar um vídeo em seu blog 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>
<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>
Onde está em vermelho é o local que você colocar o código HTML de seu vídeo.
Espero ter ajudado e até a próxima galera, abraços
Assinar:
Postar comentários (Atom)
Amigo, Você tah de parabéns, ótimo tutorial esse foi o único que funcionou em meu blog..muito obrigado mesmo, e já que estou aqui, eu gostaria de perguntar se você sabe algum código para ocultar a imagem destaque das postagens do blogger, como no wordpress que na página inicial aparece a imagem e quando abre a postagem ela some, ficarei muito grato se você poder mim ajudar blz....fico no aguardo ok...
ResponderExcluirVlw..
parabens muito bom vlw abraços
ResponderExcluirisso só funciona com vídeos?
ResponderExcluirEssa Opção de Apagar a luz Da conflito com slides ai vc tem q optar um ou outro
ResponderExcluirmuito o brigado, estou seguindo suas dicas, e esta me ajudando muito. valeu!
ResponderExcluiro codigo do passo 6 onde eu coloco.
ResponderExcluirfoi o melhor tutorial muito obrigado.estou grato olhem o trabalho que esse site fez
ResponderExcluirhttp://serieefilmesonlinehd.blogspot.com.br/2017/01/jack-reacher-sem-retorno-dublado.html