29
2008
Imagem de cabeçalho aleatória
An article by 
Aqui vai um tutorial simples mas bastante útil de como criar imagens aleatórias. Penso que será extremamente útil para quem utilize a plataforma Blogger pois essa não permite o uso de plugins como o MovableType ou WordPress.
Primeiro é necessário ter várias imagens para funcionarem como fundo. Procurem no Google ou sites de fotos imagens relacionadas com o que pretendem.
Este deve ser o código CSS que existe na página do template do blog:
#header {
background:#476 url(“imagemdefundo.jpg”) no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}
De seguida vou criar um script que o que faz é criar um novo estilo de forma a substituir a propriedade «background». Caso o script não funcione, por qualquer motivo, a imagem definida no CSS irá aparecer.
<script type=”text/javascript”>
var banner= new Array() // cria um vector (Array) chamado banner
// de seguida vamos preencher as posições do vector
banner[0]=”endereço da imagem”
banner[1]=”endereço da imagem”
banner[2]=”endereço da imagem”
banner[3]=”endereço da imagem”
banner[4]=”endereço da imagem”
var random=Math.round(4*Math.random()); // aqui é criado um numero aleatório entre 0 e 4 que será relativo á posição do vector (array)
// de seguida vamos escrever o código na página
// banner[random] significa o vector banner na posição random definida anteriormente
document.write(“<style>”);
document.write(“#header {“);
document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat left TOP;’);
document.write(” }”);
document.write(“</style>”);
</script>
Coloquem este script dentro da tag <head></head> e deverá funcionar. Verifiquem se o vosso cabeçalho tem o nome de header, caso não tenha terá de alterar isso no script.
E pronto, se fizeram tudo correctamente agora cada vez que a página for carregada deverá aparecer uma imagem aleatória. Para testar basta carregar na tecla F5 no vosso blog.
9 Comments + Add Comment
Leave a comment
Advertisement
Seguidores
614
899
246
1759
Newsletter
Subscreve as feeds
[...] tutorial é bastante idêntico ao tutorial de imagem de cabeçalho aleatória! Se já o viram então vamos usar o mesmo código mas com uma pequena [...]
Muito muito bom!
parabéns. :yeah:
simsimsim Wow valeu! Era tudo o que eu queria!
Amigo, estou com problema. No header de meu blog tem diferente do seu. O meu tem assim:
/* —– HEADER —– */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 4px;
width: 970px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}
#header {
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 20px;
}
#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}
#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}
#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 1px 20px 25px 20px;
}
#header h1 p, #header .description p {margin:0;padding:0}
#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}
Pstei um codigo a cima mas nao apareceu adireito estou postando mais uma vez.
var bg= new Array() // cria um vector (Array) chamado bg
// de seguida vamos preencher as posições do vector
bg[0]=”imagem/bg1.jpg”
bg[1]=”imagem/bg2.jpg”
bg[2]=”imagem/bg3.jpg”
var random=Math.round(2*Math.random()); // aqui é criado um numero aleatório entre 0 e 2 que será relativo á posição do vector (array)
// de seguida vamos escrever o código na página
// banner[random] significa o vector banner na posição random definida anteriormente
document.write(“”);
document.write(“#head{“);
document.write(‘background: url(“‘+ bg[random] +’”) no-repeat;’);
document.write(“}”);
document.write(“”);
Amigo. estou tendo problemas.. meu site não tem header..
a imagem do “cabeçalho” é no *** #outer-wrapper {
background: url(IMAGEM) no-repeat top; ***
ai eu até mudo o codigo.. mas não acontece nada no cabeçalho..
ele permanece com a imagem do #outer-wrapper { background….”
O que eu faço?
Se puderem me ajudar…
Muito obrigado pelo Tutorial.. ele está otimo!
Galera ajuda eu nao intendi nada
tem como colokar na ordem que tenho q colokar no meu blog com qual quer img ai depois eu mudo VLW =D
5* muito obrigado
Rapaz isso ajudou muito, amanhã vou colocar no meu blog, favoritei a página!