2 de fev de 2013

Pedido: Efeito nas Imagens para Afiliação

Hey, angels :) What's up?

Ontem recebi um pedido de tutorial:


Existe mais de uma forma de se obter esse efeito, mas resolvi ensinar a que uso atualmente no Mrs. Nightshade. É super simples de fazer e é realmente muito bonitinho.Se quiserem ver, é só continuar lendo.

Vocês vão perceber como é fácil, [risos].

Vão em  Modelo > Editar HTML. Usando Ctrl + F, busque pela tag ]]></b:skin> . Acima dela, cole:
@-webkit-keyframes shake {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);} 
}
.shake {-webkit-transition: .9s; border-radius: 5px;}
.shake:hover {-webkit-animation: shake .9s alternate ease;}
Se não souber o que cada parte do código significa, não edite nada.
Para finalizar, é só adicionar um gadget de HTML/Javascript e colar o código abaixo nele:
<a href="URL" title="NOME"><img class="shake" src="URL da IMAGEM" /></a>
Repita o código quantas vezes desejar, alterando o necessário.
E pronto! Sua elite de afiliados já vai "se mexer".
Aprendi no Kawaii World, portanto créditos dados.

Por hoje é só.
Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

12 comentários:

  1. Oi Laura, gostaria que você explicasse como colocar quantas pessoas estão online no nosso blog!
    Beijos!
    julia-presente-de-deus.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom, como não uso, não sei exatamente como funciona. Um blog muito bom postou esse tutorial:

      http://just-cutie.blogspot.com.br/2013/01/contador-de-visitantes-online.html

      Deve dar certo ^^

      Beijos!

      Excluir
  2. Respostas
    1. Awwwwwn, fico muito feliz que goste :D Obrigada, viu? >.<

      Beijos!

      Excluir
  3. Oi amor :3
    Adorei o tutorial, muito facinho de fazer e dá um efeito tão bonito na elite de afiliados né? Eu já usei no meu blog antes, mais atualmente uso outros efeitos *-*
    Beijos!

    Brechó de Conteúdo [ O blog está fechado para mudança de layout ]

    ResponderExcluir
    Respostas
    1. Que bom que gostou >.< Concordo *---* Existem vários efeitos legais :D

      Beijos!

      Excluir
  4. Laura ,gostaria de saber como vc faz essa caixinha e escreve dentro ,nunca consigo fazer ela.
    me ajuda?
    mundinhoperfeict.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Aaaah, o meu blockquote? É bem fácil ^.^ É só colocar ou criar um:

      - Colocar blockquote: http://tutoriais-mrs-nightshade.blogspot.com.br/2012/10/hey-angels-whats-up-estou-muito-feliz.html

      - Criar blockquote: http://tutoriais-mrs-nightshade.blogspot.com.br/2013/01/criando-seu-proprio-blockquote.html

      E depois, na sua área de postagem, apertar o botão ao lado de "Remover Formatação":

      http://i48.tinypic.com/34goykl.png

      Viu como é fácil? ^.^

      Beijos!

      Excluir
    2. Que bom *---* Fico super feliz :D

      Beijos!

      Excluir