Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Códigos e Scripts Vanessa S.

Exibir Banner aleatoriamente na sidebar

Quem não gosta de fazer parcerias com outros blogs de bons conteúdos não é mesmo?
Só às vezes os parceiros são tantos, que colocar muitos banners na pagina inicial do blog pode torná-lo pesado demais, fazendo com que o carregamento da página fique lento.
Uma boa alternativa para evitar que isso ocorra, é usar um código/script para exibir os banners aleatoriamente.

Se você quiser exibir os banners dos seus parceiros , desta forma e com seus respectivos links:
Vá na aba “Design ? Clique em “Adicionar um gadget” ? Escolha tipo “HTML/Javascript”.

E cole o seguinte código:


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

Coloque os links e os endereços das Imagem dos Banners de seus parceiros, nos locais indicados acima.

O código acima está configurado para inclusão de 3 banners. Observem que o primeiro banner inicia com a contagem “numero == 0” e o último com “numero == 2”.
Caso você queira incluir mais banners, basta copiar e colar o trecho abaixo quantas vezes for necessário, alterando a numeração de ‘3’ para 4,5… e assim sucessivamente:

if (numero == 3){ // novo banner //
imagem= “ENDEREÇO DA IMAGEM”
site=”URL DO SITE”
}

O código correspondente aos banners que você está adicionando, deverá ser colado antes deste trecho, no js:


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

Após terminar de colocar todos os banners que você deseja, altere a linha que está destacada na cor azul no código postado no inicio do post, modificando a numeração para a quantidade total de banners que você exibirá, ou seja, se você quer exibir 12 banners no total, troque o numero_de_imagens = 3, por numero_de_imagens = 12.

Fique atento à numeração, pois se você repetir alguma, ou se não modificar o numero total de imagens, o código não vai funcionar corretamente.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

22 Comentários

  1. Vládia disse:

    ah! esqueci de dizer que também testei no site writecodeonline.com/javascript/, mas também não funcionou, então imagino que não seja o meu template.

  2. Vládia disse:

    Oi!Olha só estou tentando fazer isso para imagens que possuem 140 x 170 pixels. Hospedei-as no Picasa. Coloquei no código, já revisei, mas não encontro o erro. Parece tudo certo. Mas as imagens simplesmente não aparecem. Nenhuma. Será que tem haver com o tamanho delas ou a posição que se encontra o gadget no template? Estou testando pelo google chrome.

    • Vanessa disse:

      Lamento, mas não há como eu saber onde está o erro, sendo assim,não tenho como te ajudar.

  3. .:: Clau ::. disse:

    SYSTEMCLUB – SuporteINFO
    Experimente hospedar as imagens no picasa.

    Thalles Ribeiro
    Tais recursos podem variar de template para template, sendo assim, lamento, mas não tenho como ajudar.

  4. Thalles Ribeiro disse:

    Fiz tudo certinho, só que no blog, está aparecendo uma imagem por vez. Tem como ajudar ? Obrigado.

  5. Thalles Ribeiro disse:

    Coloquei 5 imagens, só que está aparecendo uma só, tem como me ajudar ?

  6. SYSTEMCLUB - SuporteINFO disse:

    Gostei! Testei o banner e funcionou muito bem. Porém apareceu um problema… Estou usando 4 imagens postadas no 4Shered. Elas aparecem pequenas, bem menor que o banner de meu blogger. ::Como faço para as imagens ficarem do tamanho do banner do topo usando este código. POr padrão da largura da página.

  7. Júnior disse:

    Cara não entendi colar aquela parte logo após oq ?

  8. .:: Clau ::. disse:

    Victor
    Dá uma lida neste post:
    https://www.mundoblogger.com.br/2009/11/imagens-rotativas-no-cabecalho-do-blog.html
    Pode ser que te ajude.

  9. Victor disse:

    Olá Clau, gostaria de trocar o banner do meu blog (http://www.hightechnews.com.br) de acordo com a página que a pessoa entrar. Como posso fazer isso?

  10. .:: Clau ::. disse:

    Sacerdote I.R.Cí
    Ah sim, agora entendi. Já corrigi o código. Obrigada pelo toque 😉

  11. Sacerdote I.R.Cí disse:

    rs… vou tentar explicar!
    sabe aquele botão que fica semi-transparente(parece duas ferramentas de cabinho azul) ao lado dos gadgets enquanto visualizamos nossa página?
    Bom, qd apliquei o seu código e o confirmei, apenas um botão desses ficava totalmente visível(logo abaixo do banner referente ao código) para qualquer visitante(testei visualizando o blog em outros pc's sem estar logado) – Nesse momento não havia entendido e postei a você pedindo ajuda!

    Logo depois, lendo com mais atenção ao código, reparei um pequeno erro no fim dele: o código que ABRE links que se encontra em "document.write…"("a href…"não se encontra fechado no fim. Até tentei postar aqui nos comentários o trecho que me refiro, mas não conseguí! A última letra "a" do código(que se refere a fechar o link), logo depois que coloquei a barra "/" antes da letra "a", o botão de "editar"(que parece duas ferramentas com cabinho azul)sumiu, corrigindo o código e assim funcionando perfeitamente!

  12. .:: Clau ::. disse:

    Sacerdote I.R.Cí
    Desculpe, mas eu não entendi nada!

  13. Sacerdote I.R.Cí disse:

    Clau, descobrí o erro:

    está localizado na última linha de link em "document.write…", ao abrir um ""

    Conseguí consertar,mas acho que vc devia rever o código em seu blog!
    Flw!!!

  14. Sacerdote I.R.Cí disse:

    Oi Clau!
    O código no meu blog funciona, mas…
    o botão "editar" não está sumindo, mesmo que eu faça logout das configurações e tente visualizar como visitante ele ainda continua aparecendo.
    obs: [Em meu blog eu postei no topo em 990×65]

    Pode me ajudar?!

  15. Kairon disse:

    Bom código já coloquei no meu site, valeu!

  16. IdNSeco disse:

    O problema é que preciso do codigo pronto, já que não sei fazer nada parecido…
    Mesmo assim obrigado, seu blog é demais 😀

    Abraços

  17. ::Clau:: disse:

    @IdNSeco:
    Se tem eu não sei. Mas vc pode tentar editar o script e ver se consegue deixar do jeito q vc quer.

  18. IdNSeco disse:

    Olá, eu estava procurando por isso, só que preciso do codigo mais detalhado.
    Por ezemplo, eu quero que os banners fiquem em ordem aleatória só que não apareçam todos de uma vez.

    Tipo, apareçam 4 banners por vez, e cada vez que a pagina é atualizada os 4 banners são substituidos por outros 4 totalmente diferentes.

    Tem como isso?

  19. SocialLie disse:

    Comigo também não está funcionando =(

  20. ::Clau:: disse:

    @Úrsula BlogJD:
    Tenta refazer novamente, talvez vc tenha cometido algum errinho no código, dá uma revisada. Espero que dê certo.
    Obrigada pela visita e pelo comentário. =)

  21. Úrsula BlogJD disse:

    É exatamente isso que eu estou procurando só que o código não está querendo funcinar comigo!!! Buááá =(

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.