.

quarta-feira

Textual description of firstImageUrl

Nuvens Flutuando no Cabeçalho do Blogger

ACESSOS:
Deixe seu comentário


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

RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}