Imagens Rotativas no Cabeçalho do blog

Existem tantas maneiras legais de personalizar o Layout do blog, para dar uma aparência mais profissional e exclusiva, deixando o template com o seu jeito.
Você já conferiu aqui várias dicas a respeito de personalização, e hoje vai conferir mais uma forma de personalizar o cabeçalho no seu blog.

Neste tutorial você vai ver como é fácil apresentar várias imagens no cabeçalho de forma que a cada carregamento de página as imagens se alterne, ou seja, exibindo uma imagem diferente no cabeçalho para que , sempre que alguém entrar em seu blog , a imagem do cabeçalho mude.

1º Passo:
A primeira coisa a se fazer : criar as imagens que você irá utilizar no seu cabeçalho. As imagens devem ter exatamente o mesmo tamanho e largura do seu header.

2º passo:
Segunda coisa: Hospedar as imagens que você irá utilizar.

3º Passo:
Agora você precisa conferir no painel do blog se no seu template há a possiblidade de adicionar um gadget , através de “Elementos de Página”.
Se não houver, você terá que fazer algumas modificações no código que define o cabeçalho.

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets” e procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DO BLOG (Cabeçalho)' type='Header'/>
</b:section>

(Se quiser use crtl+f e procure pela 1ª linha)

Altere os seguintes trechos:
Onde está escrito TRUE troque por FALSE.
onde está maxwidgets=’1′ , troque por maxwidgets=’5′; onde está showaddelement=’no’ , troque por showaddelement=’yes’;

Salve as alterações e vá em “design”, você verá que abaixo do cabeçalho existe um campo para Adicionar Gadget, é lá que você irá colar o código para exibir imagens Rotativas no cabeçalho.
Escolha adicionar um gadget do tipo “HTML/JavaScript” e cole o código abaixo:

<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-1"/></a>'
quotes[1]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-2"/></a>'
quotes[2]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-3"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>

No código acima irão aparecer 3 imagens diferentes, mas se você quiser incluir mais imagens, copie esta linha a seguir e acrescente-a no código acima, bem antes do trecho: var whichquote=Math.floor(Math.random()*(quotes.length))

quotes[X]='<a href="ENDEREÇO-DO-SEU-BLOG"><img alt="NOME DO BLOG" src="ENDEREÇO-DA-IMAGEM-3"/></a>'

Troque onde está [X] pelo número correspondente a imagem, que deve seguir uma sequência, por exemplo, se a última foi [2], esta deverá ser [3] e assim consecutivamente.

Agora a cada vez que seu leitor carregar uma página no seu blog, será exibida uma imagem diferente no cabeçalho de forma rotativa.