19 de mar de 2013

28

Tutorial - Imagens Deslizantes

Tumblr_mjp9casyc51ruah4oo1_500_large
Olá pessoas! Tudo bom com vocês? Espero que sim...
Faz tempo que não trazemos tutoriais pra vocês néh? Os Autores Parceiros, Novidades, Editoras, Textos, Resenhas, tem dominado os posts aqui do DN, mas como sei que vocês também gostam de alguns tutoriais e pela minha paixão por HTML hoje trouxe um tutorial bem simples para vocês. O slide de imagens desliantes é usado aqui no DN no gadget de autores parceiros. Querem ver como faz? Então leia mais ;)

Como já disse antes o tutorial é bem simples mesmo. Peguei esse código no Chá com Anjos, mas o gadget foi feitos pelo site Kbaus.com.

 - Crie um novo Gadget de HTML/Java Script
 - 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>
</marquee>
<center>Widget By: <a target="_blank" href="http://www.kbaus.com/">www.Kbaus.COM</a></center>



Entendendo o código:
Left (esquerda) - Mude para right caso queira que as imagens deslizem para a direita.
4  - indica a velocidade das imagens, aumente o número caso queira que elas deslizem mais rápido e diminua caso queira que elas vão mais devagar.
Link 1 - Coloque o link para onde a primeira imagem irá redimensionar.
Link da Imagem 1 - Coloque a URL da primeira imagem
Nome do Link - Texto que irá aparecer quando se passar o mouse por cima da primeira imagem.

Para adicionar mais imagens ao gadget é só colocar o seguinte código antes de </marquee>:
<a href="LINK"><img border="0" src="LINK DA IMAGEM" title="NOME DO LINK"/></a>
Importante: todas as imagens devem ter o mesmo tamanho, no DN elas estão 100x150.

Qualquer dúvida é só perguntar... Beijos e até mais :D

28 comentários:

  1. Que legal, acho que vou fazer isso com os banners das minhas parcerias, pq colocar um embaixo do outro dá muito volume!

    rockcomluxo.blogspot.com

    ResponderExcluir
    Respostas
    1. Sim sim... Fica muito ruim, muito grande...

      Excluir
  2. Adorei o tutorial, parabéns. Você explicou direitinho! Queria agradecer pela visita no mu blog, muito obrigada mesmo! Volte sempre.
    Beijos Jessica!
    http://blogcantinho-da-garota.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico muito feliz em saber que você gostou... Amei sua visitinha também... Volte sempre tá?

      Excluir
  3. Que legal o tutorial.
    adorei!!!
    Bjs

    http://pintandoavaidade.blogspot.com.br/

    ResponderExcluir
  4. Nossa! Adorei esse tutorial.
    Parabéns pela explicação! Super fácil de entender.
    Beijo e uma ótima terça-feira! :)

    http://belezadescoberta.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou... Espero que seja útil ;)

      Excluir
  5. Muito legais esses tutoriais.... Principalmente p mim, q não entende nada dessas coisas! Hauhaua...

    Bjinhos
    Ju
    Asbesteirasquemecontam.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Kkkkkkkkkk... Minha irmã também não entende muito... Eu gosto...

      Excluir
  6. Que legal esse tutorial. Beijão <3

    @keithpappen
    www.detalhesamor.blogspot.com

    ResponderExcluir
  7. ótimo tutorial!!!

    http://juhhrabelo.blogspot.com.br/

    ResponderExcluir
  8. to passando para agradecer por ter votado no meu projeto *----*
    UPPPPPPPPP, sobre o post... adorei o tuto! até salvei aqui.. mtmtot obrigado *-*
    eu to apaixonada pelo teu layout
    http://blahoestraich.blogspot.com

    ResponderExcluir
    Respostas
    1. Dinada flor...
      Que bom que gostou do tuto e do lay... Volte sempre tá?

      Excluir
  9. Gostei bastante do tutorial, super legal *-*

    Quando puder dá uma passadinha no meu blog, você e seus leitores serão recebidos de braços abertos por mim.

    http://sorriso-jovem.blogspot.com.br/

    Beijinhos de Morango!

    ResponderExcluir
    Respostas
    1. Que om que gostou lindinha... Volte sempre viu? :D

      Excluir
  10. Menina adorei esse tutorial!!!


    Lindo o seu Blog!


    Quem me seguir sigo de volta, basta avisar nos comentários.

    Meu twitter
    Me siga no Twitter.

    Blog Ousadia e Criatividade

    ResponderExcluir
  11. Super útil,obg!
    www.dudinhacupcake.blogspot.com

    ResponderExcluir
  12. Amei... muito legal!
    beijos
    http://esmalteetudo.blogspot.com.br/

    ResponderExcluir
  13. Adorei o o tutorial, estava atras dele a tempos, e hoje achei aqui.

    Obrigada por compartilhar.

    Abraços e carinhos
    My

    ResponderExcluir
    Respostas
    1. Eeeeeeeeba!! Que bom que conseguimos te ajudar...
      Fico feliz..
      Beijos!!

      Excluir
  14. Olá, tirei as suas dicas e criei esse efeito no meu site, no entanto gostaria que quando acabasse a passagem de imagens, começasse logo outra vez o slide, porque fica um espaço bem grande entre a saida da ultima foto e aentrada da primeira.
    Como posso fazer?
    http://www.pechinchaspt.com/

    Obrigado.

    ResponderExcluir
  15. Adorei o tuto. Porém, queria aprender a fazer esté seu gadget de "afiliados" redodas. pode ensinar?

    laah Ribeiro
    literaryheartt.blogspot.com.br

    ResponderExcluir

Olá! Sinta-se à vontade para comentar :P
- Todos os comentários serão aceitos. Mas lembre-se: Palavrões, chingamentos, comentários como "Seguindo, segue de volta?" deixam feia a sua própria imagem,
- Temos páginas explicando nosso sistema de parceria, afiliação e divulgação e também alguns de nossos conteúdos. Não deixe de olhar!
- Qualquer assunto mais sério nos envie um email que está na página "contato"
- Deixe o link de seu blog para que possamos retribuir ^^

Beijos e Volte Sempre ^^