3 de abr de 2013

Tutorial - Efeito pisca logo, porra


Olá pessoal,eu trouce um tutorial para afiliados bem facinho do Kawaii World.
Para ver o efeito clique aqui , clique em leia mais para ver o tutorial.
Primeiramente o efeito tem 2 modos

Efeito 1

1. Vá até Modelo > Editar html e procure por <head>. Abaixo da tag, cole:

<link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>

2. Procure por ]]></b:skin> e acima da tag, cole:

.efeitopisca1{ padding:2px; border:1px solid #dcdbdb; } .efeitopisca1:hover{ -webkit-animation-name: pisca; -moz-animation-name: pisca; -o-animation-name: pisca; animation-name: pisca; -webkit-animation-duration: 1s; }

Para mudar a cor da borda é só trocar o código que se encontra em negrito pela cor que desejar.
3. Por fim, cole esse código e substitua tudo o que se pede onde quiser usar - geralmente em gadget de HTML/JavaScript -
<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitopisca1" /></a>

Efeito 2

1. Vá até Modelo > Editar html e procure por <head>. Abaixo da tag, cole:
<link href='http://static.tumblr.com/dlelfro/WSvmh91f0/pisca5.css' media='screen' rel='stylesheet'/>

2. Procure por ]]></b:skin> e acima da tag, cole: 

.efeitopisca2{
padding:2px;
border:1px solid #dcdbdb;
-webkit-transition-duration: .50s;
}
.efeitopisca2:hover{
-webkit-animation-name: piscaporra;
    -moz-animation-name: piscaporra;
    -o-animation-name: piscaporra;
    animation-name: piscaporra;
-webkit-animation-duration: 1s;
border:1px solid #ff9ab2;
-webkit-transition-duration: .50s;
 }

Para mudar a cor da borda inicial troque o primeiro código em destaque e para mudar a cor da borda hover, troque o segundo código em negrito.

3. Por fim, cole esse código e substitua tudo o que se pede onde quiser usar - geralmente em gadget de HTML/JavaScript -

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM"
class="efeitopisca2" /></a> 
Créditos: Kawaii World 

6 comentários:

  1. Eu uso esse efeito nos afiliados amo ele *-*
    Aceita afiliação ?
    http://yesterday-icons.blogspot.com/

    ResponderExcluir
    Respostas
    1. Ele é realmente super cute,não é mesmo?
      Aceito sim flor,ja vou te colocar aqui ;)

      Excluir
  2. Amo esse efeito e até uso no meu blog , parabéns seu conteúdo é ótimo já estou seguindo e obrigada por ter seguido meu blog também.

    Beijos.

    http://meucupcakedemorango.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Gabriela :)
      Beijos ~

      Excluir
  3. Blog lindo, amei, e o post também, super legal!

    kissus ~

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

    ResponderExcluir

Deixe um comentário ♥

Related Posts Plugin for WordPress, Blogger...