10/02/2013

5 Efeitos que recomendo para afiliados

 http://3.bp.blogspot.com/-kjMZbn-mUZw/UO8ODr7K9jI/AAAAAAAArP8/jrjs_Sgxm3E/s1600/81.png
Usando ilustrações do kawaii world porquê estou sem meus materiais

Boa tarde, leitores

Hoje eu viajei, e tive uma péssima viajem. Eu nunca gostei de viajar, sempre fico enjoada e vomito muito na estrada. Desculpe por ter falado isso a vocês. Felizmente estou na casa do meu irmão. Onde posso postar a vontade e usar o phtoscape. Estou torcendo para o bendito photoshop pegar aqui, acho que vocês não sabem, mas, não pega na minha casa. Sou realmente muito azarada.
 
Me Me pediram na ask 5 efeitos bons para afiliados. Achei legal o pedido, e como não sou fão de mexer naquelas coisinhas no notbook, resolvi postar. E vim com os cinco efeitos que mais gosto, o efeito pisca logo porra, o efeito da bordinha hover, efeito shake, efeito pulsar e o efeito caption. Pode visualizar todas aqui



1. Bordinha hover

Primeiro, abra o seu HTML, tecle Ctrl + F e procure por:
]]></b:skin>
E acima dele, cole esse código:
.elitescale{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
background-color: #FF6EB4; /*Cor da borda */ 
padding: 3px;
}
.elitescale:hover {
background-color: #AB82FF; /*Cor da borda quando passa o mouse */ 
padding: 3px;
}
Agora, para usar esse efeito, adicione um HTML/ Java Script e dentro, cole esse outro código, fazendo as alterações necessárias :)
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>

2. Efeito pisca logo, porra

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>
3. Efeito shake


1. Vá até editar HTML e procure por <head> e abaixo dessa tag, cole:
<script src='http://static.tumblr.com/qbzesex/w1om9n82r/bygustavo.txt' type='text/javascript'/>
2. Agora procure por ]]></b:skin> e acima da tag, cole:
.shake {position: relative; display: inline;}
3. Por último, em um gadget de HTML/JavaScript, cole e substitua a parte sublinhada:
1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:
.bass{
max-width:74px;
margin:1px;
border-radius:10px;
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.bass:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;
}
Recomendo que só editem (se precisarem) duas coisas: o tamanho - max-widht - e a borda arredondada - border-radius - nada além disso.

2. Cole o seguinte código em um gadget de HTML/JavaScript:
<img src="http://static.tumblr.com/5dbytsa/fDAmcgq6i/ola.png" class="bass" />
<img src="URL DA FOTO" class="shake" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()"/>

 4. Efeito pulsar

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:
.bass{
max-width:74px;
margin:1px;
border-radius:10px;
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.bass:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;
}
Recomendo que só editem (se precisarem) duas coisas: o tamanho - max-widht - e a borda arredondada - border-radius - nada além disso.

2. Cole o seguinte código em um gadget de HTML/JavaScript:
<img src="http://static.tumblr.com/5dbytsa/fDAmcgq6i/ola.png" class="bass" />

 5.Efeito caption

1. Vá no HTML do seu blog, aperte CRTL+F e procure por: ]]></b:skin>
Abaixo, cole:

/** EFEITO CAPTION **/
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}
imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 3px 3px 0;}
captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}
imagem:hover captioon {opacity: 0.75;}
imagem:hover:before {opacity: 0;}
.caption:before {bottom: 10px; right: 10px;}
.caption captioon {bottom: 3px; right: 30%;}
.caption:hover captioon {right: 0px;}

Visualize, se estiver tudo certo sem nenhum problema, salve.

2. Vá em layout, adicione um gadget HTML/JavaScript e nele, cole o código abaixo:

<imagem class="caption">
<img src="LINKDAIMAGEM">
<captioon>LEGENDA</captioon></imagem>

Espero que tenham gostado ~

15 comentários:

  1. ótimos efeitoss adoro o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. Ei flor não recebi nada no meu gmail, acho que vc se enganou em algo, está tudo prontinho faz tempo , agora é só você pegar ele.. Manda seu email da conta do blogger e o login no meu email do gmail que é rohotaku@gmail.com
    Ok? beijus;;

    ResponderExcluir
  3. Os efeitos são lindíssimos!Visite:
    lembrando-carol.blogspot.com.br
    beijos!

    ResponderExcluir
  4. Adorei todos, são ótimos!

    crazyforhtml.blogspot.com

    ResponderExcluir
  5. Amei os efeitos e linda espero que tenha gostado do lay >.<
    Beijocass amoreee

    ResponderExcluir
  6. Que bom que gostou!. Eu amei >.<, ele vai ficar um bom tempo aqui AHUHAUAHUhauHAUahJ

    ResponderExcluir
  7. Toda vez que eu leio Pisca logo, porra começo a rir IHSIAUHSAHIUSH' Ótima postagem :3

    @Kawaii World. /* perfil /*

    ResponderExcluir
  8. Anw , esses efeitos são lindoos .
    VIVAAAA \Õ pela primeira vez não vou ter que
    clicar naqueela janela chata , UHSAUHSAHU *--*
    Esse layout ficou shoow , adorei .
    ~Pulando aqui , estou no BLOGROLL~
    Obrigada sua fofa ♥

    Abraços *--*

    >>
    http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  9. -Kaorii--chan.: Eu também SHAUSUASHASU, mas tento escrever como se fosse um nome normal rss. Thanking :3

    Jhenny: São lindos mesmo XD, também odeio aquela janela XD. É. ficou muito bonito, ele vai fica rum bom tempo aqui, dpois, vou encomendar de novo HSAUSHUASHU

    ResponderExcluir



Por favor, não peça nada pelos comentários, para isso temos a nossa Ask.

Os comentários daqueles que não se indentificarem seram publicados, mas não serão respondidos.

A moderação de comentários está ativa, tome cuidado com o que fala!

Pedidos de afiliação só ná página de afiliados

Não respondo mais comentários do tipo "seguindo segue de volta?"

Nao tenha preguiça de comentar, comentar nã vai fazer seus dedos caírem.