Carregando atualizações...

X

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HRdBXMRK4bSQP999vXg4b1kEQ3El0FZCFW5qWE8cNYIfmjNnXtYqIk4jDUhB91Fn8FiHPj2n2BDtbJFwyWlnBqCNmoyWTb50ewQ0sYRHEb1JvbsTreA8HzwBxe8dDWgUBhyvScFb6nc/s1600/nuvem+2.png'/></div>
<div id='cloud2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WtKujDiSOFQS8GX7huZXRgRU_kQjiSPst8esxnoIJpk0riIMvvGwY1YkJ34b_azBqR_02Wm96PedP5tc9w3VnnoFDLIpr8JLC0-l3BNwawVhTqRw2Ysk3uajYd1bG6ak2YtPiACMF1Q/s1600/nuvem+1.png'/></div>
<div id='cloud3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HRdBXMRK4bSQP999vXg4b1kEQ3El0FZCFW5qWE8cNYIfmjNnXtYqIk4jDUhB91Fn8FiHPj2n2BDtbJFwyWlnBqCNmoyWTb50ewQ0sYRHEb1JvbsTreA8HzwBxe8dDWgUBhyvScFb6nc/s1600/nuvem+2.png'/></div>
<div id='cloud4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WtKujDiSOFQS8GX7huZXRgRU_kQjiSPst8esxnoIJpk0riIMvvGwY1YkJ34b_azBqR_02Wm96PedP5tc9w3VnnoFDLIpr8JLC0-l3BNwawVhTqRw2Ysk3uajYd1bG6ak2YtPiACMF1Q/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

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0