15/05/2009

Fazendo exibição de banners em posição randômica

Este script serve para quando você possui vários parceiros ou banners e recebe reclamações que os banners ficam muito em baixo ou ficam questionando você por que o banner de ciclano está lá no topo e o dele não. Para resolver este problema criei este sistema de randomização de banners que a cada vez que a página é recarregada os banners aparecerão em ordem aleatória na página.
Este script você colocará no local onde aparecerão os banners, então entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:

<script type="text/javascript">
/* Esta função irá fazer o randômico dos banners */
function randOrd()
{
return (Math.round(Math.random())-0.5);
}
/* Função que irá ecrever os banners na tela*/
function randBan(){
var parceiros = new Array();

/* Aqui você coloca a quantidade de banners que você irá rotacionar, voce pode criar de parceiros[0] até parceiros[N]. O exemplo abaixo é o exemplo usado em meu site que é exibido a lista de banners um abaixo do outro (colocarei apenas 3 banners para nao enxer muito a tela de código)*/
parceiros[0]='<a href="http://www.caixapretta.com.br" target="_blank" title="Caixa Pretta - Desligue a TV e vá ler um blog!"><img border="0" src="http://www.caixapretta.com.br/wp-content/themes/caixapretta/imagens/banner_cp.jpg"/></a>';

parceiros[1]='<a href="http://www.ocioso.com.br/default.asp" target="_blank" title="Está no seu momento de descanso né? Entao clique aqui!"><img border="0" alt="Está no seu momento de descanso né? Entao clique aqui!" src="http://www.ocioso.com.br/imagens/icone.gif"/></a>';

parceiros[2]='<a href="http://www.chongas.com.br" target="_blank"><img border="0" alt="As novidades da internet" src="http://i178.photobucket.com/albums/w268/lamenza/selo_chongas_120x60px.gif"/></a>';

//Aqui iremos randomizar a posição dos banners
parceiros.sort( randOrd );

//Aqui iremos escrever os banners em sua ordem aleatória
for(i=0;i<=parceiros.length-1;i++) document.write(parceiros[i] + '<br>');
return;
}
randBan();
</script>


Salve e verifique se os banners estão alternando, depois disso basta você trocar os endereços dos site e imagens como quiser. Para colocar mais banners basta continuar repetindo a função parceiros[2]='....', claro que dando continuidade a numeração.

Veja também:
Mostrar Banners ou Imagens Aleatórias
Banners Deslizando
Colocar barra de rolagem no blog

Dica enviada pelo Site Boas Promoções

Related Posts with Thumbnails

44 comentários:

  1. Amigo, existe algum script onde eu possa saber quais os arquivos mais baixados no meu blog e pudesse exibir essa lista no proprio blog?

    ResponderExcluir
  2. Thandernão consigo lembrar de um script para saber quais os arquivos mais baixado no blog.

    mas você pode colocar um contador de visitas do analytics no blog então saberá quais as postagens mais visitas, imagino que seja um download por postagem, então terá uma idéia de quais fizeram mais sucesso, ou seja tiveram mais visitas

    ResponderExcluir
  3. Obrigado Fabiano pela dica, Valeu!

    ResponderExcluir
  4. Olá Fabiano!!
    Estava à procura desta dica faz tempo. Parece um pouco complicado mas vou experimentar.
    Achas que é possivel fazer uma lista para os banners tal como tu tens para os links das parcerias??
    Um abraço de um fã do outro lado do Atlântico.

    ResponderExcluir
  5. Lucaimura (Luca BD)
    Não entendi o que você quer, o que viu em minhas parcerias que gostaria de usar com os banners?

    ResponderExcluir
  6. Olá Fabiano!!
    O teu blogroll tem a forma de um menu com um botão de rollup (não sei se esta é a designação correcta??), e eu queria saber se em vez de ter os links, podia colocar os banners.
    Um abraço.

    ResponderExcluir
  7. Ei Camarada..
    Nao Adianta..
    Eu Nao Conseguir Fazer Aquilo Lah

    Eu Nao Entendi..

    Aquela Segunda Parte e a Terceira

    Ate Aquela Dos Banner Conseguir..

    So Que Depois Nao Sei Onde Vai a Segunda Parte e Nem 3 Parte..

    Nao Tem Como Voce Refazer Ai No Final Coloca Tudu Pronto..

    Ai So Nos Pegar e Editar Os Banner e Coloca Em Nosso Site !

    Sera Que Poderia Fazer Esse Milagre Para Nos :D !

    ResponderExcluir
  8. Eu Tb Estou Com a Mesma Duvida Que o Anonimo De Cima..

    Ajude-Nos !

    ResponderExcluir
  9. o código está pronto, ele contem explicações dentro do código mas não atrapalham em nada o funcionamento.

    é só copiar o código inteiro e trocar os links dos banners

    ResponderExcluir
  10. eu queria tipo organizar os FILMES os desenhos e outras coisas no BLOG.
    COmo faso isso?

    ResponderExcluir
  11. Rfael para organizar as postagens use os marcadores

    ResponderExcluir
  12. obrigado pela dica vo tentar isso ;)

    ResponderExcluir
  13. ainda estou com duvida...

    tem como me ensinar?

    ResponderExcluir
  14. Rafael, o código é esse que está na postagem, não tem outro jeito de explicar, é só trocar o códigos dos banners e colocar no seu blog pela pagina layout, adiconar gadget, html/javascript.

    primeiro coloque no blog do jeito que está só para ver aparecer, depois troque os links e as imagens um por vez.

    ResponderExcluir
  15. Oi,
    eu queria saber se em
    "/* Esta função irá fazer o randômico dos banners */" e
    /* Função que irá ecrever os banners na tela*/ e !//Aqui iremos randomizar a posição dos banners" e em "//Aqui iremos escrever os banners em sua ordem aleatória"
    é para substiruir por alguma coisa e se sim, por oq?
    Vlw

    ResponderExcluir
  16. ola não entendi muito bem oque mais q eu tenho q alterar ali nos codigos fica os banners e um tanto de escrito e nao fica aletorio se puder me ajudar agradeço http://www.BrindesRox.Co.Cc

    ResponderExcluir
  17. Maicon

    tem que alterar a parte que são os banners, envie o código do jeito que está tentando colocar no seu blog para nosso email.

    ResponderExcluir
  18. Tem algum codigo para deixar todas as imagens de um post com o link do post?

    ResponderExcluir
  19. quando você colocar uma imagem na postagem ela já vem com um link para a própria imagem, então é só trocar o endereço, mas tem que fazer uma por vez não tem como alterar todas de uma vez só.

    ResponderExcluir
  20. Parabéns pela dica, sempre que procuro no Google é aqui que estou achando :D

    ResponderExcluir
  21. não consegui :/

    eu n entendi a parte do randomizar o blog

    me add no msn ?

    leo_sertori_@hotmail.com

    ResponderExcluir
  22. Leo, vou responder por email, mas não uso MSN

    ResponderExcluir
  23. Amigo, achei muito confuso mesmo... será que você faria a gentileza de me enviar o código sem os comentários?
    girlsinpepper@gmail.com
    Abraços! E parabéns pelo blog!

    ResponderExcluir
  24. O'que é rodatomica nao entendi?
    mente fertiu

    ResponderExcluir
  25. Ebaaaa naum entendi nadaa!
    explica :>

    ResponderExcluir
  26. é melhor colocar o código no blog e vendo ele funcionar na pratica fica mais facil entender o tutorial

    ResponderExcluir
  27. Fabiano tem como juntar esse código com um de outro tutorial que você fez ensinando a colocar banners organizados?

    ResponderExcluir
  28. @Rosiel T.S. sim, você só precisa colocar esse código no lugar do código dos banners entre as divs

    ResponderExcluir
  29. @Fabiano Roberto eu coloquei entre as divs como você falo, mas os banners apareceram em escada olha nessa imagem como fico.

    ResponderExcluir
  30. tente usar esse outro código:

    <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('<a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a>')</script>


    mas para fazer ficar lado a lado veja aqui: Organizar Banners ou Pagina de Parcerias entre Blogs

    é o que fazendo em nosso site com imagens do Frases Curtas

    ResponderExcluir
  31. e se tiver duvidas sobre como alterar o código veja aqui: Imagens Aleatórias com link

    ResponderExcluir
  32. @Fabiano Roberto ainda não deu certo, você podia junta os dois códigos pra organizar banners e esse que você falo e me mandar por e-mail? faz só três banners de exemplo que me viro.

    rosielts@r7.com

    ResponderExcluir
  33. fica assim
    <style type="text/css">

    .galeria img{text-decoration: none;margin: 30px;padding: 2px;float: left;border: 1px solid #000;background-color: #FFc;}

    .galeria a:hover img{border: 1px dashed #009;background-color: #FF0;}

    </style>

    <div class="galeria">

    <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('<a href="' + site +'"target="_blank"><img src="' +imagem + '"border="0"><a>')</script>

    </div>

    ResponderExcluir
  34. Bom dia Fabiano, o meu problema é para posicionar o meu banner. Eu coloquei uma imagem maior que o meu layout, para que ocupe mais espaço, mas ela esta mal posicionada, verticalmente eu ja consegui arrumar, mas horizontalmente ela esta torta, ja coloquei center, right e left no codigo mas não funciona, existe algum código CSS que eu possa posicionar o meu banner onde eu quiser?

    ResponderExcluir
  35. Lucas
    coloque o código todo dentro da tag center assim:

    < center > código completo que mostramos na postagem < / center >

    ResponderExcluir
  36. mas é claro isso não resolve o problema de imagens com tamanhos diferentes somente centraliza todas elas

    ResponderExcluir
  37. Eu já coloquei dentro da tag center, tmb ja usei right e left mas não resolveu. Eu quero que a imagem continue maior que o layout, essa é a idéia, só quero posicioná-la horizontalmente, existe um CSS para isso mas eu não me lembro, por isso te pedi ajuda, tô feito loco procurando e não acho um código pra fazer isso.

    ResponderExcluir
  38. mas se a imagem for maior que o layout vai gerar erros principalmente em navegadores diferentes.

    seria melhor colocar o gadget em outro lugar com mais espaço

    ResponderExcluir
  39. Se o código estiver correto, não gera erro nenhum, veja um exemplo nesse blog: http://downloadtudomaster.blogspot.com/ O banner ocupa toda a tela, justamente o que estou tentando fazer.

    ResponderExcluir
  40. Lucas, você está falando desta imagem?
    http://dl.dropbox.com/u/28869259/Template-DTM/HEADER.jpg

    ela tem 2000 px de largura é está como uma imagem de fundo centralizada, veja aqui: Posicionar imagem de fundo

    no meu computador(1440 de largura) também ficou bom, mas se for em resoluções menores pode cortar a imagem

    ResponderExcluir
  41. Infelizmente não funcionou, simplesmente aparece o código no blog. Não sei porquê o blogger redimensiona automaticamente os banners, isso impede que deixamos do jeito que quisermos, alinhá-lo então, esses erros e falta de opções para personalizar certamente faz o blogger perder espaço, deviam rever essas limitações irritantes, já perdi dias só pra resolver isso e nada! Já estou pensando em abandona-lo e escolher uma plataforma mais viavel, não consigo arrumar esse maldito banner.

    ResponderExcluir
  42. teria que colocar a imagem diretamente no html, mas depende do seu template para saber qual o estilo CSS

    ResponderExcluir
  43. tente usar a imagem neste trecho: .content-outer{....

    ou veja aqui como localizar codigos no seu blog: Achar e Resolver Problemas com Códigos HTML no Blog

    ResponderExcluir