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("animation()",300);
});
function animation(){
cloud1();
cloud2();
cloud3();
cloud4();
}
function cloud1(){
$("#cloud1").animate({left:"+=80%"},50000).animate({left:"-0px"}, 0)
setTimeout("cloud1()",30000);
}
function cloud2(){
$("#cloud2").animate({left:"+=70%"},40000).animate({left:"-0px"}, 0)
setTimeout("cloud2()",20000);
}
function cloud3(){
$("#cloud3").animate({left:"+=70%"},60000).animate({left:"-0px"}, 0)
setTimeout("cloud3()",20000);
}
function cloud4(){
$("#cloud4").animate({left:"+=70%"},75000).animate({left:"-0px"}, 0)
setTimeout("cloud4()",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!!!