Crescendo em Flor: Tutorial: Nuvens Flutuantes

Oi pessoal!

Agora, além do blog estar de cara nova, ele também possui nuvenzinhas flutuando no banner! E aí o que acharam?

Modéstia a parte, gostei bastante do resultado. Então resolvi postar um tutorial rápido e fácil aqui pra vocês, explicando alguns pontos. Vamos lá?

Primeiro de tudo, entre em Modelo/Editar HTML. Depois, clique em Expandir Modelos de Widgets (Se esta sua parte estiver como a minha, você vai ter que ir clicando nas setinhas pretas ao lado esquerdo em toda a extensão do html).

Após expandir, clique em CTRL + F e procure por </HEAD>

Faça o Download do código clicando abaixo:

Após o download, cole o código ABAIXO da tag </HEAD> e ACIMA de <BODY>.

Feito isso, cole o código a seguir ANTES do código que você acabou de colar:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

Depois de colar esse trecho, faça o download do Script abaixo e cole-o abaixo do pequeno que texto que você colou anteriormente. É ele que fará com que as nuvens fiquem na posição e se mecham com velocidades diferentes.

Agora vamos para a parte do Template!

Procure pela tag <BODY> e ABAIXO dela cole:

<div id="wrapper">
<div id="content">
<div id="cloud1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxbvzDCNhHAbnRlTFUqbrVw_0t-__00R4l8CvQQ7uYZD1fI7i9VV-49sshlImECOBAng8BprV_9wcM-JZdteLHofZUjGcb9WcXAUk9yumajaKEECXOopbZKxYItXKY3Q_Rq3-A-7jhjGM/s1600/cloud1+(1).png" /></div>
<div id="cloud2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8rNEl0Z6v9tHIJzhpLE4nQswd5MaR4j4whtbCT7fXMMcB2VwlMY38JTwSXIm0XI6flpIsRXW4BiLKiqpduyAdTXDwYwgjL2CwDJTrzkz3GeXCRzPkOf9QKUvkaZBbv1iGZWMgX_sm4_q/s1600/cloud2.png" /></div>
<div id="cloud3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1uoq7ynQ-9CzLQNLgxe_RqC1jQHEOOE-zD6iS2qwkS8eFyaOgmCetU032_aT2I6nPaCkdXeW0WQrSxBEBM5lqBOLxP0kbZhH-agbw5vbV-eIYv5_5yfoU8jKZ2CkraueIL4HecT_duWyZ/s1600/cloud3.png" /></div>
<div id="cloud4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxbvzDCNhHAbnRlTFUqbrVw_0t-__00R4l8CvQQ7uYZD1fI7i9VV-49sshlImECOBAng8BprV_9wcM-JZdteLHofZUjGcb9WcXAUk9yumajaKEECXOopbZKxYItXKY3Q_Rq3-A-7jhjGM/s1600/cloud1+(1).png" /></div>
</div>
</div>

O texto em roxinho é o endereço das imagens da nuvens. Você pode substituir por outro estilo de nuvem de sua preferência. Lembrando que elas devem estar sem fundo, portanto no formato .PNG

Depois que colar o texto, procure por </B:SKIN> e ANTES DELE cole o seguinte código:

#cloud1{ position:absolute; top:10px; left: 0px; z-index:-5; }
#cloud2{ position:absolute; top:200px; left: 0px; z-index:10; }
#cloud3{ position:absolute; top:320px; left: 0px; z-index:-5; }
#cloud4{ position:absolute; top:150px; left: 0px; z-index:10; }

Alterando esta parte em rosa, é possível alterar a "transparência" das nuvens, determinando assim qual delas irá passar por cima ou por baixo do seu banner.

Espero que tenham gostado!