Código javascript para rotacionar banners de publicidade

Ao invés de encher as páginas do seu blog ou website com 4 ou 5 banners de publicidade, você pode utilizar um pequeno código javascript para rotacionar banners. Além de economizar bastante espaço na página, também é uma boa forma de evitar a poluição visual do template. Eu utilizava esse código para rotacionar os banners de publicidade no meu antigo blog sobre cursos online. Você pode adicionar 10 banners ou mais, basta fazer as devidas alterações no código.



Cada vez que um usuário carregar uma página do seu blog ou website, um banner irá aparecer de forma aleatória. Esse javascript é bem fácil de editar, basta você seguir as orientações desse artigo. Tudo que estiver marcado com a cor vermelha, você pode editar - caso você tenha um pouco de conhecimento sobre javascript, poderá deixar esse código, melhor do que já está!

<script language="JavaScript">


var how_many_ads = 2;


var now = new Date()


var sec = now.getSeconds()


var ad = sec % how_many_ads;


ad +=1;


if (ad==1) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}


if (ad==2) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}


document.write('<center>');


document.write('<a href=\"' + url + '\" target=\"_parent\">');


document.write('<img src=\"' + banner + '\" width=')


document.write(width + ' height=' + height + ' ');


document.write('alt=\"' + alt + '\" border=0><br>');


document.write('<small>' + txt + '</small></a>');


document.write('</center>');


// End -->


</script>

Veja as possíveis personalizações do código:

- Largura da imagem do banner - width="300";

- Altura da imagem do banner - height="250";

- Link do banner, abre na mesma janela = document.write('<a href=\"' + url + '\" target=\"_parent\">');

- Link do banner, abre em uma nova janela = document.write('<a href=\"' + url + '\" target=\"_blank\">');

- Para exibir um link com o nome do produto abaixo do banner, basta você digitar uma frase no local indicado no código. Caso não queira um link abaixo do banner, deixe essa parte em branco!

- Texto alternativo: alt="NOME DO PRODUTO" - esse texto alternativo só é exibido para o usuário, quando a imagem não pode aparecer!

Para adicionar mais banners no código, faça isso:

Localize essa linha no código " var how_many_ads = 2;" - altere o valor numérico para o número correspondente à quantidade de banners. Se você colocou 5 banners, troque o número "2" pelo "5" e, assim, sucessivamente.

Esse pedaço de código corresponde a um novo banner:

if (ad==3) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}

Veja no exemplo abaixo, temos 3 banners;

<script language="JavaScript">


var how_many_ads = 3;


var now = new Date()


var sec = now.getSeconds()


var ad = sec % how_many_ads;


ad +=1;


if (ad==1) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}


if (ad==2) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}


if (ad==3) {


txt="NOME DO LINK ABAIXO DO BANNER";


url="LINK DO BANNER";


alt="NOME DO PRODUTO";


banner="LINK DA IMAGEM";


width="300";


height="250";


}


document.write('<center>');


document.write('<a href=\"' + url + '\" target=\"_parent\">');


document.write('<img src=\"' + banner + '\" width=')


document.write(width + ' height=' + height + ' ');


document.write('alt=\"' + alt + '\" border=0><br>');


document.write('<small>' + txt + '</small></a>');


document.write('</center>');


// End -->


</script>

Caso precise de mais banners, vá adicionando o pedaço de código acima e substituindo também os números, 3, 4, 5, 6, 7, 8 etc. Espero que você consiga utilizar esse código javascript para rotacionar banners no seu projeto!