Crie textos e imagens em “Scroll”
Para inserir textos ou imagens em “scroll”, ou seja, rolando na tela, o Visual Dicas irá apresentar algumas dicas que ajudaram você a criar estes elementos no seu blog, podendo ser utilizados em suas postagens ou como “widgets” no layout.
Textos e imagens em “scroll” são muito úteis para reduzir espaços no blog, quando você tem uma quantidade grande de banners, ou imagens que deseja apresentar. Também é um recurso excelente para chamar a atenção do leitor colocando um texto em destaque.
Criando textos em “scroll”
Para criar um texto rolando na tela, basta você copiar o código HTML abaixo e colar no seu editor de texto (HTML ou Código-fonte) ou em um “gadget” ou módulo do seu blog. Depois é só substituir os parâmetros assinalados em laranja, de acordo com a sua necessidade e criatividade.
<marquee heigth="yyy" widht="xxx" direction="direção" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="nº">
<posição>
<p>Texto 1</p>
<p>Texto 2</p>
<p>Texto n</p>
</posição></marquee>
Definição dos parâmetros de ajuste do(s) texto(s) em scroll:
yyy: Altura do espaço de rolagem (em pixels)
xxx: Largura do espaço de rolagem (em pixels)
direção: define a direção de rolagem
up – de baixo para cima
down – de cima para baixo
left – da direita para a esquerda
right – da esquerda para a direita
nº: Velocidade de rolagem (quanto maior o número maior a velocidade)
<posição>: Define a posição inicial do(s) texto(s)
center – centralizado
left – à esquerda
right – à direita
Texto 1, Texto 2, Texto n: Texto que você quer colocar em “scroll”
</posição>: Utilize center, left ou right como posição inicial
Observação:
O comando onmouseover="this.stop()" onmouseout="this.start()" define que quando você posiciona o cursor do mouse sobre o(s) texto(s) ou imagens eles param de rolar. Muito útil quando utilizado com links…
Exemplos práticos
1) Omitindo dimensões do espaço de rolagem e posição
|
2) Omitindo o comando que para a rolagem quando posicionado o cursor
|
|
|
|
Criando imagens em “scroll”
<marquee heigth="yyy" widht="xxx" direction="direção" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="nº">
<a href="link 1" target="_blank">
<img border ="0" src="URL da imagem 1"></a>
<a href="link 2” target=”_blank”>
<img border ="0" src="URL da imagem 2"></a>
</marquee>
yyy: Altura do espaço de rolagem (em pixels)
xxx: Largura do espaço de rolagem (em pixels)
direção: define a direção de rolagem
up – de baixo para cima
down – de cima para baixo
left – da direita para a esquerda
right – da esquerda para a direita
nº: Velocidade de rolagem (quanto maior o número maior a velocidade)
Link 1, Link 2, etc: Definia o link que você da página que desejar quando a imagem for clicada
URL da imagem 1, URL da imagem 2, etc: Definia o endereço URL da imagem a ser mostrada
Observação:
O comando onmouseover="this.stop()" onmouseout="this.start()" define que quando você posiciona o cursor do mouse sobre o(s) texto(s) ou imagens eles param de rolar. Muito útil quando utilizado com links…
<marquee heigth="480" widht="480" direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border ="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border ="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border ="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
</marquee>
<marquee heigth="" widht="" direction="down" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"><center>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border="0" alt="Visual Dicas" title="Visual Dicas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border ="0" alt="Visual Dicas" title="Visual Dicas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
<a href="http://visualdicas.blogspot.com" target="_blank">
<img border ="0" alt="Visual Dicas" title="Visual Dicas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOvnSEqOKwoZITf27EECKEHOguAnn3teh2ouOAF_vrhJLYSZ7w4GcHYstAZfZKwzGFJC2czeQKmo5-rfnZNg5DzZpmgapNIGG8keYJUk7c53VmyxArRicGqhG2hZ1vcrr_OcCbmauz2ahI/s1600-r/Visual+Dicas+Super+Logo2.png"></a>
</center></marquee>
até mais… [ byALF ]
Olá.
ResponderExcluirAchei muito útil seu script.
Apenas gostaria de saber se é possivel remover o espaço em branco entre o final e o inicio da rolagem na vertical?
Abraço
Olá Xande e obrigado pela visita.
ResponderExcluirAcontece que a opção "scroll" para o atributo "behavior" faz com que o texto passe continuamente na direção especificada (vertical no caso,) entrando por um lado e saindo totalmente pelo outro, deixando espaços em branco no final.
O que você pode fazer para contornar isto, e deixar o texto todo aparente é substituir behavior="scroll" por behavior="alternate" que faz com que o texto se alterne para cima e para baixo ou vice-versa.
E não esqueça de deixar a altura do marquee (heigth) menor que o texto digitado...
Espero que tenha ajudado!
Este comentário foi removido pelo autor.
ResponderExcluirgostaria de saber se tem como eu por uma scrip desse com imagens rolando de baixo para cima e 1 por uma... por favor me mande um e-mail.. caiobarros2@hotmail.com
ResponderExcluirOlá, seu blog é muito bom e útil! Gostaria de saber como faço para colocar um link no texto em scroll...
ResponderExcluirsem colocar a imagem...
Tenho um blog de notícias e gostaria de colocar algumas em scroll...
Se puder me mandar um e-mail avisando da resposta, eu agradeço... Abraço
renatocesarribeiro@ig.com.br
http://ocaminhantenoturno.blogspot.com
Renato,
ResponderExcluirUse a mesma lógica das imagens...
...substitua a tag img pelo TEXTO que deseja rolar...
espero ter ajudado...
Gostei muito do post, muito mesmo, tudo bem explicado, assim consegui muito rápido colocar tudo na prática... veja você mesmo:
ResponderExcluirhttp://jericoacoara-brasil.blogspot.com/2011/05/jericoacoara-pousadas-hotel.html
Fiquei tão feliz, que resolvi colocar logo seu Banner no meu Blog, muito obrigado.
somente tenho mais uma coisa de resolver, queria a caixa maior, e já coloquei varias opções no: heigth="yyy", de 500 até 1000, mas o tamanho não muda... sempre fica o mesmo que vc pode ver no Blog. Também a velocidade tentei diminuir, atualmente é “1”, mas acho ainda muito rápido...
você pode me ajudar resolver isso?
Olá Frank,
ResponderExcluirVi o seu blog e confesso que ficou muito bom o scroll adicionado. Não vejo motivos para você alterar. Ficou ótimo mesmo...
Se desejar obter mais conhecimentos em HTML, recomendo o curso http://www.iped.com.br/cursos/visualdicas/programacao/html-gratis
Abraços..
Frank... uma dica para você... as imagens de seu site.. quando clicamos nela.. direciona para outra página,isso acaba ficando ruim...
ResponderExcluircoloque um script para quando clicar nela fazer ampliá-la na tela ou abrir um popup ...
se tiver duvidas me procure..
www.rodrigovilhena.com
Olá!
ResponderExcluirFico grato pela dica, mas, nao estou conseguindo deixar no tamanho ideal, parece nao aceitar nenhum número, ou seja, qualquer numero que coloco nao altera na altura ou largura, pela largura ate gostei mas, to achando alto, o q fazer? obrigado!
http://apbms.blogspot.com
muito bom seu blogo como faço para colocar o menu encima? podem me dar uma dica?
ResponderExcluirValeu pela dica!
ResponderExcluirMuito Obrigado pelas dicas são muito uteis.
ResponderExcluirComo eliminar aquele espaço e fazer os banners rolarem em looping, sem o espaço? (veja exmeplo www.stum.com.br)
ResponderExcluirVlw .. me ajudou bastante ;)
ResponderExcluirExcelente Post. Me ajudou muito no TCC. PARABÉNS!
ResponderExcluirdeu trabalho pra reencontrar esse post achei que nao ia conseguir ...to desde o ano passado para fazerum marque 2 marques no meu blog mas nao tive tempo ....
ResponderExcluirO script html funciona porem rola icone e nao a imagem. como fazer para apárecer imagem ?? ja criei link em varios sites e nao aparece a imagem...
ResponderExcluirBom dia nao aparece imagens apenas icones ou o link que foi colocado. tem como me ajudar e onde hospedar as imagens para que link fhncione.
ResponderExcluir