Como colocar banners ou texto com efeito marquee (rolante) no blog - * Blog Elaine Gaspareto *

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

Publicado em 02/08/2018

Tempo de leitura:

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.






2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Esse tutorial também serve para adicionar vídeos do youtube?

    ResponderExcluir
    Respostas
    1. Não testei mas em tese daria sim, teria que gerar o código iframe do vídeo e inserir no lugar onde está o código de cada imagem...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…