Imagem aleatória no cabeçalho do Blogspot

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:



Basicamente é isso...