15 de jan. de 2013

Imagens deslizantes (marquee)

Olá anjos!

Atendendo a um pedido da Marie, vou ensinar a colocar um slide de imagens. O slide serve muito para parceiros e posts em geral. O tutorial eu achei no site Kbaus.com e estou repassando. Como não fui eu quem fiz, vou deixar os créditos exatamente como o dono colocou no próprio site. 
Caso o tutorial não seja mesmo esse, por favor peça de novo.
Veja o preview aqui.

Em um Gadget de HTML/JavaScript, cole o seguinte código:

<marquee behavior="scroll" direction="left" heigth="480" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4" widht="480">
<a href="LINK 1"><img border="0" src="LINK DA IMAGEM 1" title="NOME DO LINK"/></a>
<a href="LINK 2"><img border="0" src="LINK DA IMAGEM 2" title="NOME DO LINK"/></a>
<a href="LINK 3"><img border="0" src="LINK DA IMAGEM 3" title="NOME DO LINK"/></a>
<a href="LINK 4"><img border="0" src="LINK DA IMAGEM 4" title="NOME DO LINK"/></a>
<a href="LINK 5"><img border="0" src="LINK DA IMAGEM 5" title="NOME DO LINK"/></a>
</marquee>
<center>Widget By: <a target="_blank" href="http://www.kbaus.com/">www.Kbaus.COM</a></center>

Mude "left" para "right" caso queira que as imagens deslizem para a direita.(No primeiro item).

O número 4 indica a velocidade que as imagens deslizam, números grandes vão aumentar e números pequenos vão diminuir a velocidade.

Caso queira colocar tamanho nas imagens, acrescente o código <img width="50" heigth="50" border="0" antes do link da imagem (src="link"). Width=largura. Height=altura. Border=borda.

Para os links abrirem em outra guia acrescente o código a target="_blank"  antes do link das imagens.

Para adicionar mais links é só acrescentar o código a seguir antes de </marquee>

<a href="LINK"><img border="0" src="LINK DA IMAGEM" title="NOME DO LINK"/></a>
Espero que tenha ajudado. Qualquer coisa só falar.

10 comentários:

  1. Já estava procurando faz tempo, pro meu novo layout. Me ajudou muito *---------*

    ResponderExcluir
  2. Oi!
    Era isso mesmo que eu queria!
    Valeu!
    Assim que eu colocar no meu blog eu aviso!

    Obrigada!

    *-*

    ResponderExcluir
  3. Yo...
    Gostei muito desse tutorial, acho que vou usá-lo lá nós meus afiliados...

    O blog tá muito lindo...

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Deu certo \o/ amei ♥

    http://leyahff.blogspot.com.br/

    Bjiinhuss Cariinhosos ♥

    ResponderExcluir
  6. Ooi! Muito obrigada por compartilhar esse tutorial :D Estava louca procurando por um desses, mas nenhum dos códigos que eu usava funcionava. Muito obrigada mesmo <3
    Sucesso e Deus te abençoe!

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!