15/08/2013

Tutorial: Efeito Awn

||

Yo!Yo! Panquecas do dia! Tenho tanta fome que irei roubar o tempinho de você em uma abocanhada só. Hoje trago um efeito super fofo que achei no EAH, ele se chama Awn. É um efeito super simples, bonito e discreto. Ele é perfeito para elite de afiliados, mas em minha humilde opinião fica melhor quando se tem poucos afiliados. Claro que se você tiver uma multidão de afiliados como eu, pode se usar expansão assim diminuindo a quantidade, mas isto vai da decisão de vocês é só uma opinião. Caso alguém queira usar expansão ||Tutorial|| Voltando ao assunto principal  Awn é um efeito super fofo, acho que irão gostar.


1.Para adicionar e o básico de sempre vá ate seu HTML, usando o atalho procure por ]]></b:skin> e acima dele cole:

.efeito-awn-isa {
padding: 2px;
border: 1px solid #COR DA BORDA;
-webkit-transition-duration: 2s
}
.efeito-awn-isa:hover {
-webkit-transform: rotate(90deg) rotate(180deg);
-webkit-transition-duration: 2.5s
}

2.Salve! Vá ate seu Layout abra um gadgets de HTML/JavaScript e cole:

<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>
<a href="LINK" title="NOME"><img class="efeito-awn-isa" src="IMAGEM" /></a>

É isso, fácil né? Arrume as partes principais e prontinho, créditos ao blog Eu Amo HTML, beijos pessoal e ate mais tarde.

18 comentários:

  1. Awn mds!
    Que efeito legal, vou usar no meu próximo layout, posso moça? *3*

    Beijos! ~
    brown--heart.blogspot.com.br

    ResponderExcluir
  2. Gostei desse efeito, ele é suave, não é daqueles que te dar até dor de cabeça de tão rápidos rsrsrsrsrsrsrssr

    http://umaborboletalaranja.blogspot.com.br/

    ResponderExcluir
  3. Que efeito tão fofo. *3* É caso para dizer... "awn"!! >u<
    O tutorial está muito acessível, gostei! <3 ^^

    Até mais! Seguindo! ;3
    - catching ✩ stars

    ResponderExcluir
    Respostas
    1. Hehe acho que por esta razão ganhou esse nome.
      Obrigada por comentar.

      Excluir
  4. Ah, fome eu tenho a todo o tempo, e quando digo todo é todo mesmo. A não ser quando me entupo de panquecas -Q

    Que fofinho, é tipo um giro lento, adorei >3<

    Kawaii Land~

    ResponderExcluir
    Respostas
    1. Panquecas ai que coisa gostosa *¬*

      Excluir
  5. Ah, u não sinto muita fome, como muito pouco :/ Amo esse efeito, é bem fofinho!

    - HTML Secret

    ResponderExcluir
    Respostas
    1. Entendo ^^ eu estava cheia de fome não havia tomado café nem
      almoço e jáera por volta as 16.... t.t

      Excluir
  6. Nossa vou fazer isso. Seu blog sempre me ajudando, vi seu comentario de afiliação agora, já coloquei lá.
    Sempre vou estar por aqui :)
    http://rabiscodeunicornio.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Faz sim.
      Oh agradeço por colocar <3
      Então sempre será bem vinda.

      Excluir
  7. Gostei muito do efeito!!!!
    bjs
    bpblogdepapel.blogspot.pt

    ResponderExcluir
  8. Esse efeito é tão... AWN! Hahahahaahaha nossa, amei ele, sério, com certeza eu vou usar no meu próximo lay *----*

    sorrisomet4lico.blogspot

    ResponderExcluir
    Respostas
    1. Hihi, sim, sim ficará lindo. *---*

      Excluir
  9. Ele funcionou (; haa!! que divo

    ResponderExcluir