Criando uma rolagem de banners

Parcerias sempre são boas escolhas, mas com trocas de links de texto. Trocas de banners sempre poluem o layout, ainda mais quando são muitos parceiros.
A melhor opção para ‘despoluir’ o layout seria tirar todos os banners e trocar por links de texto, mas tem gente que insiste em colocar banners. Então, a solução seria criar uma rolagem com todos os banners, sem poluir o layout, usando a marquee. E é isso que iremos fazer. A nossa barra de parceiros ficará parecida com esta:

Então, vamos lá:

1. Crie um gadget do tipo “HTML/Javascript” e coloque este código (ao lado de cada linha tem a explicação. Você pode excluir o que fica entre os /* e os */, inclusive os /* e os */):

<style>
#roll, #roll marquee{ /*Criamos um estilo para o elemento “Roll” e definimos também a sua marquee*/
overflow:hidden; /*Escondemos a barra de scroll, caso o navegador “ache” que seja necessário tê-la*/
width:180px;/*A largura da barra, baseada nos 200px, o tamanho padrão*/
height:300px; /*limitamos a altura, em pixels*/
margin:5px auto 5px auto;/*Definimos a margem, para que a nossa barra fique centralizada*/
text-align:center;/*centralizamos as imagens da barra*/
}
#roll a img{
border:1px solid #000000; /*borda preta de 1px nos links*/
}
#roll img{
padding:2px 2px 2px 2px; /*Criamos uma borda falsa*/
text-align:center; /*Alinhamos as imagens ao centro, caso o browser não interprete o resto*/
margin:2px auto 2px auto; /*Distanciamos as imagens uma da outra*/
background:#CCCCCC;/*Colocamos uma cor de fundo, caso a imagem não carregue*/
}
</style>

2- Ainda sem salvar, coloque isso após o </style>:

<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
<!-- Aqui você coloca o código dos banners -->
</marquee>
</div>

Salve e veja como ficou. Caso não esteja na velocidade que você queira, modifique o ‘scrollamount’ e o ‘scrolldelay’, sendo que quanto maior o número, mais lento.