Caixinhas Rollover

Sabe essas caixinhas com conteúdo, que deslizam ou para os lados, para cima e para baixo?

COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS

Então, vou ensinar aqui, como você pode colocar em seu blog ou site.
Prestando atenção, todos poderão colocar estas caixinhas, e com o visual que assim desejar, e que combinar com seu blog.

Vamos ao tutorial!!!

O Código principal desta caixinha é este abaixo.

<br /><center><table border="TAMANHO DE ESPESSURA DE BORDA" bordercolor="COR DE BORDA" width="TAMANHO DE LARGURA" cellspacing="4" background="IMAGEM DE FUNDO" height="TAMANHO DE ALTURA"><br /><tr><br /><td valign="POSIÇÃO DE ALINHAMENTO" bgcolor="COR DE FUNDO"><br /><marquee direction="POSIÇÃO DE DIREÇÃO" onmouseover="this.stop()" width="TAMANHO DE LARGURA" scrollamount="TEMPO DE PASSAGEM" onmouseout="this.start()" height="TAMANHO DE ALTURA">COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS</marquee> <br /></td></tr><br /></table></center><br /><br /></b><br /><br />

Agora irei colocar oque você pode modificar neste código, que é uma maneira de personalizar com cada estilo de blog.

Width - tamanho de largura
Height - tamanho de altura

td valign - são a posição onde fica o texto ou imagens, existe 5 tipos de posição, é só trocar de maneira q adeque a seu blog, ou site.
bottom: parte de baixo
top: parte de cima
left: à esquerda
right: à direita
center: centralizado


bordercolor - Cor de borda

bgcolor - Cor de fundo

marquee direction - direção onde correrão seus textos ou imagens, existe 4 tipos de posição, é só trocar de maneira que adeque a seu blog, ou site.
left: à esquerda
right: à direita
up: para cima
down: para baixo


scrollamount - Tempo de percurso, que as imagens irão passar, é só trocar os numeros de maneira que adeque a seu blog, ou site.


Pronto!
Fazendo as modificações, você deixa a caixinha com a cara de seu blog.

Lembrando que este código, só ficará legal, com as modificações corretas de seu espaço no blog. Ou seja, procure observar o tamanho de uma coluna onde você irá colocar a caixinha e faça as modificações necessárias.

Agora, vou colocar abaixo, os códigos prontos, só basta trocar as cores, tamanhos e seus textos ou imagens.

CÓDIGOS PRONTOS

--Rolagem Para a Esquerda--

COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS

<br /><center><table border="2" bordercolor="#000000" width="150" cellspacing="4" background="IMAGEM DE FUNDO" height="200"><br /><tr><br /><td valign="center" bgcolor="#D2D3F2"><br /><marquee direction="left" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="200">COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS</marquee> <br /></td></tr><br /></table></center><br /><br /></b><br /><br />

--Rolagem Para a Direita--

COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS

<br /><center><table border="2" bordercolor="#000000" width="150" cellspacing="4" background="IMAGEM DE FUNDO" height="200"><br /><tr><br /><td valign="center" bgcolor="#D2D3F2"><br /><marquee direction="right" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="200">COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS</marquee> <br /></td></tr><br /></table></center><br /><br /></b><br /><br />

--Rolagem Para Cima--

COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS

<br /><center><table border="2" bordercolor="#000000" width="150" cellspacing="4" background="IMAGEM DE FUNDO" height="200"><br /><tr><br /><td valign="center" bgcolor="#D2D3F2"><br /><marquee direction="up" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="200">COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS</marquee> <br /></td></tr><br /></table></center><br /><br /><br /></b><br /><br />

--Rolagem Para Baixo--

COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS

<br /><center><table border="2" bordercolor="#000000" width="150" cellspacing="4" background="IMAGEM DE FUNDO" height="200"><br /><tr><br /><td valign="center" bgcolor="#D2D3F2"><br /><marquee direction="down" onmouseover="this.stop()" width="150" scrollamount="4" onmouseout="this.start()" height="200">COLOQUE AQUI O QUE DESEJAR, TEXTO OU IMAGENS</marquee> <br /></td></tr><br /></table></center><br /><br /></b><br /><br />

Espero ter ajudado um pouquinho!
Quero só ressaltar uma coisa...Fiz este tutorial a pedido de uma amiga querida, (Cris, espero ter ajudado!).
Porém, Amados, eu não sei quase nada de HTML, ou códigos em JavaScript, ou seja, neste tutorial, só está aquilo que eu realmente sei. Coloquei aqui tudo oque eu sei sobre essas caixinhas.
E só com isso que poderei ajudar.
Como o Scraps Gospel não é um blog especifico de ajuda, peço que caso não entendam este tutorial, procurem um site e blog de ajuda para Blogs...
Agradeço desde já!
E espero ter ajudado de alguma forma!

Graça e Paz seja contigo!
Beijos...
Rê.