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

 

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

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

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>

 

 

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!

até mais… [ byALF ]