Uma das formas de ganhar dinheiro com o seu blog é com o uso de banners, sejam de afiliados ou publicidade direta(venda direta de espaço publicitário a um determinado cliente) e você pode fazer de três formas diferentes: banners fixos, banners rotativos e banners rotativos e dinâmicos.
Os banners fixos, como o nome já diz, não mudarão nem em tempo real nem quando a página for atualizada. Os banners apenas rotativos irão mudar a cada vez que um usuário acessar a página ou atualiza-la. O sistema de banners rotativos e dinâmicos terá as caracterÃsticas dos banners rotativos e além disso mudarão em tempo real.
Vamos então aprender com esse pequeno tutorial a criar um sistema de banner rotativo e dinâmico em javascript.
Você pode optar por economizar espaço publicitário usando esse tipo de sistema, porque ao invés de separar por exemplo, espaço para 6 banners, usando o estilo dinâmico você reservará apenas um espaço, onde os banners ficarão revezando-se.
Isso também é muito útil se pensarmos que as última atualizações do algorÃtimo do Google tende a priorizar sites com menos espaços publicitários e mais conteúdo.
O sistema funcionará da seguinte forma: a cada acesso a uma página ou quando o usuário atualiza-la, o sistema sorteará aleatoriamente todos os banners distribuindo-os em posições sequenciais, e nenhum banner se repetirá até que toda sequencia seja completada. A partir daà o sistema fará novo sorteio e o processo se repetirá. o número de vezes que isso acontecerá será definido para cada grupo de banners separadamente.
Todos terão chances iguais, pois se você decidir que o processo acontecerá três vezes, depois da terceira vez o último banner sorteado ficará fixo, até que o usuário atualize a página. Como o sorteio é aleatório e a sequencia de banners não será repetida, então qualquer banner poderá ser o último que ficará fixo.
Importante: você só poderá usar um grupo de banners por página, do contrário entrarão em conflito e também não é indicado se colocar um número alto de repetição, pois o sistema sorteia primeiro a sequencia para depois de exibir. Portanto, dependendo do número de repetições o processo poderá ser mai lento ou mais rápido.
O sistema contará com dois arquivos externos js. Um para a função e outro para os grupos da banners.
Vamos então ao primeiro arquivo js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
var numero = 0;
var i = 0;
var icont=0;
var acumula="";
var num = new Array();
///////////////////////////// inicio função principal /////////////////////////////////
//função que será inserida na página para expor os banners
function banner(path,largura,altura,tempo,n_vezes){
//================================== começo 1º loop ===================================
n_banners=ref.length
for(icont=1;icont<=n_banners;icont++){
acumula+= 'num['+icont+'] == numero ||'
}
acumula+="num==numero"
acumula=eval(acumula)
//inicializando o contador que irá relacionar os números
//aos banners
for (i=0; i < (ref.length)-1; i++) {
//*******************************************************
//automatizando o intervalo de números a serem sorteados
//de acordo com o números de banners
maxi= (ref.length)-2;
//******************************************************
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//selecionando aleatóriamente um número entre o intervalo
//definido pela variável maxi
numero = Math.round((maxi -1 + 1) * Math.random() + 1);
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//******************************************************************************
//Certificando para que um número não saia duas vezes
//colocando-se mais banners terá que aumentar propocionalmente
//abaixo já está programado para até 26 banners
//ex: mais um banner acrescentado, teria que se colocar : ||num==numero
if(acumula)
{
i--;
}
else
{
num[i] = numero;
}
//*******************************************************************************
}
//================================= fim 1º loop ===================================
//:::::::::::::::::::::::::::::::::::::::::::::::::::::
//definindo o contador inicialmente como zero para
//que o primeiro banner apareça imediatamente
cont=0;
//:::::::::::::::::::::::::::::::::::::::::::::::::::::
//=============================== começo 2º loop ==================================
for (i2=0; i2<n_vezes; i2++) {
//********************************** começo 3º loop *******************************
//Criando automaticamente o número de banners correspondente
//as urls criadas nas funções do arquivo urls.js
for (i=0; i < (ref.length)-1; i++) {
setTimeout("document.images['ban'].src='" + path + "banner" + num[i]+ ".gif'",cont);
setTimeout("document.links('ligue').href="" + ref[ num[i]] + """,cont);
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//Somando o tempo passado como parâmetro na função
//banners(), ao contador, em loop
cont+=tempo;
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
}
//******************************* fim 3º loop ********************************
}
//=================================== fim 2º loop ============================
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// Imprimindo as imagems com os links
document.write('<a href="" name="ligue" target="_blank">')
document.write('<img src="" border="0" name="ban" height="')
document.write(altura+'"'+'width="'+largura+ '"></a>')
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
}
////////////////////////////// fim função principal ///////////////////////////////////
Veja os parâmetros passados na função:
1) path : caminho até a pasta onde estão o banners
2) largura : largura dos banners
3) altura: altura dos banners
4) tempo: tempo de mudança dos banners em milissegundos
5) n_vezes: quantas vezes o processo irá se repetir
É muito importante que cada grupo de banners esteja em uma pasta que será apontada na chamada da função e os nomes serão fixos seguidos de um numeral, exemplo: banner1.gif, banner2.gif, banner3.gif etc, do contrário não funcionará.
Crie uma pasta principal e salve o arquivo como “banner-javascript-rotativo.js”
Agora vamos ver o código do arquivo js que guarda os grupos de banners
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
var ref = new Array();
function endereco1(){
//****************************************************************
//Coloque aqui as Urls dos banners
ref[1]="http://virtualsite/chat/readme.txt"
ref[2]="http://virtualsite/chat/chat/admin.php3"
ref[3]="http://virtualsite/php/classes/class1.php"
ref[4]="http://virtualsite/php/datas/data b.php"
ref[5]="http://virtualsite/php/outros/Calculator.php"
ref[6]="http://virtualsite/php/outros/Calendar.php"
ref[7]="http://virtualsite/php/outros/eregreplace.php"
ref[8]="http://virtualsite/php/outros/determinar erro php.txt"
ref[9]="http://virtualsite/php/outros/Count Down.php"
//****************************************************************
}
function endereco2(){
//****************************************************************
//Coloque aqui as Urls dos banners
ref[1]="JAVA SCRIPT EFEITO/banner multiplo.html"
ref[2]="JAVA SCRIPT EFEITO/banner personal.html"
ref[3]="JAVA SCRIPT EFEITO/botão muda cor.htm"
ref[4]="JAVA SCRIPT EFEITO/cor de fundo6.htm"
ref[5]="JAVA SCRIPT EFEITO/efeito_de_cor_no_fundo.htm"
ref[6]="JAVA SCRIPT EFEITO/espelho.htm"
ref[7]="JAVA SCRIPT EFEITO/fade.html"
ref[8]="JAVA SCRIPT EFEITO/mouse over colours.htm"
ref[9]="JAVA SCRIPT EFEITO/SCRIPT4.html"
//****************************************************************
}
Perceba que as funções guardam apenas as urls dos sites dos anunciantes para onde os banners apontarão ou arquivos do seu próprio blog/site se quiser, pois os banneres serão lidos automaticamente à partir da pasta que for definida para aquele grupo de banners, então o endereço do primeiro ref por exemplo, terá que coincidir com o banner1.gif,  do segundo ref com o banner banner2.gif  e assim por diante.
salve esse arquivo também dentro da pasta com o nome de “urls-banner-javascript.js”.
Agora para incluir os grupos de banners é só chamar os dois arquivos js na página e incluir um js de chamada das funções, veja um exemplo abaixo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<html>
<head>
<title>Banner Javascript rotativo e dinâmico </title>
<!--*********************************************************//-->
<script language="JavaScript1.2" src="js/banner-javascript-rotativo.js"></script>
<script language="JavaScript1.2" src="js/urls-banner-javascript.js"></script>
<!--*********************************************************//-->
</head>
<body>
<!--***************************//-->
<script>
endereco1()
banner("images1/",200,100,1000,'3');
</script>
<!--***************************//-->
</body>
</html>
Perceba que há a chamada de duas funções  ”endereco1()” que é um nome escolhido por você e que guarda as urls para onde os banners do seu grupo aponta.
A segunda função “banner()” é padrão com os parâmetro e caminho para a pasta de banners, largura, altura, tempo para a mudança dos banners e quantas vezes o processo irá se repetir.
Para chamar o outro grupo de banners é só fazer o mesmo processo em outra página mudando apenas o nome da função para endereco2() e atribuindo os parâmetro condizentes na função “banner()”.
Você pode criar quantos grupos de banners queira, mas lembre-se que não poderá colocar dois na mesma página.
Aprenda a fazer também um menu retrátil em javascript e css: Menu retrátil em javascript e css
Até a próxima.



dermeval, nao sei se vc percebeu la naqueles arquivos q eu te passei do banner rotativo, la tem um codigo q faz mudar o sentido de giro, direito e esquerdo, so q eu deixei ele vazio pra nao aparecer o letreiro na pagina do meu site…
e outra, tem como tbm colocar mais imagens no banner, porem tem q definir o tamanho correto das imagens, o q ficam um poko mais trabalhoso pois as vezes vc tem q mexer na imagem com software de terceiros.
obrigado ate a proxima…
Ah, ok
Não verdade nem tive tempo de olhar com mais calma.
Onde eu coloco as imagens para ser chamada pela função js, qual pasta eu tenho que criar?
Olá Eduardo,
Você é quem decide, observe a chamada da função:
banner(“images1/”,200,100,1000,’3′)
Veja o primeiro parâmetro, que é o caminho para as imagens, nesse caso os banneres tem que ficar em uma subpasta chamada “images1″
mas você pode mudar para outra pasta se preferir.
Abraço.
As minhas imagens estão dentro de uma pasta chamada img/images1/ esta correto né?
E precisa alterar colocando em algum lugar no código a pasta img, porque não esta funcionando, não aparece as imagens na tela. Se poder me ajudar agradeço.
Nesse caso você precisa mudar o path na chamada da função, por que no seu caso significa que o script está em uma pasta principal e as imagens estão dentro de uma pasta chamada “images1″ mas esta pasta já está dentro de outra chamada “img”, então ficaria assim:
banner(‘img/images1/’,200,100,1000’3′)
A sequencia pelo que você disse seria:
Pasta principal > Pasta Img > Pasta images1
Mas não tem porque colocar a pasta “images1″ dentro da pasta “img”
Basta criar a pasta principal onde ficará o script e dentro dela criar a pasta images1 com as fotos dentro e chamar como coloquei no exemplo
desculpa ficar enchendo o saco, mas é que o meu não vai de jeito nenhum. Da esse erro no console do firebug.
SyntaxError: missing ) after argument list
setTimeout(“document.links(‘ligue’).href=”" + ref[ num[i]] + “”",cont);
index.html (line 17, col 42)
ReferenceError: banner is not defined
banner(“images1/”,200,100,1000,’3′);
Eu apenas copiei e colei sem alterar nada do exemplo feito acima.
A estrutura do meu projeto é a seguinte: tenho uma pasta Banner e dentro dela esta todas as outras e os codigo tbm.
Banner: images1, js, index.html.
images1:banner1.gif, banner2.gif, …….
js: banner-javascript-rotativo.js, urls-banner-javascript.js.
esta certo assim?
eu não alterei nenhuma linha.
Enviei um sistema de exemplo para o seu email.
Abraço.
não chegou no email pode mandar novamente. Obrigado
Enviei novamente.
Amigo fiz uma montagem aqui desse scripts mais não funciono veja..
veja como fiz http://ofertasml.com.br/banner/banner.html
Você não tem como fazer um demo pra mim ver…
Desde já muito obrigado!
Daniel
Olá Daniel,
Você criou e colocou as pastas de imagens no lugar correto?
Tipo:
http://ofertasml.com.br/banner/images1/banner1.gif
http://ofertasml.com.br/banner/images1/banner2.gif
http://ofertasml.com.br/banner/images1/banner3.gif
Porque chamando aqui o endereço, não está encontrando
Amigo conseguir fazer o banner funciona valeu obrigado e sucesso…
Eu não conssigo inserir o banner rotativo no website T.T
pode me dar uma ajuda ? ‘-’,
http://www.facebook.com/jean.luiz.73?ref=tn_tnmn
Qual o problema exatamente?