30 de setembro de 2012

Tutorial - Efeito Backy para equipe de afiliados!

                           Tumblr_m9a6e9nvoi1ro5im4o1_500_large

   Ooooi genty <3 Tudo bem com vocês? Hoje trouxe um tutorial do We Heart HTML, muito lindjo! Falei no post passado que iria postar esse tutorial, então, vamos lá! u-u

 Ayla, o que acha do Efeito Backy ? - Acho lindjo! 
 Ayla como fica? - Olhe abaixo:



Imagens feitas por mim!
Iaí, o que acharam? querem esse efeito? então vamos pros códigos!

Vá em design, editar html e procure por ]]></b:skin>
Acima de ]]></b:skin cole esse código:
           
imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;}
nome2 {position: absolute; display: block; width: 300px; height: 30px;
top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px; font-family: 'play'}
  Entenderam? Não? vou explicar como é o código!

  Onde está azul é as cores das bordas!
  Onde está rosa, é a cor da letra!
  E onde está azul agua, com sublinhado, é o fundo!

  Vá em Layout, adicionar um gadget e adicione o HTML/JavaScript e cole esse código:


        <a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>
 Proonto, fácil, e beem lindjo! agora, onde está em azul, é só vocês arrumarem, gostaram? espero que sim ^-^ 
         


5 comentários:

  1. Oii,Amei o blog,!
    Beiijos!
    http://vitoriaacedo(.blogspot.com)

    ResponderExcluir

  2. Seu blog é lindo, muito fofo mesmo*0* parabéns!! Já estou te seguindo amada =))

    Convido voce e suas leitoras a conhecer meu blog

    toobege.blogspot.com

    Beijinhoooos ;**

    ResponderExcluir
  3. Que lindo efeito!Adorei.
    Tutorial super bem explicadinho!
    bangteen.blogspot.com

    ResponderExcluir
  4. Efeito é lindjo mesmo -q..talvez use no meu próximo lay :3..

    ResponderExcluir
  5. Aham, e você pode usar qualquer tamanho de foto! Que ele se encaixa perfeitamente. ^^

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)