Colocar nuvens flutuando no cabeçalho do Blogger

DEMO

Efeitos fofinhos que deixam o blog totalmente exclusivos são sempre bem-vindos, não é mesmo ? Vejam este efeito de nuvens passando pelo cabeçalho, e que na verdade, você poderá colocar por todo o blog.




Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Abaixo dele cole este próximo código.(se quiser modificar a imagem, mude os endereços que estão grifados com a cor rosa pelo endereço da nuvem de sua preferência.)

 <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/AVvXsEjXURFQodsXHp0l9t_KG5V1i5zLxvPvEpMZ_JFNgKMIHrd9FjbcgO8AaudVIaIIZfSxp4jo7RTJyLtdsiHy1QrL-OKNaYceVFdpq07e-T3ZWoU46xsU4yroONdJEDwF_z0y_pylNqEG3Eo/s1600/nuvem+2.png'/></div>
<div id='cloud2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GTCaOAJ-PzSG06M9MCuapr9uLAEx8vJZ2zwNy6qwXNpPnvaUBIkcw6ZKQzVX2e2QtxCPmYEuSavYJm1K1R1-rUWnFV0sbjCgh7Yk_eE6OMWydkIm-zw7I3k_S_4u7RoDPcaOSxw3Wc/s1600/nuvem+1.png'/></div>
<div id='cloud3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXURFQodsXHp0l9t_KG5V1i5zLxvPvEpMZ_JFNgKMIHrd9FjbcgO8AaudVIaIIZfSxp4jo7RTJyLtdsiHy1QrL-OKNaYceVFdpq07e-T3ZWoU46xsU4yroONdJEDwF_z0y_pylNqEG3Eo/s1600/nuvem+2.png'/></div>
<div id='cloud4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4GTCaOAJ-PzSG06M9MCuapr9uLAEx8vJZ2zwNy6qwXNpPnvaUBIkcw6ZKQzVX2e2QtxCPmYEuSavYJm1K1R1-rUWnFV0sbjCgh7Yk_eE6OMWydkIm-zw7I3k_S_4u7RoDPcaOSxw3Wc/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>

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado. (para separar as nuvens e mudar a posição, modifique os códigos grifados em azul)

/*Nuvens do cabeçalho-----------------------------------------------------------*/
#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; }

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Outras imagens de nuvens