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.

79 comentários:

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

    ResponderExcluir
  2. 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. :)

    ResponderExcluir
  3. OCP

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

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

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

    já testei e funcionou normalmente.

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

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

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

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

    ResponderExcluir
  9. fiz a correção, obrigado por avisar

    ResponderExcluir
  10. 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

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

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

    ResponderExcluir
  13. 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

    ResponderExcluir
  14. 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?

    ResponderExcluir
  15. 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?

    ResponderExcluir
  16. 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.

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

    ResponderExcluir
  18. 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.

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

    ResponderExcluir
  20. 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.

    ResponderExcluir
  21. 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.

    ResponderExcluir
  22. 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!

    ResponderExcluir
  23. 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.

    ResponderExcluir
  24. Você pode me dizer como eu faço para mostrar mais de 1 imagem? Como uso o código para muitas imagens, a exposicao de apenas 1 nao é suficiente...gostaria de no minimo 2 ou 3 por vez...

    obrigada

    ResponderExcluir
  25. NÃO CONSEGUIR,NÃO APARECEU A IMAGEM.ENTÃO O QUE É O ENDEREÇO DA IMAGEM E A URL DO SITE?

    ResponderExcluir
  26. endereço da imagem é o lugar onde hospedou a imagem, veja aqui Miniaturas das Imagens não aparecem

    url do site é o endereço do seu blog

    ResponderExcluir
  27. como fasso imagem aletoria no cabeçalho do blog?

    ResponderExcluir
  28. você tem que usar o código que publicamos nesta postagem e colocar esse gadget embaixo do titulo do seu blog.

    então pode usar uma fonte pequena no titulo assim a imagem aleatória ficará com mais destaque servindo de titulo do blog

    ResponderExcluir
  29. Fabiano Roberto As imagens que eu hospedei no www.imageshack.us estão todas certas: Url Exemplo: http://img406.imageshack.us/i/Exemplo.png/, e nenhuma das 4 imagens aparecem, apenas os links que aparecem, mas as imagens nenhumas fica apenas 1 quadradinho com url, se souber responder oque é isso, vou linkar vc ;). http://gamesofkeyboards.blogspot.com/.

    ResponderExcluir
  30. Sim tudo bem, agora ainda não entendi este código.

    Devo mecher alguma coisa aqui??

    document.write(' < p align = " center " >< a href= " ' + site +' " target="_blank"> < img src=" ' +imagem + '" border = " 0 " > < a > < / p > ' ).

    E as imagens devo apenas colocar só o link? ou preciso colocar as tags < img scr=' http://img406.imageshack.us/i/Exemplo.png ' / >
    ???

    if (numero == 7){
    < -- Devo colocar aqui? --> imagem= " http://img406.imageshack.us/i/Exemplo.png/ "
    site="URL DO SITE"
    }

    Tem como explicar por favor, gostei muito deste código, o usuariocompulsivo usava um desse e procurava tanto este código e agora que achei não estou consiguindo colocar.

    ResponderExcluir
  31. pode ser colocar a barra no final do link da imagem que faz o código não funcionar

    ResponderExcluir
  32. Discubri EUREKA! O código não pegava porque eu sou burro, kkkkk..., copíei os links errados. Vlw msm aí Fabiano.

    ResponderExcluir
  33. Olá!
    É possível definir tempo de exbibição de cada imagem diferentemente, ou só tem como definir um tempo para todas?
    Não conheço muito de Javascript, se tiver como, tem como me passar o código? :)
    Obrigada!

    ResponderExcluir
  34. Karen Costa
    esse código não usa tempo, ele sortea uma das imagens cada vez que sua pagina é carregada

    ResponderExcluir
  35. não uso o Blogger, tenho que colocar manualmente no código HTML do meu site, mas em que lugar do código eu coloco ?

    ResponderExcluir
  36. Carla Alves Castelamare
    sim. esse código funciona perfeitamente em sites...

    mas sobre onde colocar depende de como faz para editar suas paginas(qual programa usa)... mas pode ser diretamente no html da pagina

    ResponderExcluir
  37. Ola...
    Seria possível usar esse código no EDITAR HTML do blog para que os banners aparecessem dentro de todas as postagens? e que fossem mostrados apenas nas páginas individuais?

    ResponderExcluir
  38. Emerson

    veja esse tutorial: Conteúdo diferente nas paginas do blog

    lá mostra como fazer um gadget aparecer somente nas paginas individuais, então pode usar esse código dos banners em um gadget de html/javascript e usar o outro código para deixar somente nas paginas das postagens

    ResponderExcluir
  39. Li o outro tutorial, mas ainda assim não consegui usar esse código no Editar HTML. qdo vou salvar ou visualizar da erro.
    Será que vou ser preciso inserir o código em cada uma das postagens?

    ResponderExcluir
  40. deve ter apagado alguma letra ou sinal por engano, por exemplo aspas ou < > /

    ResponderExcluir
  41. Muito legal,

    Vou testar no nosso Blog, é um dos recursos que precisamos.

    Conforme falado, este código escolhe aleatoriamente (em função do momento que o blog é acessado) um imagem e ela é exibida. As imagens trocam cada vez que se recarrega a página.

    Para exibir mais de uma imagem me parece que basta repetir o código no final, fazendo vários document.write.

    Outra idéia interessante é, em vez de usar os segundos da data para sortear a imagem, usar o dia, ou dia/mês, e então teríamos algo como a imagem do dia no Blog. Também vou testar esta ideia.

    Abraços!

    ResponderExcluir
  42. Carlos Henrique
    sua idéia é interessante, certamente se alterar o código usando como base os dias e colocar 30 opções ele exibirá uma diferente por dia...

    só precisaria trocar no código esse linha:

    segundos = hoje.getMilliseconds()

    por:

    segundos = hoje.getDay()


    a palavra segundos não há necessidade de alterar pois é um nome de variavel...

    ResponderExcluir
  43. testando comenario kkkkkkkkkkkkkkkkkkkk

    ResponderExcluir
  44. Só por causa desta postagem vou inserir um link para esse site no meu blog. http://nemersia.blogspot.com

    ResponderExcluir
  45. Bem Legal coloquei no meu site www stihl master.com e ficou beleza nos banner dos parceiros coloquei Destaque do Dia troquei a palavrasegundos = hoje.getMilliseconds()
    por:
    segundos = hoje.getDay()

    e nos banner pequenos 50x50 coloque para mudar quando carega a pagina fuciona perfeitamente quem quizer comferir como fica visitem o site.

    ResponderExcluir
  46. Fabiano, estamos de volta aqui!

    Como sempre, achamos o que procurávamos. Só uma dúvida: queríamos fazer exatamente isso, mas definindo o tamanho da imagem, colocando um título e uma pequena descrição. É possível?

    Abraços, contamos com você!

    ResponderExcluir
  47. @Eu Amo Cães...

    no trecho <img width="120" height="60" src="....

    você poderia colocar qualquer valor e fazer a imagem aparecer neste tamanho, mas provalemente perderá qualidade da imagem dependendo do tamanho original, por exemplo se transformar uma imagem quadrada em retangulo ela ficar com uma qualidade ruim

    ResponderExcluir
  48. muito bom, esse tutorial salvou a minha vida, aproveitando, visitem esse blog ai galera tem muito mais>
    http://portaldomundoteck.blogspot.com/

    ResponderExcluir
  49. Olá, Fabiano!

    Mais uma vez, encontrei aqui no Dicas para Blogs o código exato que eu precisava! Ficou perfeito para fazer a publicação de banners solicitados por um anunciante.

    Obrigado por compartilhar!

    Um abraço!

    ResponderExcluir
  50. Adelson (Gerenciando Blog)
    realmente esses códigos que são simples ajudam muito.

    ResponderExcluir
  51. Olá amigo coloquei em meu blogger mas fica aparecendo a chavinha de edição mesmo eu estando deslogado, oq poderia ser? Obrigado..

    ResponderExcluir
  52. esse código não muda o tamanho das imagens, por isso elas aparecem diferentes

    ResponderExcluir
  53. é assim, ótimo post, mas eu fiz tudo como deve ser, no blogger dá, mas no weebly quando chego ás 601 imagens fica estupido, sabem me resolver?

    ResponderExcluir
  54. acho que não tem como resolver isso para tantas imagens

    ResponderExcluir
  55. Pessoal, tem como fazer para trocar as imagens em um determinado tempo? Tipo... de 5 em 5 segundos?

    Quem souber ajuda aí.

    Obrigado!!

    ResponderExcluir
  56. vou procurar um código que as imagens alterem com tempo marcado e assim que conseguir vou fazer um tutorial sobre isso

    ResponderExcluir
  57. Estarei aguardando essa promessa↑

    ResponderExcluir
  58. Gostaria de colocar uma do lado da outra, e cada um com imagens diferente, como faço?

    ResponderExcluir
  59. Vou utilizar na minha loja virtual! Ótima Dica!!

    ResponderExcluir
  60. Funcionou muito bem, gostei bastante dessa opção

    ResponderExcluir
  61. Muito bom... mas eu queriia saber como eu faço uma lista como por exemplo, só de depoimentos... Tem como ?

    ResponderExcluir
  62. Bruna Rafaela
    altere a linha final do código desta forma:

    document.write('<p align="center"><a href="' + site +'"target="_blank">' +imagem + '<a></p>')</script>


    e no código onde está escrito ENDEREÇO DA IMAGEM coloque o texto

    ResponderExcluir
  63. Ola gostaria de saber se ja encontrou algum codigo pra mostrar mais de uma imagem que funcione no blogspot

    ResponderExcluir
  64. vou publicar logo sobre imagens aleatórias..

    ResponderExcluir
  65. boa meu irmão. isso aí, parabéns conseguir fazer.
    http://infortenda.blogspot.com.br/

    ResponderExcluir
  66. Está tudo OK e funcionando, porém, não há meios de eu arrancar a chavinha no canto inferior esquerdo de todos os banners. Isso já tá me tirando o sono. Se puder me ajudar, estou desesperado, já tenho publicidade vendida e um cliente não quer a chavinha. Meu blog é www.revistapulpito.com.br. Muito obrigado, renato. Se puder me mandar por email, me comprometo inclusive a te pagar, porque estou desesperado. Valeu.

    ResponderExcluir
    Respostas
    1. chavinha? está falando desta imagem: http://img1.blogblog.com/img/icon18_wrench_allbkg.png

      Já tentou excluir o gadget e adicionar novamente? Se não deu certo entre no html do seu blog procure e apague a linha:

      <b:include name='quickedit'/>

      mas somente deste gadget que está com problema, sugiro que coloque um titulo no gadget para ficar mais fácil de achar.

      Excluir
  67. Olá Fabiano,

    Tutorial muito muito bom! me ajudou muito, Obrigado!

    ResponderExcluir
  68. no trecho do código onde tem "border="0" >< a > voce pode adicionar o tamanho da imagem: height="200" width="300"

    então fica deste jeito:

    "border="0" height="200" width="300" >< a >

    mas isso vai definir o tamanho de todas as imagens. Seria melhor usar as imagens já no tamanho correto pois apesar da imagem aparecer no tamanho que você escolher usando este código a imagem vai ficar com uma aparencia de baixa qualidade dependendo do tamanho orginal de cada imagem.

    300 é a largura da imagem
    200 é a altura da imagem

    ResponderExcluir