Texto deslizando

Coloque aqui seu texto! ! !

Texto rolante, texto deslizando, texto móvel, subindo, fazer uma faixa de texto... Existem dezenas de modos de descrever o texto que se move na pagina, mas o código para fazer isso é o marquee.
O texto acima foi feito com o seguinte código:

<marquee behavior="alternate" width="400" height="50" scrolldelay="2" scrollamount="2" direction="left" onmouseover="this.stop()" onmouseout="this.start()">Coloque aqui seu texto! ! !</marquee>

Agora vamos entender como isso funciona:

behavior="alternate" o texto fica indo e voltando.
behavior="scroll" é o modo normal, o texto entra por um lado e sai pelo outro
behavior="slide" o texto entra e para quando chega ao final da linha.

scrolldelay="2"
scrollamount="2"

direction="left" é a direção que o texto se desloca, pode ser left(esquerda), right(direita), up(para cima) down(para baixo)

width="400" isso é a largura que o texto percorerá. Pode ser qualquer valor e para que ocupe tudo o espaço disponivel simplesmente apague essa parte do código.
height="50" o mesmo que width, mas esse controla a largura.

onMouseOver=this.stop() onMouseOut=this.start() e finalmente esta parte do código que faz com que o texto pare de movimentar quando o mouse está sobre ele.

54 comentários:

  1. Meus parabénsssssss!
    Tudo aqui é maravilhoso estou lendo cada detalhe e fazendo uso é claro..

    ResponderExcluir
  2. Os efeitos MARQUEE, se usados com abuso, provavelmente vão irritar o leitor de seu blog, e faze-lo sair da página mais rápido do que deseja... Algo interessante que não foi incluido na postagem acima é inserir o código loop="1". No lugar de 1 deixe o número de vezes que você quer que o texto ou imagem com MARQUEE passe. Assim você pode fazer a mensagem passar uma vez apenas para não incomodar o leitor. Para conseguir uma mensagem de boas-vindas passando no lugar onde fica a navbar de seu blog vá em Layout-->Editar HTML-->Cole o código da "Marquee" desejada entre a tag /head e a /b:skin. Caso deseje, inclua o loop="1". Deste modo, enquanto sua página carrega, o leitor recebe a mensagem de boas-vindas passando no alto, e quando carregar a mensagem não mais passará. Dicas interessantes a respeito são dadas no site em inglês Tips-for-new-bloggers.

    Cumprimentos!

    ResponderExcluir
  3. Olá Fabiano...queria saber como fazer para deixar imagens no lugar do texto, tipo, meus selos que recebo, awards...esses tipos...tem como? Rolantes....

    ResponderExcluir
  4. veja aqui sobre banners deslizando

    http://www.dicasparablogs.com.br/2008/03/banners-deslizando.html


    mas o funcionamento é o mesmo só precisa trocar o texto pelo código das imagens

    ResponderExcluir
  5. Ola,fabiano...Queria saber se da para fazer o texto só andar para a direita e não fazer o vai e volta...

    ResponderExcluir
  6. é só trocar alternate por scroll, veja o inicio da postagem explicando sobre isso

    ResponderExcluir
  7. Fabiano!
    Quero agradecer de coração este teu trabalho! Mais uma ferramenta que uso daqui em meu blog... ficou show de bola!
    Eu que não sabia quase nada sobre códigos e afins... agora já sei um bocadito.
    Valeu mesmo!!!
    Abração.

    ResponderExcluir
  8. Eu troquei a frase "digite aqui seu texto" por varios codigos, quantos posts existe no blog e etc... se quiserem dar uma olhada: http://smasher-blog.blogspot.com/

    Obrigado pelas dicas...
    Dicasparablogs cada vez mais melhorando as vidas dos bloggueiros :P

    ResponderExcluir
  9. Obrigada pela dica!
    A frase ficou bem legal no meu blog...Valeu!

    ResponderExcluir
  10. Aonde eu devo colar esse código marquee?
    Obrigado.
    Junior.

    ResponderExcluir
  11. Oi Fabiano. É o seguinte: eu queria o texto deslizando entre o cabeçalho e a barra ou logo após a barra, mas nestes campos não tem a opção de adicionar um gadget, como há na barra lateral e no roda-pé. Como faço?
    Obrigado.

    ResponderExcluir
  12. depois que adicionar o gadget arraste até o lugar que deseja

    ResponderExcluir
  13. Fabiano... Faltou a opção "deslizar para cima"
    Qual é o código para deslizar para cima?
    Beijinho!

    ResponderExcluir
  14. para fazer o texto deslizar para cima apague o direction="left" e coloque direction="up"

    ResponderExcluir
  15. Parabéns meu querido, ótimas dicas venho conhecendo através de você.
    Ótimo trabalho!

    ResponderExcluir
  16. Caro Fabiano, tem algum problema em colocar o texto deslizante numa gadget em cima do nome da postagem?
    Tipo, não vai afetar meu posicionamento no mecanismos de pesquisa do google ou atrapalhar nas indexações do google em minhas novas postagens?

    ResponderExcluir
  17. Roberto
    você pode colocar o gadget com o texto deslizante onde quiser...

    mas para colocar esse feito no titulo da postagem será fazer adaptações para ver se realmente funciona... ainda não tenho um tutorial sobre o assunto

    ResponderExcluir
  18. Obrigado Fabiano, vc esta sempre ajudando o pessoal e isso adimiro muito em vc, abraços.

    ResponderExcluir
  19. FABIANO- O CODIGO DO TEXTO DESLIZANDO TA TRAVADO,SO FUNCIONA NO MODO SCROLL,OS OUTROS TAO PARADO,PQ SERA,

    ResponderExcluir
  20. você deve ter alterado algo errado no código ou apagado algum sinal " por exemplo...
    ele funciona em todas as versões... mas pode demorar um pouco para carregar(iniciar a rolagem)

    ResponderExcluir
  21. BLZA-SO QUE FUNCIONAVA O TEXTO DESLIZANDO,E PARO DE VEZ TODOS QUE EU COLOQUEI SEM EU MUDAR NADA ,ATE O TEU EXEMPLO AI ACIMA TRAVO,OLHA AI,SE PUDER AJUDAR MUITO OBRIGADO ABRAÇO
    EU VI OUTROS QUE USAVAME ESSE CODIGO E NO DELES TA PARADO TB,COMO DISSE,SO SCROLL FUNCIONA

    ResponderExcluir
  22. se usou em varias partes do blog talvez esse seja o motivo do erro, quando mais códigos diferente mais chances da pagina dar erro ou travar...

    ResponderExcluir
  23. Fabiano tem como trocar a cor do texto e o tamanho da fonte? no meu blog ficou com letra branca e eu queria um pouco maior do que esta agora, desde já agradeço!

    ResponderExcluir
  24. jessica
    esse código não altera a cor das letras do seu blog... ou seja ele segue a formação como se fosse um texto normal, mas pode colocar assim o código e fazer sua formataçao

    Como Formatar o Texto do Blog

    <div style="font-family:'Comic Sans MS', cursive; font-size:16pt; color:#00F"><marquee behavior="alternate" width="400" height="50" scrolldelay="2" scrollamount="2" direction="left" onmouseover="this.stop()" onmouseout="this.start()">Coloque aqui seu texto! ! !</marquee></div>

    ResponderExcluir
  25. Valeu parceiro, você estar de parabéns pelo seu trabalho. Para iniciantes como eu você é muito importante. Você não sabe o quanto nos ajuda ter pessoas assim para nos ensinar. Obrigado.

    ResponderExcluir
  26. Minha pergunta não tem nada a ver com a dica.
    mais eu queria saber como por um player'zinho'
    do Windows Media Player no meu blog
    As únicas coisas que eu sei é que você bota a musica do seu computador pelo Player do computador e a musica sai no player do blog.
    Como quando eu colo o código e aperto PLAY
    fala que precisa de um Plugin mais eu não sei achar...Me ajuda?

    ResponderExcluir
  27. geralmente os sites de musica já fornecem o código completo sem precisar instalar nada no blog

    se aparece algum aviso de plugin no seu blog por causa da musica é melhor achar a musica em outro site.

    a maioria dos visitantes vai sair do seu blog quando receber um aviso de plugin

    ResponderExcluir
  28. Ótimas dicas para blogueiros, Fabiano Roberto. Tenho uma pergunta: o texto deslizante tem um limite de tamanho? Posso colocar uma relação de nomes de personalidades homenageando-as, por exemplo?

    ResponderExcluir
  29. Aluizio Moreira
    acho que não tem limite

    ResponderExcluir
  30. Eu coloquei um Link. Como eu faço pra que apareça o efeito quando as pessoas passam o mouse por cima do Link?

    Ex: Quando eu passo o mouse em um de seus marcadores, aparece um efeito indicando qual Link que irei clicar...

    ResponderExcluir
  31. Funcionou perfeitamente, mas como eu faço isso com os marcadores?? Pra que quando clicarem no nome os marcadores deslizem pra baixo?

    ResponderExcluir
  32. Eu vi em um blog, do mesmo jeito que está ai, só que com postagens populares se eu nao me engano. Onde acho isso?

    ResponderExcluir
  33. Rogério Fernandes17 de abril de 2013 08:49

    Prezado Fabiano,

    Como faço para colocar texto rolante sem perder a configuração:
    Por exemplo:

    Santos x São Paulo
    Palmeiras x Corinthians
    Flamengo x Vasco

    quando coloco em html, ele aparece desconfigurado, um do lado do outro, mesmo colocando "up"

    ResponderExcluir
  34. Rogério coloque um < br / > para mudar de linha, assim:

    Santos x São Paulo< br / >
    Palmeiras x Corinthians< br / >
    Flamengo x Vasco


    no ultimo item da lista não há necessidade de colocar

    ResponderExcluir
  35. Como eu Faço para que o texto não pare de rolar... tipo, um texto atrás do outro saindo de um lado e aparecendo no outo lado sem intervalos de texto?

    ResponderExcluir
  36. para deixar o teste deslizando sem parar o código é o
    behavior="scroll"

    ResponderExcluir
  37. Desculpe Fabiano, mais você não entendeu a minha duvida.

    Eu quero saber, se tem como fazer com que este teste fique passando (Entrando em um lado e saído no outro) emendado as frases de inicio com o final, passando sem ter intervalo.

    É que colei este teste no cabeçalho do meu Blog, mais o texto só inicia novamente depois que as outras palavras sumiram totalmente no outro lado.

    Tem como colocar ele (tipo um circulo imaginário) onde as palavras passam sem intervalos de tempo... sem ter que esperar as palavras sumir por completo para aparecer novamente?

    ResponderExcluir
  38. acho que não tem como retirar esse intervalo que aparece entre o final e o recomeço da lista de frases

    ResponderExcluir
  39. Fabiano...
    Como faço para o texto movimentar mais rápido?

    ResponderExcluir
  40. Caro Fabiano, como faço pra colocar títulos de postagens deslizantes, de modo que, quando colocar o mouse sobre o título ele para, em seguida eu clico e ele me manda para o texto correspondente àquele título, isto é, pra página onde ele se encontra. Pode me ajudar? Grato

    ResponderExcluir
    Respostas
    1. é o mesmo código de qualquer link, por exemplo:

      < a href='http://www.dicasparablogs.com.br/2007/05/texto-deslizando.html' >Texto deslizando< /a >

      coloque este código no lugar do texto deslizante e deve funcionar normalmente

      Excluir
    2. Valeu, Fabiano, vou tentar. Abração

      Excluir
  41. alguém pode me ajudar , quero colocar um gerador de nicks personalizado no meu site HELPPP

    ResponderExcluir
  42. infelizmente não tenho código para gerador de nicks

    ResponderExcluir