28 março 2013

Efeito Marquee & Opacity {Exclusivo!}

| |

~ Hola personas! {Última vez, prometo}
Bem, eu estou muito feliz hoje então eu fiz um efeito que ficou bem legal. Na verdade, muitos de vocês já viram em alguns blogs e tals, mas saibam que é exclusivo do Eu Amo HTML!

É sério, eu fiquei muito feliz com o resultado e esse efeito, com certeza, vai estar no próximo lay!
Preview
Bem, não há muito o que falar, apenas aperte em Leia Mais e veja no que vai dar (O.o rimou)



1. No HTML do seu blog, procure por ]]></b:skin> e acima cole:

.isa-cute{opacity:0.6; -webkit-transition-duration: .80s;}
.isa-cute:hover {opacity:1.0; -webkit-transition-duration: .80s;}
Não faça nenhuma alteração, não é necessário.

2. Salve e depois vá em Layout • Adicionar Gadgets • HTML/JavaScript e cole:

<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="3">
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
<a href="LINK" title="TÍTULO"><img class="isa-cute" src="IMAGEM" /></a>
</marquee>
Como perceberam, o 3 está destacado. É a velocidade em que as imagens passam.
Depois é só mudar o que se pede acima e pronto ^-^


Espero que tenham gostado do efeito, pois eu fiz com muito carinho para vocês, amores. Ele foi feito pensando em parceiros, afiliados, blogs sisters/brothers coisas assim, acho que se colocar em outra coisa vai ficar meio feiinho.
O melhor é que economiza bastante espaço. Aquela elite cheia de imagens e toda desorganizada não fica legal no blog.

Beijos e até o próximo post ;*

6 comentários:

  1. O blog está fechado, mais deve ter ficado lindo como sempre *---*
    já ate salvei aqui ^^

    Nyah Kawaii

    ResponderExcluir
  2. Ficou lindinho o efeito. Super fofo <3
    Ana~ thesecretdiar-y.blogspot.com

    ResponderExcluir
  3. que lindo, usarei no meu próximo layout com certeza!

    Adolescente Nerd

    ResponderExcluir
  4. Adorei esse efeito Muito lINDO...
    beujos!
    Espero sua Visitinha...
    cantinhodarebec.blogspot.com.br

    ResponderExcluir
  5. Ótimo tutorial, amei. :}

    http://diariodananiih.blogspot.com.br/

    ResponderExcluir
  6. Amei o efeito, vou utilizá-lo! :3 http://html-e-css.blogspot.pt/ Tirou o HC dos parceiros?

    ResponderExcluir

« »