20.1.15

Tutorial-Efeito Balanço (Exclusivo!)

                                                           Boa Tarde Little Rains!
Tudo bem? Espero que sim! Fiquei feliz em ver que gostaram do post anterior. Foi super divertido fazê-lo e saiu um pouco da rotina de posts do blog. Mas enfim, enrei no blogger ontem e minha time line tava cheia de posts! Engraçado que parece que todo mundo resolveu voltar a blogosfera e postar ontem. Espero que esse ritmo agitado continue por muuito tempo! Ah e acho que já sei o tema do próximo layout e vai ficar lindo, só não vou revelar o tema pra poder fazer surpresa. Curiosos?


Bom, no post de hoje eu resolvi trazer um tutorial de um efeito que acabei de criar e achei lindo. O blog possui poucos tutoriais e pretendo mudar isso, já que depois de 3 anos na blogosfera, finalmente estou pegando o jeito de mexer com esse bicho de sete cabeças HTML. O efeito se chama balanço porque ele deixa a imagem inclinada e quando passa o mouse ele vai pra direita e pra esquerda. É bem bonitinho e espero que gostem :3
 
                                                           Preview do efeito
 
1-Vá em modelo >> Editar HTML >> Aperte CTRL+F e procure por ]]></b:skin>

2-Acima de ]]></b:skin> cole o seguinte código e não mexa em nada!

     .balanço {
    transition:All 0.4828s ease;
    -webkit-transition:All 0.4828s ease;
    -moz-transition:All 0.4828s ease;
    -o-transition:All 0.4828s ease;
    transform: rotate(0deg) scale(0.971) skew(-3deg) translate(-11px);
    -webkit-transform: rotate(0deg) scale(0.971) skew(-3deg) translate(-11px);
    -moz-transform: rotate(0deg) scale(0.971) skew(-3deg) translate(-11px);
    -o-transform: rotate(0deg) scale(0.971) skew(-3deg) translate(-11px);
    -ms-transform: rotate(0deg) scale(0.971) skew(-3deg) translate(-11px);
    }
    .balanço:hover{
    transform: rotate(0deg) scale(0.971) skew(8deg) translate(-5px);
    -webkit-transform: rotate(0deg) scale(0.971) skew(8deg) translate(-5px);
    -moz-transform: rotate(0deg) scale(0.971) skew(8deg) translate(-5px);
    -o-transform: rotate(0deg) scale(0.971) skew(8deg) translate(-5px);
    -ms-transform: rotate(0deg) scale(0.971) skew(8deg) translate(-5px);
    }
3-Visualize e se tiver tudo certinho salve. Agora vá em Layout >> Adicionar um Gadget >> HTML/JavaScript e cole:

 <center><a href="Seu link aqui" title="Nome"><img src="Url da sua imagem" class="balanço" /></a>
Edite o que está sublinhado e pronto! Obrigada ao blog Sweet HTML pelo tutorial de como criar seu próprio efeito. Lembrando que é proibido reblogar e que se usar dê os créditos.

22 comentários

  1. Olá Britty! Eu não li o post anterior mais vou lá conferir. A eu sou um desastre em html, uma vez até consegui criar um efeito mais foi coisa simples e, ainda deu erro haushau. Que efeito lindo, se eu for usar vou dar crédito, certo? Beijos <3

    Atenciosamente, [Mademoiselle Lynn]

    ResponderExcluir
    Respostas
    1. Olá Lynn! Ah confira sim que tá super legal. Haha somos duas, essa situação já aconteceu comigo também :/ huehue. Use sim haha :3

      Excluir
  2. O efeito é bem bonitinho, deixa uma ar suave, acho que será útil para muitos blogueiros :D

    http://scribbling-rainbow.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Também achei *0* Espero que seja, fiz ele bem rapidinho mas o resultado ficou bem lindo

      Excluir
  3. Esse efeito é bem legal, e adorei o tutorial :)

    http://colorful-mushrooms.blogspot.com.br/

    Beijoos ;*

    ResponderExcluir
  4. Que efeito lindo! Provavelmente adicionarei em mais uns de meus layouts horrorosos. Quem sabe eu não tomo coragem pra fazer outro, heheheh ^3^~

    waiting for you ♥ || www.wh-asia.net

    ResponderExcluir
    Respostas
    1. Obrigada! Use sim, e seus layouts não são horríveis T-T preciso de coragem também para terminar o que eu comecei a fazer

      Excluir
  5. Também estou a 3 anos na blogosfera, e não sei nada sobre HTLM. Gostei do tutorial, o resultado deve ser bem legal.♥

    PiinkCookie.blogspot.com.br

    ResponderExcluir
    Respostas
    1. HTML é beem mais difícil que parece T-T Fica lindo o resultado :3

      Excluir
  6. Wow! Que layout mais fantástico, aqui está fazendo muito calor e vendo essa água toda, deu sede hahahaha' :3 amei demais ~roubando o layout~ HUEHUE :v

    Amei o efeito, '0' perfeição demais, até balancei junto HUEHUE :v amei o tutorial, sucesso no blog e estou anciosa para o próximo layout, vou seguir aqui pq né... :3

    Adolescente Nerd // Oficial

    ResponderExcluir
    Respostas
    1. Obrigada haha *O* Dá vontade de entrar dentro do computador e mergulhar nessa praia linda ♥-♥ Huahua que bom que gostou! Obrigada, espero que ele fique bom :3 Haha

      Excluir
  7. O efeito é realmente incrível!
    Ótimo post!

    >>> http://gilustre.blogspot.com.br/

    ResponderExcluir
  8. caramba que fodaaaaaaaaa,queria começar a fazer layout free novamente pra colocar ele mas ainda tô com preguiça :~: <3

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Haha que bom que gostou! Também estou com preguiça de fazer layout :/

      Excluir
  9. Vou dar uma olhada no post anterior, ainda não li <3 Adorei o efeito, ficou tão fofinho *3*
    revele esse temaaaa aksjksaksks brincadeira, parei

    ResponderExcluir
    Respostas
    1. Ficou muito legal, vale a pena ler *-* Haha logo mais já vai saber

      Excluir
  10. Efeito + Que lindo: )
    aceita afiliação?
    me avise:

    girlthingweb.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Haha que bom que gostou :3 Claro aceito sim!

      Excluir

Olá! Obrigada por acessar o September Rains, fico feliz em ver que quer deixar um comentário, só peço que:
-Não use palavrões e palavras baixas,
-Não arrume briga com outros usuários,
-Se for para fazer uma crítica, que você seja gentil e que ela seja construtiva,
-Leia o post antes de comentar, ok?
Seguiu todas as regras? Ótimo! Agora pode comentar! Não se esqueça de deixar o link do seu blog, para que eu possa visitá-lo depois.