Imagem aleatória no cabeçalho do Blogspot

Imagem
Como exibir uma imagem diferente a cada carregamento da página.

Quando publiquei o tutorial Como exibir uma descrição aleatória abaixo do título no Blogspot, prometi mostrar também como fazer o mesmo com imagens. Ou seja, como exibir uma imagem diferente no topo (ou cabeçalho) do Blogspot, a cada carregamento da página.

Para felicidade geral da nação, digo ao povo que exibir uma imagem aleatória no cabeçalho do Blogger é tão fácil quanto exibir uma descrição aleatória.

Antes de começar, a primeira coisa que você precisa fazer é checar no painel de controle do Blogger, dentro das opções de Elementos da página, se o seu template permite a inclusão de novos elementos no cabeçalho. Feito isso, vamos ao que interessa:


Como exibir uma imagem aleatória
no cabeçalho do Blogger

Prepare as imagens que pretende usar, elas devem ter exatamente o mesmo tamanho entre sí e a mesma largura total do seu template. Hospede-as e anote a URL de cada uma delas.

Nas opções de Elementos da página remova o cabeçalho original do seu template. Em seu lugar inclua um novo Gadget do tipo HTML / JavaScript com o conteúdo abaixo, adaptando as informações destacadas em vermelho conforme o caso:
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM1.jpg"/></a>'
quotes[1]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM2.jpg"/></a>'
quotes[2]='<a href="http://SEU_BLOG.blogspot.com"><img alt="NOME DO BLOG" src="http://URL_DA_IMAGEM3.jpg"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
Basicamente é isso...

Imagem: knippo is waiting for MNC (^_^)

Comentários

  1. ÓTIMA POSTAGEM!
    IREI UTILIZAR NO MEU PROXIMO TRABALHO!!
    ....
    VALEU BRIGADÃO!

    DiGO

    ResponderExcluir
  2. Humm tô querendo mudar o template lá do blog e vou usar essa dica, valeu...
    ótimo final de semana.
    Abraços

    ResponderExcluir
  3. Com certeza esse artigo fez a felicidade de todos, pois tem uma grande utilidade, eu mesmo serei um dos que vão usar...

    Abraços

    ResponderExcluir
  4. Show!!! Isso vai me ajudar muito. Vlw!

    ResponderExcluir
  5. Ele só altera quando da refresh, certo?

    Vai ser uma grande utilidade pra mim, principalmente no meu blog.

    ResponderExcluir
  6. Funcionou aqui, mas não ficou no mesmo lugar que o banner fixo. Algum modo de arrumar?

    ResponderExcluir
  7. Eu já havia conseguido um hack como esse uma vez. Mas acabei perdendo em uma daquelas formatações de emergência que vez ou outra se apresentam como necessárias.

    Já tenho até algumas fotos selecionadas pra isso. :)

    ResponderExcluir
  8. Essa dica é muito boa, eu sempre ví em fóruns, mas nunca soube como fazer, pena que não uso imagem no cabeçalho. =/

    Abçs!

    ResponderExcluir
  9. Valeu pela dica (post) e pelo comentário lá no 'Cultivando'. Beijos.

    ResponderExcluir
  10. Oi Compulsivo, passei aqui pra agradecer todas as dicas que você e a Juliana nos dão, pois graças a isso pude dar um "tapa" no meu blog, agora ficou bem bacana, aprendi e ainda estou aprendendo bastante com vocês. Grande abraço!

    ResponderExcluir
  11. Faz tempo que estou procurando um tutorial desse...
    Vlw!

    ResponderExcluir
  12. Compulsivo, cada vez mais me surpreendo com as dicas que posta. Já acompanho tudo pelo grupo do Google, mas confesso que seu blog é o sonho de consumo de todo blogueiro... Tudo bem, viajei, mas que suas dicas são uma maravilha, isso é verdade.

    ResponderExcluir
  13. Faz um tempo que eu procura va por isso

    Valeu Compulsivo

    ResponderExcluir
  14. Ótima postagem compulsivo. Muito bom mesmo.

    Abraços,

    ResponderExcluir
  15. Olá,
    Esse hack tambem pode ser usado para inserir banners de outros sites.
    Ex.: Se voce quiser indicar varios sites mas nao quer deixar o seu template feio basta usar esse hack para trocar de banner toda vez que o visitante acessar a pagina.
    Abraços

    ResponderExcluir
  16. @DicaCs, tem razão. Este código pode ser usado em qualquer lugar onde se queira alternar uma imagem e não só no cabeçalho...

    []'s
    Compulsivo

    ResponderExcluir
  17. Olá! Muito interessante! Eu estava atrás de imagens rotativas, pois eu gostaria de colocar banners de patrocinadores em meu blog... Muito Obrigado! Já coloquei até em meu blog... Abraços

    ResponderExcluir
  18. .

    Muito bom...
    o q mais procuro são elementos personalizáveis q dão uma cara mais profissional ao meu blog. Essa dica é excelente.
    vou tentar usar em breve, mas antes quero elaborar bem as imagens q vou usar.

    Valeu pela ajuda!

    Marcos Lemos

    ResponderExcluir
  19. Compulsivo, excelente essa dica.
    Vou colocar com certeza no meu blog!!
    Você como sempre arrazandooooooo nas dicas!!
    Conheci sua cidade, simplesmente maravilhosaaaaaaaaaaaaaaaaaaaa!!!
    Sucesso sempre!!
    Abraços
    Luka

    ResponderExcluir
  20. Saberia dizer porque nada acontece quando tento configurar a cor de fundo do cabeçalho da página? Obrigado.

    ResponderExcluir
  21. Olá! Este artigo é muito útil, porém, não consegui remover o cabeçalho, pois não tem o botão "excluir". Você poderia me informar como removo? Obrigado.

    ResponderExcluir
  22. Já usando em meu blog, como disse o Dicacs não somente no Topo mas onde for necessário :D

    ResponderExcluir
  23. Compulsivo, coloquei no meu blog mas o tamanho fica incorreto, alguas vezes fica com o tamanho certo, mas outras fica um espaço a mais em branco, o que faço?

    ResponderExcluir
  24. Compulsivo!
    Adorei suas dicas, já fiz até algumas alterações (com sucesso) no blog do meu filho.
    Agora, me tira uma dúvida: quero retirar a "barra verde" que está acima do banner do meu blog... não consigo! Help me please?
    http://miguelayan.blogspot.com/
    Obrigada!

    ResponderExcluir
  25. Sorry @Cris, para serviço personalizado só mediante orçamento.Solicite através do formulário de contato de tiver interesse...

    []'s
    Compulsivo

    ResponderExcluir
  26. Otima dica compulsivo...

    Compulsivo voce poderia fazer um post de como colocar parceiros aleatorios... tipo links e banner aleatorios de parceiros??

    se puder cara vlw...

    ResponderExcluir
  27. @Choujitops, use exatamente o mesmo script, porém com imagens menores. Inclua também os links, além das imagens, no código.

    []'s
    Compulsivo

    ResponderExcluir
  28. Cara, valeu, tava procurando por uma dica dessas faz tempo. Se soubesse que era tão fácil tinha colocado antes no meu blog.

    ResponderExcluir
  29. Ei compulsivo,
    gostei da dica, mas qdo coloco ela... ela nao funciona, sabe dizer pq ?

    - antes estava travado pra remover o cabeçalho, ai usei sua dica 'inclusão de novos elementos no cabeçalho.'

    ai consegui remover.., dps abri um html coloquei o codigo, e nao aparece a figura...



    qdo eu usei essa dica aqui, la embaixo...

    http://usuariocompulsivo.blogspot.com/2007/01/imagens-no-topo-do-blogger.html

    deu certo., mas como faço pra ela ficar alterando?


    vlw compulsivo.

    ResponderExcluir
  30. @AllFaiLz.N, proceda conforme o tutorial acima...

    []'s
    Compulsivo

    ResponderExcluir
  31. Muito bom compulsivo, suas dicas valem ouro!
    Sei que pode ser pedir muito, mas quando eu coloco as imagens aleatórias com o nome do blog (no código html), o nome do blog continua clicável? (link de home ou inicio da página).
    Dá pra fazer isso?

    ResponderExcluir
  32. Cara meu temple não tem a opção de add Elementos da página para o cabeçario...ai gostari a de saber um codigo para instalar direto no html do blog...entende...

    ResponderExcluir
  33. @Raposa, no post tem um link que mostra como permitir a inclusão de novos elementos no cabeçalho do seu template... Mas se você quiser também pode colar este código diretamente no seu template, creio que funcione...

    []'s
    Compulsivo

    ResponderExcluir
  34. Compulsivo, como faz para deixar códigos javascript aleatórios.

    Por exemplo: Vamos supor que eu queira coloca no topo do meu blog banner do UOL e do buscape. Mas se eu utilizar esse seu código acima, não vai funcionar.

    Sabe algum modo que funcione?

    ResponderExcluir
  35. @Compulsivo, testei.

    Acontece o seguinte, o banner aparece mas o resto do código depois dele aparece junto, ou seja, ele executa o banner dentro do array e não na saída (document.write).

    ResponderExcluir
  36. Compulsivo, como faço para deixar as imagem sem link nenhum? Porque memso que no espaço para o link eu deixe sem nada ele fica a página inicial.

    ResponderExcluir
  37. Irei UTILIZAR no meu blog

    ResponderExcluir
  38. vo tentar usar o código de outra forma, para mostra um menu ^^

    vlww pelo post!

    muito bom!

    ResponderExcluir
  39. Vlw ae kra.. e c eu quiser colokar + q 3 fotos como eu faço?
    Continuo 3,4,5,6..?
    Posso colokr qntas eu qro?
    Vlw!

    ResponderExcluir
  40. Oi compulsivo, tudo bem?
    Primeiro quero agradecer mais uma vez por este maravilhoso blog e com dicas ótimas, sempre!!

    Agora eu tenho uma dúvida:
    Eu já tinha usado esse código antes com sucesso. Mas no meu novo blog ele em algum banner dá um erro "undefined". já revisei o código, já revisei pra ver se todos os banners estão abrindo corretamente, e já tentei ver o código fonte, pra ver qual banner tá dando erro, mas só que não aparece a imagem, ou lista todos, lá em baixo nos widgets..
    Aí a minha dúvida é: o número de imagens pode interferir? eu coloquei 107 imagens por enquanto... eu imagino que não, mas, não custa perguntar.
    Se não for isso, o que eu posso mudar neste código para que ele não seja aleatório, mas siga uma ordem certa, assim eu onseguiria ver onde está esse erro.

    Ou tem alguma outra ideia?

    Abraço.
    Camila.

    ResponderExcluir
  41. Camila, infelizmente não tenho uma solução para o seu caso, a não ser diminuir bastante o número de imagens que você está usando...

    P.S.: Adorei seu site e já sssinei os feeds ;-)

    []'s
    Compulsivo

    ResponderExcluir
  42. Oi Compulsivo, obrigado pela Resposta, vou tentar diminuir um pouco a quantidade de imagens.

    Ah, já corrigi os feeds, para completo. Não tinha visto que estava resumido, também não gosto de feed parcial.
    Abraços!

    ResponderExcluir
  43. Olá, nossa primeiro muito bom seu blog, já está nos meus parceiros :), bom esse Post é muito bom e útil mas queria saber como usar esse mesmo truque para imagens, por exemplo ao carregar o Site, cada vez ao entrar tem uma Imagen, diferente tem como? Um abraço! ;)

    ResponderExcluir
  44. Assim, tipo no Gadget, tem como alterar as fotos quando carrega o site toda vez que entra tem uma imagem nova!
    Feliz dia Do Amigo! :)

    ResponderExcluir
  45. Olá , eu queria saber se tem como colocar esse codigo no html ?

    ResponderExcluir
  46. nao consigui remover o cabeçalho do blogger

    ResponderExcluir
  47. Usei esse também no meu blog, que tá ficando bem legal graças as "dicas".
    Ótimo trabalho, parabéns!

    ResponderExcluir
  48. Massa ! O negócio é ter paciência pra criar vários cabeçalhos... :D

    ResponderExcluir
  49. Eu não tava querendo fazer isso no meu, mas vim aqui por curiosidade, mas acho que essas dicas vão acabar me ajudando a fazer algo que eu já pretendia faz um tempo: centralizar a imagem.

    Valeu! Gostei dos tutorias, tudo bem explicadinho.
    Apesar de ser um pouco cansativo para aqueles que já entendem certas coisas, mas o importante é que todos aprendem.

    ResponderExcluir
  50. Simplesmente perfeito.
    Parabens compulsivo.

    ResponderExcluir
  51. Muito boa dica. Em breve estaria a utilizando.

    Abraço e sucesso.

    ResponderExcluir
  52. muito boa dica.
    estou a dias procurando como fazer pra mudar a cor do template do blog a cada vez que a página é carregada.
    um exemplo disso esta no site www.vivo.com.br
    se puder ajudar, estarei muito agradecido.
    otimo blog! parabéns.

    ResponderExcluir
  53. Mto bom o pos eu estava a procura para por em meu blog!

    ResponderExcluir
  54. Eu não consigo remover o cabeçalho no meu blogger. Só aparece a opção Cancelar e Salvar quando clico em Editar.
    Como eu faço para remover e no lugar colocar o elemento HTML/Javascript ?

    ResponderExcluir
  55. amigo jáh tentei varios scripts, e nem um deu certo já troquei de templatee tbm não deu, acho que os templates não permitem, como fazer para permitir ?

    ResponderExcluir
  56. @Siga as instruções do tutorial, ora bolas....

    []'s
    Compulsivo

    ResponderExcluir
  57. Aqui o abnner nao mudoui, só ficou o p´rimeiro

    ResponderExcluir
  58. Ola tenho uma duvida. Exemplo um site que tenha 10 patrocinadores, e eu disponibilize espaço de 5, ou seja, gostaria de saber como faço para exibir de 5 em 5 mais de forma randomica, e de forma tbm que nenhuma das 5 imagens seja repetidas sera que alguem poderia me ajudar?

    ResponderExcluir
  59. Mais uma vez o Compulsivo tornando meu blog cada vez melhor!!!
    Muito obrigado!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Qual o significado da sigla DSC nos nomes de arquivos das fotos digitais?