Banner Rotativo em javascript

Como Fazer Um Site >> Extras Para o Seu Site >> Banner rotativo em javascript



O que é um banner rotativo?

Um banner rotativo é um banner em que fazemos passar vários anúncios publicitários diferentes, em que cada anúncio é exibido durante um determinado período de tempo. Quando preciso de instalar um banner rotativo num dos meus sites uso o script bannerrotativo.js. É muito simples, funciona muito bem, e dá para configurar várias opções. Veja o script em acção:


Porquê usar banners rotativos?

Um banner rotativo permite fazer um melhor aproveitamento do espaço disponível no seu site. Em vez de exibir apenas um anúncio numa determinada zona do site, você pode exibir vários, sem que isso implique encher o site de banners que iriam ocupar imenso espaço.

Um banner rotativo também tem vantagens relativamente a um banner fixo no qual é exibida apenas uma publicidade. Para além da vantagem óbvia de aumentar a probabilidade de que seja exibido algo que interesse ao seu visitante, também o facto de não ser fixo, o facto de rodar diferentes publicidades, vai chamar muito mais a atenção de quem visita o seu site. Muitas vezes os banners têm uma taxa de conversão muito baixa. Isto explica-se pelo efeito da habituação que leva os visitantes a ignorarem a publicidade, a não a verem, principalmente quando aquilo que aparece numa área de publicidade é sempre a mesma coisa, não muda, é estático. Por isso, usar um banner dinâmico, rotativo, pode fazer a diferença, pode fazer com que os visitantes acordem para esses espaços e que passem a ver os anúncios (que até lhes podem interessar). E desta forma você pode fazer com que os cliques no seu banner aumentem substancialmente.


Características deste banner rotativo

É um script simples mas com a possibilidade de exibir quantos anúncios quiser, sem limitações. O tamanho pode ser ajustado, e pode ser definida uma data a partir da qual um anúncio é removido automaticamente do banner rotativo.

O script exibe um anúncio aleatório a partir da lista de anúncios que for definida para cada localização.

  • Fácil de instalar
  • Suporta um número ilimitado de anúncios
  • Opção para forçar o tamanho do banner
  • Abre links na mesma página ou numa nova página
  • Banners inactivos são automaticamente removidos
  • Permite definir localizações especificas para diferentes banners na mesma página
  • Os mesmo banners não serão mostrados na mesma página
  • Os anúncios rodam a cada X milisegundos

Como instalar o banner rotativo?

Para ver o banner rotativo a funcionar no seu site faça o seguinte:

1 - Faça download do script do banner rotativo

Link para download do script bannerrotativo.js (clique com o botão direito do rato e escolha "Guardar ligação como" para guardar o ficheiro no seu computador).

2 - Faça upload do script para o seu servidor

Coloque o ficheiro bannerrotativo.js no servidor onde tem o seu site alojado.

Se tem um site gratuito (por exemplo instalado no blogger.com) poderá não ser possível fazer upload do ficheiro. Neste caso o que pode é fazer o upload do ficheiro para uma conta "Sites" do Google, e usar o script a partir daquele endereço. Clique no link para ver como pode fazer upload do ficheiro javascript para o Google Sites.

3 - Coloque o código entre as tags <head></head>

Coloque a seguinte linha de código entre as tags <head> e </head> do HTML do seu site:

<script type="text/javascript" src="http://www.seusite.com/bannerrotativo.js"></script>

Substitua a porção que está a vermelho pelo endereço exacto do ficheiro bannerrotativo.js (localização em que ficou o ficheiro depois do upload que fez no ponto anterior).

4 - Defina onde quer que o banner rotativo apareça

Para definir em que local da sua webpage quer que o banner rotativo apareça basta colocar o seguinte código no nesse local pretendido do HTML da sua webpage:

<script type="text/javascript">mostrar_banner('LocalAnuncios1');</script>

Guarde as alterações que fez no seu site e o banner rotativo estará a funcionar.

 

Definir os anúncios que quer exibir no seu banner rotativo

Para exibir a sua própria publicidade no banner rotativo só tem que editar o ficheiro bannerrotativo.js.

Abra o ficheiro bannerrotativo.js com o Bloco de Notas do windows. No inicio do ficheiro você vai encontrar algumas opções comentadas, que poderá configurar facilmente.

Mais abaixo vai encontrar uma lista de anúncios. Cada anúncio segue a seguinte estrutura em que são definidos alguns dados:

new anuncio('nome_site', 'url_site', 'url_imagem', 'mostrar_ate_data', 'localizacao_banner'),

Um anúncio novo deverá ser adicionado abaixo da porção de código var anuncios = [ .
IMPORTANTE: Deve haver uma virgula no final de cada anúncio, tal como no exemplo dado acima, EXCEPTO para o último anúncio. O linha do último anúncio não deverá ter uma virgula no final.

Penso que os campos nome_site, url_site e url_imagem dispensam explicações. O campo mostrar_ate_data é a data no formato DD/MM/AAAA a partir da qual o respectivo anuncio deixa de ser exibido. Este é um dado que tem que existir, não pode deixar este campo em branco ou vazio - se você quer que um anúncio apareça "para sempre", defina uma data avançada muitos anos para o futuro.

O campo localizacao_banner deve ser usado para associar cada anúncio a uma local especifico na sua webpage, como seria o caso, por exemplo, se você quisesse um banner rotativo no topo da sua webpage e outro banner rotativo no fundo da sua webpage, e quisesse exibir anúncios específicos em cada um desses banners rotativos (ver exemplo abaixo).
Se deixar este campo vazio (certifique-se que deixa lá as aspas) então o respectivo anuncio vai ser exibido numa localização definida como "vazia" na sua webpage.

Guarde as alterações e faça upload do ficheiro para o seu servidor.


Banners rotativos usados nesta página

Nesta página usei dois banners rotativos para servirem como exemplos, um no topo da página com o formato 468X60, e outro em baixo, no fim da página, com o formato de 300x250. No ficheiro bannerrotativo.js defini os seguintes anúncios:

var anuncios = [
new anuncio('Como Fazer Um Site', 'http://comofazerumsite.com', 'http://img190.imageshack.us/img190/5520/cfusbanner468x60.jpg', '30/02/2023', 'anuncios-topo'),
new anuncio('BLOG - Como Fazer Um Site', 'http://comofazerumsite.com/blog', 'http://img217.imageshack.us/img217/9375/cfusbannerblog468x60.jpg', '11/02/2029', 'anuncios-topo'),
new anuncio('FORUM - Como Fazer Um Site', 'http://comofazerumsite.com/forum', 'http://img13.imageshack.us/img13/594/cfusbannerforum468x60.jpg', '14/04/2022', 'anuncios-topo'),

new anuncio('Como Fazer Um Site', 'http://comofazerumsite.com', 'http://img694.imageshack.us/img694/383/cfusbanner300x250.jpg', '30/02/2023', 'anuncios-fundo'),
new anuncio('BLOG - Como Fazer Um Site', 'http://comofazerumsite.com/blog', 'http://img411.imageshack.us/img411/2127/cfusbannerblog300x250.jpg', '11/02/2029', 'anuncios-fundo'),
new anuncio('FORUM - Como Fazer Um Site', 'http://comofazerumsite.com/forum', 'http://img210.imageshack.us/img210/3057/cfusbannerforum300x250.jpg', '14/04/2022', 'anuncios-fundo')
]

Como podem ver tive que criar dois tipos de localizacao_banner: a um deles chamei anuncios-topo e ao outro anuncios-fundo.

E assim no topo desta minha webpage, no HTML, coloquei:

<script type="text/javascript">mostrar_banner('anuncios-topo');</script>

e no fundo desta página coloquei:

<script type="text/javascript">mostrar_banner('anuncios-fundo');</script>

 

Como os dois banners rotativos que defini têm tamanhos diferentes pode acontecer que em alguns browsers ao mudar o anúncio, enquanto as imagens não estão ainda na memória do computador, o anúncio encolha e depois se expanda novamente para a dimensão da imagem, criando um efeito de "ressalto". Este ressalto em principio só vai ocorrer no inicio da exibição dos anúncios. Mas se usarmos só um banner rotativo, só um tamanho, e configurarmos no ficheiro bannerrotativo.js que 'define_size': 1 nesse caso a dimensão mantém-se fixa, mesmo na transição entre imagens, sem ressaltos.

Neste caso inseri os banners no conteúdo da página mas o banner rotativo pode ser inserido em qualquer outra localização como por exemplo no cabeçalho, numa barra lateral, etc. E eu fiz com que os url_site apontassem para o site Como Fazer Um Site, mas você pode fazer com que apontem para os seus links de afiliado e dessa forma ganhar dinheiro com o banner rotativo.

 

 


Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.