dicashot
Gata da vez
(+18)
DicasHot
HBO MOVIES ONLINE
TV
dicashot
Cartoon Network PT
TV
dicashot
ANI ROCHA NO FUNK
DANÇANDO MUITO



Nuvens Flutuando no Cabeçalho do Blogger


Nesta postagem venho mostrar aqui vocês este tutorial ali do site Templates e Acessórios da qual eu achei bem interessante compartilhar aqui com vocês. Está na cara que o código é bem elegante sem falar que também deixa o template bem criativo.


Para colocar o efeito no seu blog... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
</head>
Tendo encontrado a tag, cole ACIMA dela o seguinte código
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<div id='wrapper'>
<div id='content'>
<div id='cloud1'><img src='http://1.bp.blogspot.com/-ZKsR0GfOmKs/UaPuLYI8ASI/AAAAAAAAEFI/1egED6vV078/s1600/nuvem+2.png'/></div>
<div id='cloud2'><img src='http://3.bp.blogspot.com/-rRjpxto0R7k/UaPtzfXHijI/AAAAAAAAEFA/twU2aj0fS2Q/s1600/nuvem+1.png'/></div>
<div id='cloud3'><img src='http://1.bp.blogspot.com/-ZKsR0GfOmKs/UaPuLYI8ASI/AAAAAAAAEFI/1egED6vV078/s1600/nuvem+2.png'/></div>
<div id='cloud4'><img src='http://3.bp.blogspot.com/-rRjpxto0R7k/UaPtzfXHijI/AAAAAAAAEFA/twU2aj0fS2Q/s1600/nuvem+1.png'/></div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
setTimeout(&quot;animation()&quot;,300);
});
function animation(){
cloud1();
cloud2();
cloud3();
cloud4();
}
function cloud1(){
$(&quot;#cloud1&quot;).animate({left:&quot;+=80%&quot;},50000).animate({left:&quot;-0px&quot;}, 0)
setTimeout(&quot;cloud1()&quot;,30000);
}
function cloud2(){
$(&quot;#cloud2&quot;).animate({left:&quot;+=70%&quot;},40000).animate({left:&quot;-0px&quot;}, 0)
setTimeout(&quot;cloud2()&quot;,20000);
}
function cloud3(){
$(&quot;#cloud3&quot;).animate({left:&quot;+=70%&quot;},60000).animate({left:&quot;-0px&quot;}, 0)
setTimeout(&quot;cloud3()&quot;,20000);
}
function cloud4(){
$(&quot;#cloud4&quot;).animate({left:&quot;+=70%&quot;},75000).animate({left:&quot;-0px&quot;}, 0)
setTimeout(&quot;cloud4()&quot;,75000);
}
</script>
Agora, procure pela tag 
]]></b:skin>
Tendo encontrado o código, ACIMA dele cole o seguinte código
/*Nuvens Flutuando no cabeçalho do blogger-------------------------------*/
#cloud1{ position:absolute; top:2px; left: 0px; z-index:10; }
#cloud2{ position:absolute; top:80px; left: 0px; z-index:10; }
#cloud3{ position:absolute; top:150px; left: 0px; z-index:10; }
#cloud4{ position:absolute; top:220px; left: 0px; z-index:10; }
Agora, basta salvar e pronto!!!

Cursos On line com Certificado
Nuvens Flutuando no Cabeçalho do Blogger Nuvens Flutuando no Cabeçalho do Blogger Reviewed by Muca on 10/23/2013 07:29:00 AM Rating: 5