13 de mai de 2008

Imagem principal (header) aleatória

Para que sua imagem principal mude sempre a cada vez que seu visitante entra no blog é algo um pouquinho trabalhoso, mas relativamente simples.
Veja AQUI o resultado, claro que ao entrar você terá que clicar na tecla F5 do seu teclado para que a imagem modifique.






A primeira coisa a fazer é salvar um desses dois quadradinhos em seu PC. Se o fundo de seu Blogger for branco, salve o quadradinho branco, se for preto, o preto, se for de outra cor, bom, faça um quadradinho então no paint do seu pc na cor de seu blog.
*Atenção onde o salvará, precisaremos dele em instantes.










Agora vá até "Elementos de página" em seu Blogger e abra o cabeçalho (onde está o título de seu blog)








Clique em procurar para encontrar o quadradinho que vc salvou a pouco.


Deixe selecionado "Em vez de título e descrição"






Aí está o quadradinho.


Agora salve.



Agora clique em "Adicionar um novo elemento de página"
ao abrir a janela clique em "HTML/Javascript"

Adicione aí o código abaixo. Coloque o endereço de suas imagens e salve.



<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,4);
if (randHdr == 1) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 2) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 3) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
} else if (randHdr == 4) {
document.write('<img src="AQUI O ENDEREÇO DE SUA IMAGEM">')
}
</script>





Agora arraste o widget do cabeçalho para baixo e coloque o widget com suas imagens para cima modo que ele fique acima dos outros widgets.

    4 comentários:

    1. Caro Elke di Barros, deu quase tudo certo, a cada vez que entro no blog (aperto F5), a imagem é trocada, porém uma certa imagem não parece de jeito nenhum (obs.: o logo do meu blog com o Scrat, ah também coloquei ao todo 8 imagens, alterei o "var randHdr = randRange(1,4)" para (1,8)), poré elas não aparecem no lugar do Header e sim na sidebar lateral direita e só um pedaço dela (da uma olha lá pra vc vê http://www.aeradodownload.com/)!!!
      Como faço para solucionar esse problema?

      Aguardo resposta.

      Desde já agradeço pela excelente dica e atenção.

      ResponderExcluir
    2. Adorei! Vc explica de uma maneira muito simples. Obrigada!

      ResponderExcluir
    3. Nossa, você é meu/minha herói/heroína! Deus te ilumine de maneira extraordinária! Viva você!

      ResponderExcluir
    4. Nossa!
      Eu tinha visto essa função em um blog e fiquei babando.
      Muito obrigado por postarem esse tutorial!

      ResponderExcluir

    A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


    Copyright © Templates e Acessórios |
    Design by Elke di Barros | Tecnologia do Blogger
      Twitter Facebook Google + YouTube