In Tutoriais

Cute Flash no Header ou no Blog Todo!

Oie...Como vai o feriadão hein? Aqui tá o maior calor ;___; Bom, hoje vou mostrar para vocês como inserir arquivos do tipo SWF no seu blog, truque que aprendi no Ciudad Blogger (link na F.A.Q); esse tipo de arquivo chamado Flash geralmente é lindo e conta com animações super fofas, tipo os corações que flutuam pelo Reino Kawaii, como as que vou postar aqui, dicas da Annyz (link na F.A.Q e Elite). Eles podem ser adicionados como plano de fundo do cabeçalho ou background e até como o próprio cabeçalho mesmo, sendo que como a última opção pode deixar o blog meio pesado para carregar dependendo do tamanho do arquivo e ter que adicioná-lo com um gadget HTML/JavaScript, o que não é o caso do post de hoje. É bem simples adicionar flash no HTML, mas antes recomendo que você esteja usando uma imagem em PNG (sem fundo) no Header e faça um backup do seu template. Vamos lá?
Primeiro, precisamos de flashs fofos não é? Sites legais para hospedar arquivos swf são o DeviantArt, o Photobucket e o Dropbox; o Picasa parece que não aceita. Nesse álbum do Photobucket você encontra várias opções; são transparentes apesar de não parecer ^-^
Agora que já temos várias opções, vamos adicionar ao HTML. Entre na área de edição de HTML do seu modelo e procure por (Ctrl+F):
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> ou <body>
Quando encontrar, acrescente esse código logo abaixo:

Para que o flash apareça como plano de fundo no blog todo:


<object height='100%' id='flash' width='100%'>
<param name='movie' value=' URL do Flash SWF '/>
<param name='scale' value='exactFit'/>
<param name='wmode' value='transparent'/>
<embed height='100%' scale='exactFit' src=' URL do Flash SWF ' type='application/x-shockwave-flash' width='100%' wmode='transparent'/>
</object>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#flash {
height: 100%;
z-index:-9999;
position:fixed;
margin: 0 auto;
}
</style>


  • Troque o que está em vermelho pelo link do arquivo flash que deseja como background. Não interfere no background atual do seu blog, a não ser que o flash não seja transparente, e aparece no cabeçalho, caso ele tenha fundo transparente também.

Para que o flash apareça no cabeçalho do blog:


<object height='400px' id='headerflash' width='100%'>
<param name='movie' value=' http://i868.photobucket.com/albums/ab249/vivian563663/Flash/starlight/vul3ek6st2011055.swf '/>
<param name='scale' value='exactFit'/>
<param name='wmode' value='transparent'/>
<embed height='400px' scale='exactFit' src=' http://i868.photobucket.com/albums/ab249/vivian563663/Flash/starlight/vul3ek6st2011055.swf ' type='application/x-shockwave-flash' width='100%' wmode='transparent'/>
</object>
<style>
html {
height: 400px;
}
body {
height: 400px;
margin: 0;
padding: 0;
}
#headerflash {
height: 400px;
z-index:-9999;
position:absolute;
margin: 0 auto;
}
</style>
Em que:

  • O que está na cor vermelha é a altura que o nosso cabeçalho possui (altura da imagem). Substitua pela altura do seu.
  • O que está em roxo é o link do arquivo em flash. Substitua por outro de sua preferência.
  • Width 100% quer dizer que você não precisa ajustar a largura, ela se adequa automaticamente.
É isso. Ah sim: o topo ou header do seu blog poderá "subir". Espero que tenham gostado e bom feriado.

Related Articles

3 comentários:

  1. olá doro o seu blog!
    e queria te perguntar uma coisa , vc sabe fazer um templete flash tipo o do blog
    cantinho da caps?
    se vc souber queria saber se vc faz um para meu blog?

    ResponderExcluir
  2. Obrigada:h:
    O da Camila é mesmo lindo neh!! Bem, como o dela eu não sei fazer; consegui add imagens que flutuam pelo cabeçalho no template do Berry Puppy que fiz gratuitamente para disponibilizar (veja na tag "Templates Kawaii") que gera aquele efeito do dela, mas foi sem flash; basta add mais imagens.
    Ainda não faço templates por encomenda; estou aprendendo muita coisa primeiro e quem sabe um dia farei neh :j:
    Beijinhus e obrigada uma vez mais.

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart