22/12/2014

Tutorial • Efeito Marquee Rotate


Olá lindinhos! Como vocês estão??
Estou bem! Esta fazendo um calor terrível aqui no Rio. Estou precisando ir a praia urgente, se não acabarei derretendo na frente do computador! Eu não gosto do verão, acho que eu gostaria mais se eu tivesse morando em frente a praia, mas como eu moro lá no fim do mundo, fica difícil ir sempre.
Hoje eu trouxe um tutorial que achei em algum blog que não me lembro o nome ( realmente eu não me lembro, queria dar os devidos créditos). Vou ensinar dois modelos, o primeiro ele vai "infinitamente" o outro ele "vai e volta", os dois tem o efeito de girar a imagem ao passar o mouse. Para conferir o modelo 1 veja aqui para visualizar o modelo 2 veja aqui !


Vamos ver?
Bom, Primeiro vá em seu HTML e procure por:
]]></b:skin>
Depois de ter achado o código, cole esse outro acima dele. Ele serve para os dois efeitos!
.isa-cute{-webkit-transition-duration: .80s;}
.isa-cute:hover {opacity:1.0; border-radius: 50px; -webkit-transform: rotate(90deg) rotate(280deg);
-webkit-transition-duration: 2.5s -webkit-transition-duration: .80s;}
 Depois de ter feito isso, você irá escolher um dos modelos. 

Se você quiser usar o modelo 1, vá em seu Layout  Adicionar um Gadget  HTML/Java Script e cole esse código:
<marquee behavior="infinity" onmouseout="this.start(1);" onmouseover="this.stop(0);" scrollamount="5">
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
</marquee>
Depois Salve!

Se você quiser utilizar o modelo 2, vá em Layout  Adicionar um Gadget  HTML/Java Script e cole:
<marquee behavior="alternate" onmouseout="this.start(1);" onmouseover="this.stop(0);" scrollamount="5">
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
<a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a>
</marquee>

Pronte, agora é só Salvar!

Bom, esse foi o tutorial de hoje. Espero que tenha gostado! Comente o que achou.
Kissus~♥

2 comentários:

  1. Nossa, ameii os efeitos super lindos! Como vc cria esses efeitos, personalização e os códigos deles??

    There | Fluffy White

    ResponderExcluir
    Respostas
    1. Que bom que gostou *--*
      Bom, é meio difícil responder pelo comentário, sorry... Vou fazer um post somente explicando como se criar efeito, ok! Prometo que não demoro muito!! Bjos ♥

      Excluir

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !