~ 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!
PreviewBem, 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;}Não faça nenhuma alteração, não é necessário.
.isa-cute:hover {opacity:1.0; -webkit-transition-duration: .80s;}
2. Salve e depois vá em Layout • Adicionar Gadgets • HTML/JavaScript e cole:
<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="3">Como perceberam, o 3 está destacado. É a velocidade em que as imagens passam.
<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>
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 ;*
O blog está fechado, mais deve ter ficado lindo como sempre *---*
ResponderExcluirjá ate salvei aqui ^^
Nyah Kawaii
Ficou lindinho o efeito. Super fofo <3
ResponderExcluirAna~ thesecretdiar-y.blogspot.com
que lindo, usarei no meu próximo layout com certeza!
ResponderExcluirAdolescente Nerd
Adorei esse efeito Muito lINDO...
ResponderExcluirbeujos!
Espero sua Visitinha...
cantinhodarebec.blogspot.com.br
Ótimo tutorial, amei. :}
ResponderExcluirhttp://diariodananiih.blogspot.com.br/
Amei o efeito, vou utilizá-lo! :3 http://html-e-css.blogspot.pt/ Tirou o HC dos parceiros?
ResponderExcluir