02/05/2012

Tutorial: Nuvens, pássaros e balões flutuando no cabeçalho do blog

Tumblr_l88nzgwhsi1qzzxppo1_500_large

Quem notou algumas mudançazinhas básicas aqui no lay do blog? o cursor de moustache (he's back!), o fundo do titulo colorido, alguns gadgets a mais eeeeeeeeee as nuvens fofas flutuando no cabeçalho do blog. Já tinha visto esse efeito no candylland e em um design antigo do Delicadíssima, mas pensei o seguinte: porque só nuvens? então resolvi criar alguns styles pra vocês. Lembrando que o tutorial original que eu peguei de base pra isso e o que eu usei no cabeçalho do blog é do delicadíssima! vamos lá? Todos os códigos que você precisará estão grifados de Amarelo, bem marca texto, pra facilitar na hora de mexer no layout. clique em leia mais para ver o tutorial!


Antes de tudo, salve o layout original para o caso de o resultado dar errado. Primeiro, vá ao Design/Editar HTML e clique na caixinha expandir modelos de widgets. Agora, Dê Ctrl+f e cole o código abaixo DEPOIS DE </HEAD> E ANTES DE <BODY>

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

Depois disso, de enter cole esse outro código ABAIXO:

Código aqui, clique copie e cole!                                                                lembrando que quem o fez foi a Gabi do delicadíssima!

Visualize se não modificou nada no seu layout. se não, salve. Agora, há outro script para instalar, que faz com que as nuvens/pássaros/balões/qualquer macumba que vc escolher antem em velocidades diferentes e fiquem no lugar certo (algumas por cima do cabeçalho, outras por baixo...) o ideal para isso é ter o cabeçalho transparente. 
Dê enter e cole esse código LOGO APÓS O TERMINO DO OUTRO. salve.


Agoooooora sim vamos instalar devidamente as nuvens/pássaros/balões. eu sei, é meio grande, mas no vinal dá certo e fica lindo! De Ctrl+f e procure pela tag </B:SKIN> e cole ABAIXO dela esse outro código, EDITE-O COM AS IMAGENS DO FIM DO POST OU QUALQUER PNG DE SUA PREFERENCIA e SALVE.

<div id='wrapper'>
<div id='content'>
<div id='cloud1'><img src='
URL_DA_IMAGEM_1'/></div>
<div id='cloud2'><img src='
URL_DA_IMAGEM_2'/></div>
<div id='cloud3'><img src='
URL_DA_IMAGEM_3'/></div>
<div id='cloud4'><img src='
URL_DA_IMAGEM_4'/></div>
</div>
</div> 
   

Depois de editar e colar esse código,  cole esse outro abaixo ANTES da tag </B:SKIN>, Para posicionar as imagens de forma correta no seu Layout.

#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; }
 

E aqui estão as imagens pra você editar o código que pede as URL's! Se voces quiserem ver como colocar as nuvenzinhas como as daqui do blog, vejam lá nesse post  do Delicadíssima e os outros são PNG's que eu encontrei no We♥it e editei:

 



E aí meu povo, gostaram do tutorial? comentem! lembrando que TODOS os códigos são do delicadíssima, eu só editei o de mudar a URL ! Beijos *-*


32 comentários:

  1. oi ja estou seguindo e adorei aqui...

    poderia me ajudar e me seguir tb...


    www.makepopular.blogspot.com.br

    e participe do sorteio de um mega kit de esmaltes risque...

    ResponderExcluir
    Respostas
    1. ja estou participando do sorteio, flor! Bjo ;*

      Excluir
  2. Huahsuahsuha, tudo bem, flor! Contendo os créditos está tudo bem. ^^
    Beijos!

    delicadissima.com

    ResponderExcluir
  3. Muito fácil e muito útil! (:
    E fica lindo *o*
    Beijo,

    www.seradolescenteblog.blogspot.com

    ResponderExcluir
  4. Gente, eu estava atrás desse tutorial!! Vou fazer, ok?? Muuuito obrigada linda!
    Batom De Framboesa

    ResponderExcluir
    Respostas
    1. Ok, Gi! o BF vai ficar lindo com esse tuto *-*

      Excluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Adorei! Mas é tanta coisa, que dá até preguiça, rs. O blog ficou lindo <3

    http://sapatosdeveludo.blogspot.com

    ResponderExcluir
    Respostas
    1. hihi eu também tava morrendo de priguiça de fazer, mas baixou a giza em mim esses dias e eu sai fazendo 4587 tutos *-*

      Excluir
  7. adoreiiii , muita coisa linda recebi seu email =]
    bjs

    ResponderExcluir
    Respostas
    1. haha, valeu prii *-* espero ser a proxima lá!

      Excluir
  8. AAAAAWWWW don't credito, tava doida com esse tuto! G.G vou fazer o balão, a nãão as nuvens, nah, os passaros! *o* tudo! Huuu HUSAHUSAUHSAHU aahhh OML e.e
    Beijos ♥

    Conspirantes

    ResponderExcluir
  9. Acho que tem trezentos anos que tô no blog mexendo no mouse, só por que estou apaixonada pelo cursor de bigodinho! :3 hahahahahaha
    Adorei! Beijos.

    ResponderExcluir
    Respostas
    1. hahahahaahah e eu fico que nem uma retardada colocando o bigode em todas as fotos :B kkkkkkkkkkkkkkkkkkkk

      Excluir
  10. Aw, mó lindo véi. Só que tenho pregs de fazer HUASHUSA' e esse cursor? Bah, me mata!

    Beeijos!
    Pós Florescer.

    ResponderExcluir
    Respostas
    1. UAHUAHAUHAU é meio complicado mesmo, mas de primeira da certo \õ/

      Excluir
  11. Ai ameei o post *-* e seu blog tbm, ele é lindo, quer afiliar-se ao meu blog? O seu é per-fei-to, nossa seria uma hhooonra te-lo como afiliado, se num puderm, vc pode seguir meu blog, é quue eu to tentando alcançar metas, ok, bjs ! Bom andamento aqui linda bj!

    ResponderExcluir
  12. Complicado, oh God. Isso é dificérrimo, pelo menos pra mim, mas pra você deve ser fácil, você é profissa né? Pois, seu blog está divo. Ahasa gata! Rs.

    #Beijitos! ~~> 4-Brownies.blogspot.com

    ResponderExcluir
  13. Achei liiindo! As nuvens tão fofas *-*
    bj

    nossobvirtual.blogspot.com

    ResponderExcluir
  14. Esse tutorial é muito procurado atualmente, adorei os brushes Bia *-*

    http://www.world-cutest.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. não são brushes carol, são pra usar no tuto.

      Excluir
  15. Hoy flower, adorei seu blog e ja estou seguindo !!
    Visite o Sweet Flower, e nos ajude a conseguir 500 seguidores ;) Podemos contar com vc?

    Beijos :)
    http://sweet-flower-laura.blogspot.com.br/

    ResponderExcluir
  16. Uau! Eu adorei esse tutorial ^^
    Depois vou tentar lá no meu blog.
    Aliás, gostei muito daqui!
    Vou segui :3
    Beijus<3
    http://reinokawaii.blogspot.com

    ResponderExcluir
  17. quem gosta de baixa games filmes tv online entra nesse link http://wwwcoyotedownload.blogspot.com.br/

    ResponderExcluir
  18. Tentei fazer, mas não deu certo, aparece o seguinte erro: "div should not appear inside of head" ... Li e reli, fiz e refiz o passo a passo, mas sempre aparece esse mesmo erro. Sabe o que pode estar dando errado? :/
    Beijos, Jooy.

    ResponderExcluir
  19. qual o nome do templade do seu blog flor olha o meu www.jessicaletici.blogspot.com

    ResponderExcluir