Como colocar banners ou texto com efeito marquee (rolante) no blog

Dia desses, no Instagram, uma amiga e leitora do blog me perguntou se havia como colocar banners de editoras parceiras na lateral do blog, mas em movimento.
Lembrei desse recurso bem antigo mas que funciona sem problemas desde sempre e me dei conta que nunca havia ensinado ele aqui no blog.
Estou falando do efeito marquee, que movimenta texto ou imagem em diferentes direções e que pode ser bem útil para exibir banners de parceiros, como no meu exemplo abaixo:


Demonstração do tutorial


O código é bem simples, você instala em qualquer template (menos os de visualizações dinâmicas do Blogger) e bastam algumas edições pra ficar do jeito que você quiser, com as imagens que precisar, text alt e link para onde você direcionar.
Vamos aprender?
Comece copiando o código:


Copiar o código

Após copiar o código cole-o em um bloco de notas ou crie um post de rascunho em seu blog para editar esse código.
Vamos entender cada parte do código, em especial as que marquei em letras maiúsculas.
O código que você vai copiar na página de códigos é este:

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

<a href="LINK AQUI" target="_blank">
<img border="0" alt="NOME DA IMAGEM AQUI" title="NOME DA IMAGEM AQUI"  src="ENDEREÇO URL DA IMAGEM AQUI" width="250" height="auto" alt="NOME DA IMAGEM AQUI" /></a>

<br /><br />

<a href="LINK AQUI" target="_blank">
<img border="0" alt="NOME DA IMAGEM AQUI" title="NOME DA IMAGEM AQUI"  src="ENDEREÇO URL DA IMAGEM AQUI" width="250" height="auto" alt="NOME DA IMAGEM AQUI" /></a>

<br /><br />

<a href="LINK AQUI" target="_blank">
<img border="0" alt="NOME DA IMAGEM AQUI" title="NOME DA IMAGEM AQUI"  src="ENDEREÇO URL DA IMAGEM AQUI" width="250" height="auto" alt="NOME DA IMAGEM AQUI" /></a>

<br /><br />

<a href="LINK AQUI" target="_blank">
<img border="0" alt="NOME DA IMAGEM AQUI" title="NOME DA IMAGEM AQUI"  src="ENDEREÇO URL DA IMAGEM AQUI" width="250" height="auto" alt="NOME DA IMAGEM AQUI" /></a>

</marquee> 


Observe a primeira linha do código:

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

1- O comando up marcado em azul quer dizer que os banners vão rolar pra cima.
Se quiser que rolem pra baixo troque up por down;

1a- Caso queira a rolagem horizontal use o segundo código que disponibilizei na página de códigos.para ir para a esquerda troque por left e para ir para a direita troque por right;

1b- Caso queira inserir apenas texto e não imagem use o terceiro código que disponibilizei na página de códigos.

2- O número 6 marcado em vermelho comanda a velocidade do marquee. Altere para mais ou para menos, se desejar;


Agora observe esse trecho:

<a href="LINK AQUI" target="_blank">
<img border="0" alt="NOME DA IMAGEM AQUI" title="NOME DA IMAGEM AQUI"  src="ENDEREÇO URL DA IMAGEM AQUI" width="250" height="auto" alt="NOME DA IMAGEM AQUI" /></a>

3-  Onde está LINK AQUI coloque o endereço url para onde o banner direciona;
Em NOME DA IMAGEM defina o text alt, aquele que aparecerá ao passar o mouse sobre a imagem. Mantenha o mesmo text alt nas 3 ocorrencias marcadas no código;
Em ENDEREÇO URL DA IMAGEM AQUI coloque, claro, o endereço da imagem do banner.
Ao final ensino como hospedar imagens usando o próprio Blogger.

4- O comando width define a largura da imagem. Altere para o tamanho da sua imagem ou a largura da sua sidebar. Não precisa mexer em height, ele vai se auto ajustar.

5- Para acrescentar mais banners repita o código que expliquei acima, sempre adicionando-o antes do fechamento da tag </marquee>.

Código editado? Colocou os endereços das suas imagens/banners e os links para onde cada uma delas conduz? Inseriu title e text alt?
Vá ao painel de seu blog e clique na aba Layout.
A seguir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixinha que expandir cole o código já editado.
Salve, arraste para onde deseja que fique e salve a alteração.
E é só isso.
Simples de verdade!

Dica bônus: como hospedar imagens usando o próprio Blogger

Faça assim: crie um post de rascunho em seu blog ou crie um blog de testes só pra isso.
Abra o editor de postagens (ali onde você escreve seus posts), carregue as imagens que precisa hospedar, deixe-as em Tamanho original.
Pare o mouse sobre cada uma delas e clique sobre a imagem com o botão direito do mouse.
Selecione (no Chrome) Copiar endereço do link.
Essa é a url hospedada de sua imagem.
Os posts de rascunho podem ser apagados depois, as imagens permanecem.
Elas só desaparecerão se sua conta for excluída.