quarta-feira, 15 de dezembro de 2010

JavaScript Para Rotacionar Banners

Este código é capaz de rotacionar qualquer quantidade de banners, e o que é melhor ainda, em qualquer tamanho!

Esta é uma ótima alternativa para que seus banners sempre chamem a atenção de seus leitores assim que entrarem em  seu site, afinal, algo estará diferente!


Pode parecer que não muda muita coisa, mas para seu leitor muda, afinal ele não passa horas olhando para o material do seu blog, ele apenas acostuma com o padrão, e quebrar este padrão sem perder sua marca, sua identidade visual é importante!

<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="";
url="http://www.sitedobanner.com";
alt="texto alternativo";
banner="url completa do banner";
width="largura do banner em px";
height="altura do banner em px";
}
if (ad==2) {
txt="";
url=" http://www.sitedobanner.com ";
alt=" texto alternativo ";
banner=" url completa do banner ";
width=" largura do banner em px ";
height=" altura do banner em px ";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_blank\">');
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>

Para que seu código funcione adequadamente, basta que você substitua os campos em vermelho pelos dados referentes aos banners. Vale lembrar que em:

url= refere-se a onde o leitor será levado clicando no banner;
alt= é o texto alternativo que aparece quando se passa o mouse sobre uma imagem do banner;

Para adicionar mais banners:

Cole este código após a chave”}” ao término do banner final

if (ad==2) {
txt="";
url=" http://www.sitedobanner.com ";
alt=" texto alternativo ";
banner=" url completa do banner ";
width=" largura do banner em px ";
height=" altura do banner em px ";
}

Outra alteração que deve ser feita ao adicionar banners é o seguinte. No início do código repare que há esta linha:

var how_many_ads = 2;

O “2” em vermelho indica a quantidade de banners existentes no código, portanto se adicionar o retirar algum banner, lembre de alterar estenúmero.

E o código de cada banner se inicia com

if (ad==2) {

Onde “2” é o número individual do banner, ou seja, teremos números diferentes para cada banner, o primeiro é(add==1)o segundo (ad==2) o terceiro (ad==3) e assim sucessivamente.

Uma última dica que deixo aqui é para que você tome o cuidado de colocar banners do mesmo tamanho, pois banners de tamanhos diferentes vão deixar uma imagem ridícula inadequada em seu site. 

Um comentário:

  1. Testei dezenas de plugins e não tive sucesso, mas com esse código funcionou perfeitamente. Muito obrigado por compartilhar.

    ResponderExcluir