02/09/2021

Como criar banners rotativos no blogger

Como criar banners rotativos no blogger
 
Como criar banners rotativos no blogger
Um código muito interessante é este para colocar banners movendo-se de um lado para outro em uma linha horizontal. Para isso nós utilizamos o fabuloso MARQUEE que tem esta propriedade.


Nem sempre temos espaço para colocar vários banners no blog e, com esse código podemos resolver a situação de uma forma simples.


Na verdade, Marquee também funciona com textos. Você escreve uma palavra ou frase que irá se movimentar de um lado para outro. Vamos mostrar primeiro como funciona com textos.

Esse código é muito bom para levar uma mensagem ao visitante. O texto fica andando na horizontal em apenas uma linha, por isso não ocupa muito espaço.

Para coloca-lo em seu blog é só copiar o código abaixo e colar em um gadget html(java) do blogger ou no editor de postagens, na área html.

Veja como fica.

Muito obrigado por entrar nesse blog! Não deixe de comentar!

Aqui está o código. É só copiar.

-----------------------------------------------------------------
<marquee scrolldelay="91" scrollamount="7">Muito obrigado por entrar nesse blog! Não deixe de comentar!</marquee>
-----------------------------------------------------------------

Mude o texto substituindo a parte vermelho.

Lembre-se de colocar o código em um gadget que ocupe toda a medida do blog para que o efeito
Fique bem legal.

Como criar banners rotativos no blogger


Agora vamos mostrar como funciona com banners.

Veja um exemplo de como deverá ficar o gadget abaixo. Aqui ele está estático mas o código gera um movimento da direita para a esquerda.



Para inserir este código em seu blog siga as instruções abaixo:

1---Prepare os banners que serão colocados que deverão ter o mesmo tamanho. O ideal são os banners 120 X 60.

2---Copie o código abaixo e cole em seu gadget html - java, colocando-o em uma posição de destaque no blog.

-------------------------------------------------
<marquee onmouseover="javascript:this.stop()"
onmouseout="javascript:this.start()" scrolldelay="33" bgcolor="#000000"
width="100%"><a href="ENDEREÇO DO SITE 1"><img src="ENDEREÇO DA IMAGEM SITE 1"/></a><a href="ENDEREÇO DO SITE 2"><img src="ENDEREÇO DA IMAGEM SITE 2"/></a></marquee>
------------------------------------------------

3---Na área "ENDEREÇO DO SITE 1 E ENDEREÇO DO SITE 2" coloque os respectivos endereços. Na área "ENDEREÇO DA IMAGEM DO SITE 1 E 2" coloque o endereço das imagens dos banner.

Para colocar mais banner basta repetir a operação com outros banners.

Um detalhe importante que deve ser colocado é que, enquanto os banners se movimentam, basta passar o mouse por cima de um deles para que o movimento pare e você possa clicar na imagem para ser direcionado ao endereço respectivo.

Este efeito é criado pelo comando "onmouseover".

Espero que gostem do código e até a próxima...

Há! Já ia me esquecendo! Faça um comentário!

Walter Matheus é um profissional de Marketing e tem sido associado a várias publicações online, incluindo este blog,

Ele também tem um vasto programa de treinamento para pessoas interessadas em adquirir conhecimentos profundos sobre o assunto tratado aqui. Você pode verificar na página localizada em: JORNADA DO AFILIADO.




Se você se considera uma pessoa acanhada, com poucos amigos, sem prestígio, sem dinheiro suficiente, que não sabe falar corretamente, sem postura física e, principalmente, que se sente excluído da sociedade, este curso é para você!

6 comentários:

  1. Muito obrigado foi de grande ajuda. Sera que voc~e poderia me dizer como mudo a cor do fundo de preto para lilas? Grata Cristiane

    ResponderExcluir
    Respostas
    1. Basta mudar o código hexadecimal. São estes números que estão no código. O preto é #000000. Para mudar a cor do fundo, vá até a parte de baixo deste blog e escolha a cor. Depois substitua os números 000000 pelos números da cor que vc escolheu abaixo.
      Espero ter ajudado.

      Excluir
  2. O banner ficou bem legal, mas eu gostaria de clicar na imagem e ir para o link tem jeito?? Obrigada!!! Adorei

    ResponderExcluir
    Respostas
    1. Se você colocar o endereço do site ou blog corretamente, isto é, com o http://seu site/, ele irá funcionar como link. Basta clicar na imagem para ir ao local desejado.

      Excluir
  3. Muito legal o seu site
    --------------------------------------
    Conheçam o site de dicas, códigos e hospedagem www.guiadohost.com

    ResponderExcluir

Faça comentários somente sobre o assunto do Post.
Não use palavras impróprias.

Veja também