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
    Respostas
    1. Que bom que ajudou, postei por causa de um pedido rsrs

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

    Obrigada!

    *-*

    ResponderExcluir
    Respostas
    1. Que bom que ajudou Marie! Qualquer coisa só pedir :3

      Excluir
  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!