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 Related Posts with Thumbnails


Link desta Pagina

33Comentários:

OCP disse...

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.

EternoAprendiz disse...

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!!

Fabiano Roberto disse...

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

green eyes disse...

add no meu blog, adoro suas dicas

.: Clube de Ciências :. disse...

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 ^.^

*Aramati* disse...

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

Fabiano Roberto disse...

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

João Andrade disse...

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

Fabiano Roberto disse...

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

Games Show disse...

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

Teste do Douglas disse...

Instalei três banners embaixo de Blogroll.

Lá você pode ver como fica.

andrea viana disse...

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

Fabiano Roberto disse...

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

Petit Art - Maitê disse...

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!

Fabiano Roberto disse...

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.

Anônimo disse...

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!

Fabiano Roberto disse...

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

Edilcarlos Oliveira disse...

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

Igão disse...

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

Fabiano Roberto disse...

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, ....

Igão disse...

Valeu cara, muito foda isso \o/

мя. LopєєzZ disse...

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.

Fabiano Roberto disse...

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

мя. LopєєzZ disse...

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 :)

Fabiano Roberto disse...

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>

мя. LopєєzZ disse...

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 =/

Fabiano Roberto disse...

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

мя. LopєєzZ disse...

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/

Anônimo disse...

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

Fabiano Roberto disse...

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

Giovani Bartz disse...

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).

Lucas Batista Farias disse...

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"

Fabiano Roberto disse...

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

Postar um comentário

Gostou? Compartilhe!