Follow Us @soratemplates

quinta-feira, 11 de outubro de 2012

Magia em HTML: Criando Efeitos Kawaii!

Olá ^-^ Bom, vocês se lembram daqueles sites com scripts que permitem adicionar efeitos ao blog de objetos flutuantes, alguns tem efeitos para o cursor e tal? Se não se lembram...
São lindinhos neh :3 Porém, a gente quer sempre criar as próprias coisas e muitos devem ter pensado que seria legal ter seus próprios efeitos; naqueles sites é possível fazer isso quando cadastrado, mas para criar um efeitinho fofo para seu site não é preciso cadastro e é bem fácil, tipo essa chuva de brilhos que uso em meu blog com uma fada, tudo feito com HTML e scripts encontrados no Ciudad Blogger<=CRÉDITOS!=>
Vou mostrar como fazer o mesmo com qualquer imagem que você quiser e ainda adicionar links nessas imagens, como quando você acessa os feeds do Reino Kawaii ao clicar na fada do arco-íris Ciel, personagem de Wish me Mell que escolhi com a fada madrinha do blog, afinal, toda princesa precisa de uma neh rsrsrs...Veja o efeito com imagens diferentes no blog de testes:
Vamos lá!!!
Primeiro é legal ter as imagens preparadas e o ideal é que elas sejam gifs ou mini gifs de brilhinhos, fadinhas, borboletas, anjos...enfim, com asas ou que aparentam estar voando. Você pode encontrar muitissíssimas mesmo na categoria mini gifs do Glitter Graphics ou na categoria Gifs aqui do blog. Como um dos efeitos permite adicionar links, se você tiver ícones de redes sociais também fica legal.
Efeito 1: Objetos Flutuantes
1. Se quiser usar a chuva de brilhos que uso, vá até Modelo - Editar HTML. Copie e cole isso aqui acima de </head>:
<script src='http://db.tt/g2QirXjX' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
amor()
</script>
Visualize e veja que os brilhinhos aparecem caindo em seu blog.
2. Mas se quiser usar com outra imagem, abra esse arquivo. É o script que hospedei; fiz isso porque ele é compriiiiido ^-^ Substitua URL DA IMAGEM pelo endereço da imagem que quiser.
3. Agora é só colar acima de </head> novamente e salvar.
Efeito 2: Objetos Flutuantes com Links
1. Entre no HTML do seu template e procure por </head>. Ao encontrar, cole isso acima dele:
<script src='http://db.tt/o51IH0pk' type='text/javascript'/>
2.  Agora procure por <body> ou  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>. Quando encontrar cole isso abaixo dele:
<div id='heart1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='LINK'><img border='0' src='http://dl6.glitter-graphics.net/pub/584/584776qvkek99ty3.gif'/></a>
</div>

<div id='heart2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='LINK'><img border='0' src='http://dl7.glitter-graphics.net/pub/727/727057f5owblcuts.gif'/></a>
</div>

<div id='heart3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='LINK'><img border='0' src='http://dl9.glitter-graphics.net/pub/536/536389mts365i0j8.gif'/></a>
</div>

<div id='heart4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='LINK'><img border='0' src='http://dl8.glitter-graphics.net/pub/683/683158xrji3b6lpi.gif'/></a>
</div>
Note que onde está escrito LINK, você deverá trocar por um link existente, e onde houver o endereço de uma imagem (em vermelho), troque por outra que quiser. Você pode alterar o tamanho de cada uma em width (largura) e height (altura).
Você pode usar os dois scripts juntos porque não fica pesado, dependendo do que você já estiver usando em seu layout; ficarão posicionados assim:
 
Bem simples neh e dá um toque de magia ao blog ^-^ Eu espero que gostem e beijus...

16 comentários:

  1. ah fala sério! aqui é que é muito fofo :)

    bjãoo linda!

    ResponderExcluir
  2. eu amo esses efeitos, mais não ponho no meu blog pois acho que não irá combinar, mais amo esse efeito, fico mexendo o mouse td hr só pra ver as coisinhas caindo do cursor kkk

    http://adolescentenerd.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. O blog Adolescente Nerd já está super lindo mesmo!!!!
      Beijinhus e obrigada!

      Excluir
  3. Eu acho que fica muito bonitinho esse efeito no blog.bjs
    no-planetaroom

    ResponderExcluir
  4. Ooooi Ro!!!
    Já estava com saudades do seu blog!
    Faz tempinho que "ando sumida".
    Ele continua fofo, como sempre. Adoro lilás!

    Adorei as dicas desse post!
    beijinhos

    http://mabeleferreira.blogspot.com.br

    ResponderExcluir
  5. Rosane e Mábele, que bom que gostaram ^^
    ->Rosane, fica neh :D E o melhor é que é mais seguro porque é a gente quem faz o efeito!!!
    ->Mábele, já estava com saudades :3
    Beijus e muito obrigada...

    ResponderExcluir
  6. Ai que lindo!
    adoro tudo que é kawaii e quase tive um treco aqui *-*
    ashausha
    <333
    Bjss, xoxo :)

    ResponderExcluir
  7. Adorei, eu coloquei e ficou SUPERLINDO *-*
    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  8. Sempre uso esse tuto, e claro, aprendi aqui

    ResponderExcluir
  9. Lindo demais esse blog, virou minha referencia agora, já que estou fazendo um blog com referencias kawaii também...
    Queria colocar a chuva de brilho, mas não consegui, dá erro e não descobri porque, mas parabéns, Reino Kawaii é incrivel de tão fofo que é!
    Bjos

    ResponderExcluir
    Respostas
    1. Muito obrigada ^^
      Tente adicionar o código do script completo (link em "esse arquivo" no post, substituindo o script com link e colando a URL dos brilhinhos ou outra imagem de sua preferência.
      Cole o código antes de /head e veja se deu certo.
      Eu uso aqui e não apresenta problemas. Espero que consiga :3
      Beijus...

      Excluir
  10. como coloca esse efeito no ponteiro do blog quando clicka sai estrelas ?

    ResponderExcluir
    Respostas
    1. Em breve faço a postagem com o tutorial ok?
      Beijus e obrigada pelos comentários ;3

      Excluir
  11. oi sempre vejo todos os tutorias de seu blog,e sou a doida dos apps e adora deixar tudo kawaii,mais ando procurando um app que fassa eu air coisas fofas no meu computador,eu tenho o raimender mais não sei como botar voce sabe como fasso para botar??

    ResponderExcluir
    Respostas
    1. Fiz algumas postagens sobre o Rainmeter como essa e essa, que são as mais recentes ^^ Dá uma olhadinha pelo blog e vc encontrará mais links de skins fofas; tem também para outro programa bem legal para enfeitar o PC chamado Xwidget ;3

      Excluir

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