Imagens Aleatórias com link

Uma boa maneira melhorar seu blog é fazendo parcerias, mas às vezes colocar muitos banners na pagina inicial do blog fica pesado demais, faz demorar muito para carregar, uma boa alternativa é usar um código que mostra banners aleatoriamente, o script para fazer isso é assim:

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 3
segundos = hoje.getMilliseconds()
numero = segundos % numero_de_imagens
if (numero == 0){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 1){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 2){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script>

Você só precisa colocar os links e endereços das imagens nos lugares indicados. Para aumentar o numero de opções, copie e cole esse trecho da ultima opção e cole logo abaixo dela, apenas continuando a contagem, ou seja, troque o numero 2 por 3, 4, 5 e assim por diante para quantos banners quiser usar. Depois que terminar de colocar os banners veja nesta linha:

numero_de_imagens = 3

O numero 3 que está aqui é o numero de opções, quer dizer uma a mais que o numero do ultimo banner, afinal começamos a contagem do 0, então se o ultimo banner das opções for numero 10, coloque 11 no lugar do 3. Por exemplo se fosse colocar 8 banners com links neste código, ele ficaria assim:

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 8
segundos = hoje.getMilliseconds()
numero = segundos % numero_de_imagens
if (numero == 0){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 1){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 2){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 3){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 4){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 5){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 6){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
if (numero == 7){
imagem= "ENDEREÇO DA IMAGEM"
site="URL DO SITE"
}
document.write('<p align="center"><a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a></p>')</script>

Tenha muito cuidado com os números, pois se repetir algum nas opções de banner ou não modificar o numero total o código não funcionará corretamente. Depois de pronto coloque esse código pela página layout, adicionar gadget, html/javascript e cole o código, e já está pronto, cada vez que alguém visitar seu blog irá ver um banner diferente sorteado aleatóriamente. Veja também como colocar imagens normais(sem link) ou frases aleatórias no blog.

Adicionar ao iGoogle ou Google Reader

Link para esta página

Recomende por E-mail


Related Posts with Thumbnails

25 comentários:

MENTALIDADE.COM disse...

Excelente recurso e irei começar a usá-lo no meu site mentalidade.com. Mentalidade

OCP disse...

Gostei desta ideia, mas tenho uma pergunta: existe como colocar de maneira que apareçam 3 ou 4 imagens de cada vez em lugar de só uma?
Explicando: no meu blogue eu tenho uma secção que vinha no actual template para colocar manualmente imagens de posts anteriores, está preparado para colocar 4 posts mas e se eu quisesse implementar este script no lugar, seria possível de fazer aparecer mais que uma imagem de cada vez?
Até agora nunca pensei muito em parcerias, mas talvez não seja má ideia. ;)

Abraço. :)

Fabiano Roberto disse...

OCP

até vou procurar um código assim, já achei um mas ele não funciona no blogspot

Anônimo disse...

Eu uso o código...coloco a imagem e a url mais....a url aparece como texto...não redireciona ...tem como ajudar?

Fabiano Roberto disse...

tente colocar novamente o código, veja se os endereços estão completos com http://

já testei e funcionou normalmente.

Rafael disse...

AKI APARECE ASSIM SOMENTE O LINK DA FOTO MAS A FOTO NAUM APARECE!

Fabiano Roberto disse...

rafael, talvez o endereço da imagem que está colocando esteja errado

CuboDown disse...

Tem um pequeno erro no codigo a parte ali no final tem q fica assim

img border="0" src="' +imagem + '"

Fabiano Roberto disse...

fiz a correção, obrigado por avisar

Vagner Ferreira disse...

Perfeito por aqui!

W!LL!@N disse...

Olá Fabiano queria saber brother se tem como muda o tempo de exibição de cada banner,eu coloquei em meu blog mais nao ta fazendo a troca dos banners.E Tbm essa ideia do nosso parceiro ai de coloca mais imagens pra aparecer de uma so vez é interesante aguardo resposta,abç...
ta ai meu blog http://marilax.blogspot.com

Fabiano Roberto disse...

vou procurar um código que mostre todos os banners.

Luninda disse...

Muito bom, parabens! me audou bastante ! http://euqueropromocao.blogspot.com/

Accs ou Ana Claudia disse...

Muito legal!
Eu já estava querendo saber como fazer isso e minha dúvida está respondida ;D Obg!
E dá uma passadinha no meu blog sobre Club Penguin,
www.mundodepinguins.com

Matheus Santana disse...

Olá Fabio.
Eu tentei usar este codigo em meu blog, mas infelizmente não está aparecendo nem a imagem e muito menos link algum. fica um espaço como se não houvesse nada.

*Seria o tamanho da imagem?
*O que pode ser?

Matheus Santana disse...

Olá Fabio.
Estou tendo um problema com este codigo.

Fiz tudo direitinho como você diz no post, mas infelizmente não aparece absolutamente nada no gadget, nem a imagem nem o link.

Seria o tamanho da imagem?
O que pode está acontecendo?

Fabiano Roberto disse...

Matheus Santana
testei o código e está funcionando, talvez você usou o endereço errada das imagens ou apagou algo no código as aspas fazem parte do código.

Felipe (: disse...

Cara a imagem aparece , somente a primeira , mas ela nao muda ! Não sei porqe , tem como configurar os segundos ? Ou algo do tipo ?

Fabiano Roberto disse...

Felipe
precisa colocar uma imagem diferente em cada linha, claro que quanto menos opções tiver maior será a chance de repetir as imagens cada vez que o blog é carregado.

Anônimo disse...

CAra que inveja eu fiz mas nao apareceu nada, pode me ajudar?

Fabiano Roberto disse...

Anônimo, veja aqui sobre as imagens

Imagem não aparece

Manual do Clicker disse...

Alo amigo, obrigado pela sua reposta cara, mas acho que o problema nao é iamgem, acho que o problema é meu blog memso, porque não funciona o seu codigo aqui no meu, nao quero fazer porpaganda, mas de uma olhada no meu blog

http://manualdoclicker.blogspot.com

Abaixo das noticias existe banner rotativo, mas acima do SLIDE, bem no alto, no headre não aparece banner nenhum, só se eu por um banner normal como o que está lá, mas rotativo não funcioan...
Desculpe o texto grande.

Abraço.

Fabiano Roberto disse...

Manual do Clicker
sempre usei esse código e funciona perfeitamente, envie o código do jeito que tentou colocar para meu email(veja no menu ao lado) e vou procurar onde está o erro.

Garota Antenada disse...

Fiz tudo certinho, apareceu a imagem mas ela não muda de jeito algum, fica estática.
O que aconteceu?
Já vi e revi os erros e não nenhum...

Obrigada!

Fabiano Roberto disse...

Garota Antenada
colocou imagens diferentes no códigos, veja se alterou o numero de imagens no inicio do código, se quiser envie o código para meu email e vou procurar o erro.