Buscar por: Imagem Passando, Passando, Para o Lado
<marquee direction="up" scrollamount="3" height="250px" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> <img src="LINKDAIMAGEMAQUI"> </marquee>
 |
| Vídeo exibido sem o efeito |
 |
| Vídeo exibido com o efeito |
Logo após colar o script, procure por: ]]></b:skin> e cole acima dela o CSS:
<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>
/* 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/AVvXsEip5P2EZblmlG0UqTCF_sEo_rSbyoisCPb9_BYmdxzS6xNQpGECYs4cC0Qh5oZi95XRl6xBxQ-E3pCjc2n1a_u56-8cIMNAaMrN-SprwJe8jgDbuzwk-6OulSGPki605fxz4YPxWqqXS-8/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/AVvXsEjMSfPWtkJvqrjg4AXcczRV_P_TOXaVaN2gHNkjNvkzjDCz-HGxY_DqzlJxrfGzfC0vZlBwwQOCbguTaNz7Wiqk0HgwRwONa19lBt_gW1x6GtzSF4h3eek58cPUGTUHpfqHXu20nhzZXL4/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;
}
<div id='oscuridad'/>Visualize seu template, se estiver tudo OK salve!
<center>E pronto!
<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>
#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}<div id="float_corner">
O que quer q flutue na tela…
</div>body {
background: url('http://LINK IMAGEM') no-repeat top left;
margin-top: -38px;
background: url('http://LINK IMAGEM') fixed no-repeat top left;background: url('http://LINK IMAGEM') fixed repeat top left;background: CÓDIGO COR url('http://LINK IMAGEM') fixed no-repeat top left;body {
background: #2952D0 url('http://a3.twimg.com/profile_background_images/42158797/wallpaper-xseven.jpg') fixed repeat top left;
}
<div style="float: left; width: 45%">Escreva aqui o Texto da Coluna da Esquerda</div><div style="float: right; width: 45%">Escreva aqui o Texto da Coluna da Direita</div><div style="clear: both"></div>
<div style="float:left;padding:2px;text-align:center">esquerda</div><div style="float:right;padding:2px;text-align:center">direita</div><div style="clear:both;padding:2px;text-align:center">meio</div>
<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />
