Banner rotativo em Javascript

Criar Site no Webnode


Sistema simples de rotacionamento de banners em Javascript para rotacionar Banners que permite rotacionar banners de vários tamanhos.

Esta é uma excelente forma de vender publicidade, rotacionar banners de programas de afiliados ou divulgar áreas específicas de seu site.

Aqui no Criar Sites eu utilizo o mesmo código mostrado no tutorial para rotacionar os banners 468×60 px. localizados no topo da página.

O tutorial
Eu criei um pequeno tutorial ensinando a alterar o código para ajustá-lo ao seu site.
Você irá aprender a modificar os links de destino, links dos banners, tamanho, texto alternativo e também a incluir quantos banners desejar.

O Código
Eu não incluí o código diretamente aqui no site por que o tutorial ficou muito grande e também porque o sistema de gerenciamento de conteúdo que estou utilizando poderia causar problemas de exibição na hora de exibir a página para os visitantes.

Você pode pegar aqui o tutorial “Javascript para rotacionar Banners

Sobre Celso Lemes

Blogueiro Profissional. Conhecimento sobre Marketing Digital, Google SEO, Divulgação Online, Redes Sociais, Webdesign, Divulgação de Empresas
Adicionar a favoritos link permanente.

61 Comments

  1. Muito boa explicação!!!

    belo tutorial parabens

  2. Muito bom cara,me ajodou muito,aliás,estou usando muitas de suas dicas no site que estou construindo,valeu mesmo,vou usar com certeza

  3. Ertulio,

    Obrigado pela visita e por ajudar o site.

    Willy,

    Que bom que minhas dicas estão te ajudando. Obrigado pela visita.

    Abraços!

  4. Rotacionar banner é de fato uma boa forma de conseguir fazer publicidade eficiente em um blog ou site na internet.

  5. Vinicius,
    É isso mesmo, os banners são rotacionados a cada atualização da página.
    Ele roda aleatório, pode ser que ele repita o mesmo banner duas vezes seguidas.
    O primeiro banner também é aleatório.

    Abraço!

  6. Olá amigo, gostaria de saber como obter um “banner” igual ao do Baixaki(www.baixaki.com.br)

    em que aparece varios programas e ainda a um “menu” para selecionar qual “banner” vc quer ver!

    Obrigado!

  7. Ta tranquilo…

    + sera que não tem um jeito de “pescar” aquilo não…

    aqueles programas que baixam sites completos,eles pegam os scripts tb?!

  8. Mulambo:
    http://www.universodoslivros.com.br/webparaprofissionais.zip

    Se vc quiser compra o livro (web para profissionais) para ver o tutorial de como alterar o código. Mas eu acho q ele tá explicado.

    OBS.: Tá na pasta “anuncios_dhtml”.

  9. 🙄 Cara, to quase pra morrer de raiva. Me ajuda?
    Eu tento colocar um banner de um anúncio que usa Java Script, só que ele abre normal no google chrome, no mozilla firefox, mas não abre de jeito nenhum no internet explorer. Porque? Você pode me explicar ou dar uma dica?

    Se não fosse pedir muito, me mande um e-mail para me avisar da resposta. Muito Obrigado.

  10. Celso aqui não ta rotacionando bem na primiera pagina so aparece um banner na segunda aparece outro mas nao rotacionando em uma única página é normal do código? pq ja vi o rotacionamento em outros sites e rotaciona todos na mesma páginas

  11. Bruno,
    Era para rotacionar ao atualizar a página. Creio que você fez algo de errado. Dê uma conferida no código.

    Abraço!

  12. por exemplo, eu quero ter acesso ao html do wordpress. porem eu li num blog q é necessario hospedar o wordpress em outro dominio por exemplo, o l4rge ou 000webhost
    eu quero saber se isso é mesmo verdade e se é qual é o melhor…a cara tem como voce fazer uma video aula curta explicando como chega ao editor html do wordpress que eu to m atrpalhando todo com isso que vc nem sabe
    la na minha escola a galera ta m chamando d nerd pq eu passo o dia intero lendo sobre criaçao e otimizaçao de sites vlw…desculpe o flood

  13. ah! otra coisa eu queria saber como fazer um banner de comunidade do orkut igual o que tem no menu direito aqui do criar sites. abraço

  14. Leo,
    É isso mesmo, se você quiser ter acesso ao HTML do template para editá-lo do jeito que você quiser, você deve instalar o WordPress em um servidor (que o suporte), ou seja não dá para utilizar o blog gratuito oferecido no wordpress.com
    Você pode baixar o WordPress aqui http://br.wordpress.org/

    O banner eu fiz ele no Corel Draw, ou seja, se você quiser fazer um banner, você terá que aprender a mexer com algum editor de imagens.

    Abraço!

  15. certo…mas como eu intalo o wordpress no meu blog da wordpress??
    e qual é o ftp q eu tevo publicar os arquivos..
    ah!!! se voce puder me ensinar qual o seu pulo do gato para obter tantas visitas qual o pincipal jeito que voce obtem visitas? abraço e como faço para meus posts sejam indexados ao google rapidamente??
    obrigado!! abraço

  16. atah li novamente e entendi mais qual servidor free que suporta o wordpress?
    tem que ser free daqui por mes que vem c o blog tiver com boa visitaçao compro um dominio mas prefiro que seja free

  17. Boa Noite Celso!
    Eu tentei colocar o banner rotativo no site, mas ele não funciona. Nem aparece! Conferi item por item, e não encontrei nada errado que eu tenha feito. Ai peguei o seu código e tentei com ele…Não funciona também! Acredito que tenha algo errado no código seu!
    Obrigada
    Ana Carolina

  18. Ana Carolina,
    Este script funciona sim, eu mesmo o utilizo em alguns sites.
    Creio que você fez alguma coisa errada na hora de inserir o código ou então tentou inserí-lo em um local do seu site que não suporta javascript.

    Abraço!

  19. Celso teria como aplicar o nofollow já dentro do script? pelo o que vi não tem o nofollow, teria como colocar o scrip com uma opção com ele?

  20. Olá Bruno,
    Aí você me pegou. Eu não sei como isso pode ser feito em javascript.
    Eu não sou programador, apenas estou disponibilizando este código que foi feito por outra pessoa.

    Realmente isto pode ser um problema já que o Google passou a identificar links contidos em javascript, porém não sei se o site pode ser penalizado por isso. Vou procurar saber mais sobre o assunto.

    Abraço!

  21. Só uma dica, como estava usando o script na minha home abaixo de cada postagem ele não rotacionava bem a cada post e sim a cada atualização da página e também o validator w3 acusava vários erros e como no comentário acima e o do Celson abaixo não da para aplicar o nofollow. Bem fiz uma procura e achei um plugin muito mas muito bom mesmo ele tem a mesma função do javascript acima (rotacionar banners mas bem melhor (rotaciona super bem, todo validado no validator w3 e ainda pódice aplicar o nofollow) ou seja todos os meu problemas acabaram 🙂 O plugin é o Datafeedr Random Ads V2 para quem estiver com o mesmo problema que eu tinha aí segue a dica.

  22. olá celso, eu vou usar o banner rotativo no meu site que estou criando no yola, mas tenho uma dúvida como faço para colocar a imagen do meu banner . eu tenho que hospedar ele em um servidor. sou um pouco leigo ainda rsrs.
    repare que suas imagens terminam com .gif . como faço. Um abraço

    • Fabio,
      Você pode publicar as imagens no próprio Yola. Não precisa usar outro servidor. A extensão das imagens não importa, basta que você troque o endereço da imagem, com a imagem desejada (com a devida extensão).

      Abraço!

  23. Muito obrigado, funcionou perfeitamente. Porém, o código que eu usava para proteger minhas imagens contra cópias não funciona mais. Tem como você me dizer como posso fazer isso agora?valew

    • Felip,
      Não sei dizer porque eu não sou programador, pode ser que os dois códigos estão entrando em conflito.
      Creio que você terá que escolher entre um dos dois.

      Abraço!

  24. robson araújo

    Bom dia.

    Por favor não conheço nada de programação, será que vc teria um tutorial de como inserir e editar um banner dinamico com imagem e textono joomla, 1.5?

    Muito obrigado e parabéns pelo sentimento de compartilhar conhecimento com o próximo.

    • Robson,
      Infelizmente os meus conhecimentos sobre o Joomla se resumem apenas a instalação e uso do editor de páginas do Joomla.
      Recomendo que procure ajuda em um site especializado no Joomla como o http://www.joomla.com.br/

      Abraço!

  25. Paullo Tavares

    Olá,

    Sobre o Banner Rolativo em Java, eu consegui manipular e usa-lo corretamenteno local certo. Estou apenas com uma duvida quanto ao tempo que ele atualiza automaticamente, como faço pra ele automaticamente atualizar, e consequentemente mudar a imagem?

    PS: Pode estar relacionado á:
    var sec = now.getSeconds()
    var ad = sec % how_many_ads;

    Aguardo respostas (Se possivel por e-mail)

    Agradeço desde já!

    Paullo Tavares / h4qpkt@hotmaial.com

    • Paullo,
      Esse javascript não permite fazer isso. Ele apenas rotaciona quando a página é recarregada.

      Abraço!

  26. Alex Holliwer

    Nossa. Muito bacana o banner. Parabéns pela postagem. Estou em faze atualização do meu site para logo-logo e gostei muito de encontrar esse banner. Aqui funcionou perfeitamente. Abraço.
    paz

  27. funcione mesmo mais esta vendo um problema quando coloco o link da imagen no codigo a imagen nao aparece ja tentei de todas as formas possiveis mais não estou conseguindo colocar as imagens so aparece a palavra em link poderia me ajudar escrendo um comentário no meu sit ok !!

  28. Rodrigo Minelli

    Olá amigo gostei muito do seu tutorial de banners realmente e bom e funcional, mas tenho uma dúvida como rodar banners em .swf ???
    Tentei de varias formas e não consegui.

  29. Olá amigos! Mais uma vez gostaria de parabenizar pelo material que disponibiliza aqui no site, parabéns, sempre muito útil, com as dicas.

    Gostaria de aproveitar a oportunidade e saber se não tem açlgum tutorial de como fazer um formulário de contato funcionar no site, eu tenho o formulário, mas nao sei como fazê-lo funcionar, preciso com urgencia , puder me dá essa força amigo fico muito agradecido

    Grande abraço e que Deus esteja conosco SEMPRE!

  30. Parabéns. Funcionou legal porém o banner em gif que coloquei está aparecendo com bordas. Sei que não é problema no script mas se alguém puder ajudar…

  31. No caso do meu blog, como utilizar o rotacionador , já que possou um código completo do banner hospedado em outro site(site do anunciante)?

  32. não funfou no meu site feito no joomla. Tem alguma sugestão do que precisa ser mudado?

  33. antes de mais nada parabéns pelo site. Aqui no meu nao esta funcionado as imagens nao aparece será que voce pode mim dizer o que pode ser. Eu uso o blogspot será que o blogspot nao aceita esse tipo de código.

    • Walisson,
      Será que você inseriu o endereço dos banners corretamente? Sem quebra de linha ou espaço antes e depois?

      Abraço!

  34. Celso, como colocar anúncios com códigos em HTML para rotacionar inclusive o Google Adsense ?

    Obrigado.

  35. funcionou normalmente, Obrigado pela dica.
    Mas como eu faço pro banner fica girando automaticamente sem precisar fica atualizando a pagina ?

    • Didhyo,
      Com esse código não tem jeito. Sei que existem códigos prontos para este fim, mas eu não sei onde encontrar.
      Procure no Google.

      Abraço!

    • Meu caro, conseguiu um código para o banner ficar deslizando? Também estou procurando isso e não encontro no Google.

  36. Rodrigo Eslabao

    Celso os banners ficam com rel=”nofollow ? se não como colocar no código?Obrigado!

    • Olá Rodrigo,
      Em Javascript não tem como adicionar o atributo nofollow. Você não precisa se preocupar com isso nesse caso.

      Abraço!

  37. Anigo ,primeiro queria te parabenizar pelo site e te fazer uma pergunta.Eu pretendo criar um portal na internet de fins lucrativos , umamedia de 300 paginas ,com diversos conteudos do dia a dia , mas loja propria e loja de afiliados de socios e prestação de serviço.Qual a dica voce me daria, COMO UM PROBLOGEIRO ?

    • Olá Sinm,
      Eu acho que você está querendo fazer um site muito complexo sem ter nenhuma noção de como fazer. Neste caso eu recomendo que procure por uma agência de criação de sites, pois será muito difícil que você mesmo faça. Seria necessário que você entenda de servidores, programação, instalação de scripts e etc.

      Abraço!

  38. Celso Lemes, gostei do script, muito bom parabéns, teria como adiconar também SWF.

  39. Teria como adicionar um link em cima do banner mostrado.
    Tentei adiciona-lo, mas não mostrou nada.

  40. Olá, Celso!

    Muito bom seu tutorial. Você saberia me dizer como eu faria para colocar textos ao lado desses banners ou com os banners centralizado e os textos lado esquerdo e direto por exemplo?

    • Olá Fernando,
      Isso seria possível alterando o código, no entanto eu não sei muito bem como fazer isso.

      Abraço!

  41. Valeu pela dica Celso Lemes! Esse código de banners rotativos vão realmente me ajudar em muito! Valeu mesmo! Abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *