09/04/2010

Aprenda a criar textos e imagens em “scroll” para animar o seu blog

 scroll

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.

Visual Dicas - A sua fonte de informação!

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="">

<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

<marquee direction="right" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">

Visual Dicas – Dicas de tudo o que rola na net

</marquee>

Visual Dicas – Dicas de tudo o que rola na net

2) Omitindo o comando que para a rolagem quando posicionado o cursor

<marquee direction="left" behavior="scroll" scrollamount="4">

Visual Dicas – Dicas de tudo o que rola na net

</marquee>

Visual Dicas – Dicas de tudo o que rola na net

3) Definindo cor do texto (veja tabela de cores HTML)
 

<marquee direction="right" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">

<font color="#ff8000"><strong>

Visual Dicas – Dicas de tudo o que rola na net

</strong></font></marquee>

Visual Dicas – Dicas de tudo o que rola na net

4) Colocando borda em torno do texto utilizando uma tabela (defina o tamanho da tabela em <table width=”xxx” heigt=”YYY”>)
 

<center>
<table width="500" heigth="40" valign="middle" border="1">
<tbody>
<tr>
<td>

<marquee> Visual Dicas – a sua fonte de informação </marquee>

</td></tr></tbody></table></center>

Visual Dicas – a sua fonte de informação
 
5) Rolagem vertical
 

<marquee heigth="250" widht="250" direction="up" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">

<center>

<p>Visual Dicas</p>

<p>Visual Dicas </p>

<p>Visual Dicas </p>

<p>Visual Dicas </p>

</center></marquee>

Visual Dicas

Visual Dicas

Visual Dicas

Visual Dicas

 
 

Criando imagens em “scroll”

                                  
Da mesma forma que para texto, para criar imagens rolando na tela, basta  copiar o código HTML abaixo e colar no seu editor de texto (HTML ou Código-fonte) ou em um “gadget” 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="">

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

Definição dos parâmetros de ajuste da(s) imagens(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)

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…

Exemplos práticos
 
 1) Imagens com links na horizontal

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

 
 2) Imagens com links e texto alternativo (texto aparece quando você posiciona o cursor sobre a imagem) na vertical

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

 
Visual Dicas Visual Dicas Visual Dicas
 
Agora com as dicas acima, você poderá combinar comandos e criar “scrolls” de várias formas, dando uma maior dinâmica no seu blog. Mas cuidado, não exagere, muito movimento pode dispersar a leitura dos seus artigos, além de que, não ficar muito bem esteticamente…

Abaixo, veja a combinação que fiz com texto e imagens….

Visual Dicas - Dicas de tudo o que rola na net!
Está no seu momento de descanso né? Entao clique aqui!LinkLog Visual DicasUêba - Os Melhores LinksColmeia: O melhor dos blogs Link do Pinguim | Os melhores conteúdos da blogosfera brasileira em um unico lugar

até mais… [ byALF ]




19 comentários:

  1. Olá.
    Achei 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

    ResponderExcluir
  2. Olá Xande e obrigado pela visita.

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

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

    ResponderExcluir
  4. gostaria 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

    ResponderExcluir
  5. Olá, seu blog é muito bom e útil! Gostaria de saber como faço para colocar um link no texto em scroll...
    sem 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

    ResponderExcluir
  6. Renato,

    Use a mesma lógica das imagens...

    ...substitua a tag img pelo TEXTO que deseja rolar...

    espero ter ajudado...

    ResponderExcluir
  7. Gostei muito do post, muito mesmo, tudo bem explicado, assim consegui muito rápido colocar tudo na prática... veja você mesmo:
    http://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?

    ResponderExcluir
  8. Olá Frank,

    Vi 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..

    ResponderExcluir
  9. Frank... uma dica para você... as imagens de seu site.. quando clicamos nela.. direciona para outra página,isso acaba ficando ruim...

    coloque um script para quando clicar nela fazer ampliá-la na tela ou abrir um popup ...

    se tiver duvidas me procure..

    www.rodrigovilhena.com

    ResponderExcluir
  10. Olá!
    Fico 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

    ResponderExcluir
  11. muito bom seu blogo como faço para colocar o menu encima? podem me dar uma dica?

    ResponderExcluir
  12. Muito Obrigado pelas dicas são muito uteis.

    ResponderExcluir
  13. Como eliminar aquele espaço e fazer os banners rolarem em looping, sem o espaço? (veja exmeplo www.stum.com.br)

    ResponderExcluir
  14. Excelente Post. Me ajudou muito no TCC. PARABÉNS!

    ResponderExcluir
  15. deu 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 ....

    ResponderExcluir
  16. O 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...

    ResponderExcluir
  17. Bom 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