Lista de banners ou links em ordem aleatória

Ordem aleatória no blogMostrar sempre a mesma lista de banner ou links pode ficar cansativo pela repetição então uma boa alternativa para essas listas é fazer que apareçam de forma aleatória cada vez que alguém visita o blog.
O código para fazer uma lista de banners em ordem aleatória é o seguinte:

<script type="text/javascript" language="javascript">
var nr_of_links = 3;
var lnk = new Array (nr_of_links)
var desc = new Array (nr_of_links)
var dsp = new Array (nr_of_links)
lnk[0]="endereço 1";
lnk[1]="endereço 2";
lnk[2]="endereço 3";
lnk[3]="endereço 4";
desc[0]="titulo 1";
desc[1]="titulo 2";
desc[2]="titulo 3";
desc[3]="titulo 4";
dsp[0]="";
dsp[1]="";
dsp[2]="";
dsp[3]="";
var hits = 0;
while (hits < (nr_of_links + 1))
{
rnd = Math.round(Math.random() * nr_of_links)
if (dsp[rnd] == "")
{
dsp[rnd] = lnk[rnd]
hits += 1
document.write('<a href="' + lnk[rnd] + '"title="' + lnk[rnd] + '" target="_top">' + desc[rnd] + '</a><br/>')
}
}
</script>

Apenas coloque os endereços das paginas que deseja linkar(coloque o endereço completo com o http://) e os nomes(titulo) nos lugares indicados. Para acrescentar mais itens apenas continue a numeração nas 3 listas existentes, assim:

.......
lnk[4]="endereço 4";
lnk[5]="endereço 5";
lnk[6]="endereço 6";
.......
.......
desc[4]="titulo 4";
desc[5]="titulo 5";
desc[6]="titulo 6";
.......
.......
dsp[4]="";
dsp[5]="";
dsp[6]="";

E altere o valor desta linha var nr_of_links = 3;, o valor será sempre o mesmo numero do ultimo item da lista.

Se quiser o mesmo código com links de texto para fazer que apareça cada vez em uma ordem diferente use deste jeito:

<script type="text/javascript" language="javascript">
var nr_of_links = 3;
var lnk = new Array (nr_of_links)
var desc = new Array (nr_of_links)
var dsp = new Array (nr_of_links)
lnk[0]="endereço 1";
lnk[1]="endereço 2";
lnk[2]="endereço 3";
lnk[3]="endereço 4";
desc[0]="imagem 1";
desc[1]="imagem 2";
desc[2]="imagem 3";
desc[3]="imagem 4";
dsp[0]="";
dsp[1]="";
dsp[2]="";
dsp[3]="";
var hits = 0;
while (hits < (nr_of_links + 1))
{
rnd = Math.round(Math.random() * nr_of_links)
if (dsp[rnd] == "")
{
dsp[rnd] = lnk[rnd]
hits += 1
document.write('<a href="' + lnk[rnd] + '"title="' + lnk[rnd] + '" target="_top"><img src="' + desc[rnd] + '"border="0" /></a><br/>')
}
}
</script>

O procedimento para alterar a quantidade de banner é o mesmo usado com os links de texto na explicação acima. Tome cuidado na hora de colocar os endereços das imagens ou texto para não apagar nenhum sinal de aspas ou ponto e vírgula, pois isso faz o código não funcionar. Outro detalhe no caso das imagens tenha certeza que está usando o endereço certo, pois muitas vezes pensamos que o código está errado e na verdade é o endereço da imagem.

Veja também:

Imagem não aparece
Mostrar quem mais comentou seu blog
Sites com musicas para blogs
Saber o numero de visitas que estão agora no blog
Imagem na barra de endereço

35 comentários :

  1. Tem algum lugar onde se possa ver como fica?

    Eu tentei instalar num blogue de testes mas não funcionou, mas também não entendi onde colocar a Url da imagem do banner e pode ser isso...

    Abraço.

    ResponderExcluir
  2. Sua dicas são excelentes, pena que não consigo trabalhar com elas em meu blog. Vou continuar tentando.
    Passe no meu blog e pegue um selinho que deixei pra você.
    Um abraço!!

    ResponderExcluir
  3. url da imagem é a mesma coisa que endereço da imagem

    ver em funcionamento é complicado pois parece somente uma lista normal apenas muda a ordem cada vez que o blog é visitado, mas a aparência é a mesma de uma lista comum

    ResponderExcluir
  4. HuhU Nova IguaçU! \o/
    O codigo banner ficou mara! (pena mostras soh um d cada vez, mas me consolo)
    Eu o analisei e vi como parece simples. Minha esperiencia com o Java foi o suficiente para entender a logica do amiginho e ainda deixa-lo mais completo (e demorado de fazer ;P)

    Agora da pra personalizar a altura e deixei uma largura padrão. Adaptado a minha nessecidade ^.^

    ResponderExcluir
  5. Ué... pq vc apagou o outro codigo?

    ResponderExcluir
  6. esse código é mais fácil de alterar que os outros por isso publiquei

    ResponderExcluir
  7. Não consegui colocar o codigo o que significa dsp[0]=""; ? Foi isso que eu não entendi muito bem

    ResponderExcluir
  8. João Andrade
    isso faz parte do código, quando for colocar mais itens precisa continuar essa lista de numero também

    ResponderExcluir
  9. Olá eu não entendi direito o codigo.
    O que eu boto no dsp ?? Foi isso que eu não entendi.
    Flw

    ResponderExcluir
  10. Instalei três banners embaixo de Blogroll.

    Lá você pode ver como fica.

    ResponderExcluir
  11. OI MUITO PRAZER EU ACABEI DE MONTAR MEU BLOG E NAO SEI NADA MAS GOSTARIA DE COLOCAR AQUELA CAIA DE COMENTARIOS QUE AS PESSOAS ENTRA DEIXA RECADO E AS OUTRA VEM QUE TEM A BARINHA PRA SUBIR E DESCER COMO FAÇO ME ESPLICA DEVAGA PRA EU ENTENDER OBRIGADA

    ResponderExcluir
  12. Andrea Viana

    esse tipo de mural de recados tem aqui
    http://www.dicasparablogs.com.br/2009/10/colocar-mural-de-recados-ou-chat-no.html

    ResponderExcluir
  13. Oi...Olha,eu de novo!
    Bom não consegui instalar no meu blog este top parceria, há blogs, inclusive o meu, já tem o código do link (banner).Onde coloco este código neste outro código(top parc.)
    Por gentileza
    me resp por email.: maitepetitart@gmail.com
    desde já agradeço!

    ResponderExcluir
  14. Petit Art - Maitê
    o top parceiros não é um código, toda semana eu vejo no contador de visitas analytics quais os sites que mais enviaram visitas e atualizo a lista manualmente.

    ResponderExcluir
  15. Oi, Fabiano!
    Eu sou novata em blogs e nessas coisas de internet....
    Gostaria que você me explicasse o que é um link.
    Tenho um blog, mas fico perdidinha sobre essas coisas!
    Valeu!

    ResponderExcluir
  16. links são os textos e imagens que você clica e vai para outros sites

    ResponderExcluir
  17. maneiro fera.....parabens pelas dicas.....Deus abençoi

    ResponderExcluir
  18. Cara, eu fiz e deu certo, mais aonde eu coloco as imagens?

    ResponderExcluir
  19. fiz uma atualização no código para ficar mais facil ver onde colocar o endereço da imagem, é onde está imagem 1, imagem 2, ....

    ResponderExcluir
  20. Valeu cara, muito foda isso \o/

    ResponderExcluir
  21. Opaa, gostei da idéia, mais em que parte eu coloco esse código direto no meu html? tipo sem ter que adicionar uma widget HTML/JavaScript..

    faz 3 dias que tento mais não acho o lugar certo.

    ResponderExcluir
  22. o melhor jeito é o gadget de html/javascript pela pagina designer, colocar diretamente pelo html dá erro

    ResponderExcluir
  23. Tipo num é eu querendo ser chato, mais esse blog "http://www.bomdesigner.net" hospedou o java e colocou no html antes da tag <*/head>.
    que é exatamente oque eu to tentando explicar..

    se der pra perceber no código fonte deles ficou assim:

    <*script src='http://bomdesignerwebs.webs.com/stugyus.js'/>
    <*/head>

    mais tipo eu fiz o mesmo mais não funcionou..
    será que falta algum código pra completar?

    ps- coloquei caractere * pois o formulário de comentário não suporta a tag aqui ^^..

    Espero resposta :)

    ResponderExcluir
  24. claro que se hospedar o arquivo no formato .js funciona normalmente, não tem muito o que modificar apenas não use a primeira e ultima linhas no arquivo .js

    <*script type="text/javascript" language="javascript">
    <*/script>

    ResponderExcluir
  25. Valeu pela paciência..

    Removi a 1º linha do .js:
    var banner= new Array()

    Removi a última linha do .js:
    document.write("<*/style>");

    Como você falou e hospedei o arquivo novamente, testei mais não funcionou..

    Me dá uma luz, só tenho você pra me ajudar já vou entrando no 4º dia de tentativas =/

    ResponderExcluir
  26. era para retirar a linha script type="text/javascript" la.... que postamos aqui em nosso tutorial

    ResponderExcluir
  27. opa eu fiz e deu certo, mais ficou uma imagem em baixo da outra, que parte eu edito para ficar uma imagem só, tipo aleatóriamente cada vez que a página for atualizada a imagem mudar, eh que tipo eah pra o meu header ^^

    valeu, tô quase lá \o/

    ResponderExcluir
  28. Olha, eu estou precisando de muita ajuda!!!
    tem muuita coisa q eu estou querendo saber;
    como fasso pra colocar link's, e outras coisas no meu blog??
    me mande o passo a passo por e-mail pf
    gabriela2008b@hotmail.com

    ResponderExcluir
  29. colocar links é simples, apenas clique na ferramente link na pagina de postagem

    ResponderExcluir
  30. Parabéns pelo post Fabiano, muito bom mesmo.
    A tempos eu estava procurando um script assim, que pudesse ter várias utilidades dentro do blog (marcadores, links, etc).

    ResponderExcluir
  31. eu queria o código para colocar os banners parceiros dentro de um só gadget em html/javascript e que fossem aleatórios na posição, me envia um e-mail para "lucaslf17@gmail.com"

    ResponderExcluir
  32. Lucas, o código é esse do tutorial... só precisa trocar os links e endereço das imagens

    ResponderExcluir
  33. Assim, eu quero por o link aleatório no LINK que indica o nome aleatório no meu tumblr pixelmestre.tumblr.com como devo proceder?

    ResponderExcluir
  34. no código onde tem escrito os titulos (titulo 1, 2, 3... ) é o texto que aparecer como link. Só precisa alterar como quiser

    ResponderExcluir