Banner Rotativo

Para fazer aparecer banners diferentes cada vez que o blog é exibido, você terá um pouco de trabalho, não com o código pois esse é simples mas para ocultar o titulo do blog exibido normalmente e caso no seu modelo não apareça adicionar gadget entre o cabeçalho e as postagens.

Primeiro passo precisamos ocultar o título do blog. Então procure na página editar HTML por algo parecido com o trecho abaixo, não será igual porque cada blog tem a próprio estilo do titulo, mas o importante é #header h1:

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
}


E coloque isso display: none; (inclusive o ponto e vírgula) entre as chaves { }, não importa em qual linha, mas tem que ser dentro das chaves. E clique para salvar.
Isso faz ocultar o título do blog, você não precisa mudar mais nada, ele só vai ocultar, caso resolva mostrar novamente o título basta retirar essa linha que colocamos agora.

Agora veja na pagina layout se aparece o quadro adicionar gadget entre o cabeçalho e as postagens, pois será lá que iremos colocar o código do banner rotativo caso não esteja visível, veja nossa explicação de como fazer isso aparecer essa postagem fala em adicionar elemento de página, pois quando fui publicada era assim que os gadgets eram chamados no blogspot, mas a explicação funciona normalmente. Outra coisa se usar uma imagem no titulo precisa tirar clicando para editar o cabeçalho. Depois disso clique para adicionar um gadget embaixo do cabeçalho, na página que aparece escolha a opção HTML/javascritp e cole o código para criar banner aleatório abaixo:

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 5
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "URL DA IMAGEM"
}
if (numero == 1){
banner = "URL DA IMAGEM"
}
if (numero == 2){
banner = "URL DA IMAGEM"
}
if (numero == 3){
banner = "URL DA IMAGEM"
}
if (numero == 4){
banner = "URL DA IMAGEM"
}
document.write('<div align="center"><img src="' + banner + '" border=0></div>')
</script>

E já está pronto, mas não se esqueça de colocar os endereços corretos das imagens no código, para alterar esse código aqui tem explicado como alterar o código e adicionar imagens, nessa explicação está dizendo sobre colocar frases, mas o código é idêntico a este que usamos aqui para imagens.

Veja também:
Banners Aleatórios com links

51 comentários:

  1. Fabiano,
    obrigado pela visita...
    seu blog agora tá na minha lista de links.
    Venho ao seu blog algumas vezes e sempre encontro coisas relevantes.

    Conto com sua ajuda tb!

    Marcos Lemos - http://ferramentasblog.blogspot.com/

    ResponderExcluir
  2. Olá adm, gostaria que desse um exemplo de blog que usa essa esqueminha ai...só pra eu dar uma olhada...OK..

    ResponderExcluir
  3. neste blog usamos esse código de banner rotativo, só que usamos para mostrar banners de nossos sites.

    veja no menu ao lado, logo no começo tem um link para receber as novidades por email, depois tem um banner e embaixo o link para comunidade no orkut, esse banner que está no meio muda cada vez que você entra no blog, veja qual é o banner agora e clique f5 ou abra nosso blog em outra janela, provavelmente será outro banner naquele lugar.

    ResponderExcluir
  4. vlw mesmo por ter me ajudado....
    um abraço e sucessos....(mais do q ja tem)...
    ah tem um esquema q eu qria saber...
    tipo se eu for postar um codigo html, css, java etc....num da pra posrat pq ele some...
    como eu faço para postar ele????
    tipo nessa postagem....tem os codigos para copiar...
    eu qria fazer uns post...mas num da...

    ResponderExcluir
  5. O meu não aparece o #header h1
    O q faço?

    ResponderExcluir
  6. I૭ℓąทđą

    essa explicação funciona para layout do blogspot, você usa um outro template no seu blog.


    tente colocar
    #header h1 {
    display: none;
    }

    no código html do seu blog

    ResponderExcluir
  7. Fabiano como colocar link no banner, esse script mostra a imagem, eu queria colocar um link para abrir o site desse banner que é mostrado vc sabe como inserir o link.

    ResponderExcluir
  8. Fabiano como colocar link no banner, esse script mostra a imagem, eu queria colocar um link para abrir o site desse banner que é mostrado vc sabe como inserir o link.

    ResponderExcluir
  9. EU QUERIA SABE COMO COLOCAR LINK NAS IMAGENS!

    ResponderExcluir
  10. aqui tem o código para banners com links

    http://dicasparablogs.blogspot.com/2009/03/imagens-aleatorias-com-link.html

    coloquei também no final da postagem caso mais alguém procure por isso

    ResponderExcluir
  11. Pow aki no meu nao funcionou nao!!!tem como me ajudar???Aguardando respotas!!!vlw...

    ResponderExcluir
  12. Ai ADM nao concegui faser essa parada ae não estou querendo faser pq eu tenho muitos banners no meu blog!!!tem como me ajudar???Aguardando respotas!!!vlw

    ResponderExcluir
  13. Lord Jack
    vou tentar achar um jeito mais facil de colocar 3 colunas no blog, mas esse parece ser o unico possível atualmente, mas assim que encontrar publicarei aqui no Dicas para Blogs.

    ResponderExcluir
  14. Muito bom seu blog e seu post por ter gostado peguei seu banner. VALEW

    aprenda-pc-ltda.blogspot.com

    ResponderExcluir
  15. eii naum dáh pa mudar a cor do fundo dele naum??

    entra em contato s puder:

    www.vinik9.blogspot.com

    ResponderExcluir
  16. a cor de fundo não tem a ver com essa postagem, mas o código é background-color: #FFCC99;

    então coloque isso na parte que deseja mudar a cor de fundo, no caso do cabeçalho do blog é #header-wrapper{....

    ResponderExcluir
  17. Gostaria de saber se tem um código para fazer o mesmo com swf.

    ResponderExcluir
  18. precisaria adaptar esse código, colocando o endereço do swf como variavel e ajustar o html dele na parte final, não tentei fazer, mas deve dar certo

    ResponderExcluir
  19. Eu não achei o #header h1, poderia me ajudar?

    ResponderExcluir
  20. procure somente por h1 ou #header-wrapper, mas precisará fazer testes para ver em qual deles é o certo. seu template é diferente então não tem como dizer o lugar exato

    ResponderExcluir
  21. Olá gostaria de colocar esse sitema um meu blog também, fiz como vc disse ali tudo certinho e não funcionou ;/.
    se puder me mandar por email uma outra explicaçãozinha agradeçeria.

    admin@detudodowns.com.br

    http://www.detudodowns.com.br

    Grato.

    ResponderExcluir
  22. escreva para nós e mande o código do jeito que tentou colocar no seu blog e não deu certo

    ResponderExcluir
  23. Olá Fabiano eu aqui denovo obrigado pelo codigo ele funciona e muito bem!
    mas para mim não deu
    ele ficou certa de 10px a + para a direita não ficou no tipo ficou torto fora que eu uso uma lista de links como menu emcima do meu banner!
    Uma lista de links emcima de um java scrips não rolaria!
    Mas o Codigo funciona e atualiza os banners sim!
    Obrigado!

    ResponderExcluir
  24. Não conseguir Fazer algem pode me ajudar?
    e manda o seu msn no caso que vcs quizerem mexer no meu codigo ai eu ADD vcs sei que essa dica tem mto tempo mais eu queria aprender =/

    ResponderExcluir
  25. Kakashi
    qual foi se problema? precisa hospedar as imagens e substituir no código, se quiser envie o código para meu email como tentou usar no seu blog e deu erro e vou procurar o problema

    ResponderExcluir
  26. eu não conseguir fazer eu não achei essa parte : #header h1 {

    ResponderExcluir
  27. Kakashi
    isso varia um pouco conforme o template procure somente por #header e faça alguns testes para saber qual é o correto

    ResponderExcluir
  28. eu achei uma assim #header1, .widget, #main1, #sidebar {

    ResponderExcluir
  29. é que no seu blog tem varios estilos juntos, mas é isso mesmo o trecho que falei #header1 se quiser você pode criar um estilo separado somente com ele

    ResponderExcluir
  30. Olá Fabiano, mandei um e-mail para você e por favor, leia e responda o meu e-mail. Obrigado! Gustavo Reis

    ResponderExcluir
  31. Olá Fabiano,

    Adorei seu blog e suas dicas.
    Coloquei, deu certo, apesar de não conseguir excluir o titulo de jeito algum.... bom
    Mais o que ue procuro é diferente, queria um banner, que ficasse passando, como aqueles sites que tem a opção 1, 2, 3 e 4 de notícias, saca?
    Dai a pessoa pode clicar se quiser que volte a primeira.
    Pode me ajudar?
    O que será que eu fiz de errado para não conseguir retirar o titulo?
    Meu blog: negradoleite.blogspot.com

    Valeu

    ResponderExcluir
  32. Mia Lopes
    entendi o que está querendo vou fazer uns testes sobre esse tipo de banner e publicar um tutorial

    ResponderExcluir
  33. ok mais ate agora ñ conseguir fazerrr :@

    ResponderExcluir
  34. Coloco o código no gadget com as imagens e tudo mais, e confirmo. Quando vou para o blog, não aparece banner nenhum! Sò um espaço vazio... www.hayleywonline.blogspot.com

    ResponderExcluir
  35. Hayley Williams Online
    provavelmente está usando o endereço errado da imagem, envie para meu email o código como está usando e vou procurar o erro

    ResponderExcluir
  36. consegui adicionar esse cabeçalho mas assim que entro no blog ele ó mostra as imagens do banner do cabaçalho e nada mais como ajeito isso?

    ResponderExcluir
  37. veja se alterou o código corretamente... os endereços das imagens estão certos?..

    ResponderExcluir
  38. é possivel mapear os banners assim??

    ResponderExcluir
  39. Anônimo
    é possivel mapear imagens... mas é bom ter um programa que faça isso, pesquise por programa para criar site, editor de html...

    ResponderExcluir
  40. Fabiano Roberto,gostaria tentei de varias formas e nao consegui, veja no meu blog como ficou , se tu poder mim ajudar?
    meu email é
    Rodrigo.universitario@gmail.com
    mim diz se tem como tu mim ajudar e eu te mando o meu q eu fiz e tu faz as correções .abraço

    ResponderExcluir
  41. Rodrigo-noticias
    a maior parte das vezes o problema é o endereço errado da imagem

    envie o ´codigo como usou para meu email e vou olhar

    ResponderExcluir
  42. Olá Fabiano,
    Excelente suas dicas, e que bom que temos pessoas que compartilham de forma voluntária seus conhecimentos.

    Gostaria de saber se existe algum código ou maneira de colocar frases aleatórias dentro do cabeçalho do blog, ou seja, junto com a imagem escolhida.
    No meu blog há uma frase estática junto ao cabeçalho, gostaria que fossem frases aleatórias. É possível?

    Abraços.

    ResponderExcluir
  43. é possivel colocar uma frase.

    você poderia colocar na própria imagem do banner ou colocar outro gadget com um código logo abaixo, veja aqui:
    Imagens ou frases Aleatórias

    se quiser temos um código com frases de nosso outro site: Frases curtas

    ResponderExcluir
  44. Obrigado pelo retorno e códigos, Fabiano!

    Colocar acima ou abaixo do banner eu já descobri como se faz, a minha dúvida é como pôr junto ao lado da imagem.

    O procedimento seria - Layout - Configurar cabeçalho - e na descrição do blog colar o código com as frases?

    Abraços.

    ResponderExcluir
  45. Não, o cabeçalho não permite esse tipo de edição.

    se for colocar as frases em forma de código tem que adiconar um gadget de html/javascript e posicionar esse gadget embaixo do cabeçalho.

    ResponderExcluir
  46. como que ficaria o mesmo código para as imagem alternarem com tempo em segundos ao invés de apenas quando atualizar o site? obg.

    ResponderExcluir
  47. esse código não tem como trocar a imagem de forma automatica...

    tente procurar algum código para slides.

    veja também esse link: Colocar Slides ( Power Point) no blog

    ResponderExcluir
  48. Olá.
    Gosto muito do blog e sempre uso suas dicas. Eu já tinha seguido a explicação uma vez e ficou ótima. Mas hoje, como estava irritada com a quantidade de imagens, resolvi apagar todo o código e refazer a seleção das imagens que ficariam e agora elas não ficam mais centralizadas como antes. Pelo contrário, um pedaço delas fica para fora do espaço. Você poderia me ajudar a consertar isso?

    Obrigada desde já.
    Shelhass

    ResponderExcluir
  49. talvez o problema seja o tamanho das novas imagens que usou em relação a largura total do gadget porque as vezes as margens do gadget ou coluna do blog geram esses problemas de alinhamento por falta de espaço

    ResponderExcluir