sábado, 9 de junho de 2012

TUTORIAL- Fundo que muda com a hora do dia

|| ||
Para ver como fica carrega aqui.
Olá, o que achas de um blog que se estiver de dia tem o sol, à noite a lua e assim? Sabias que é possivel, é só seguir estes passos:
(SE FISESTE AQUELE TUTO DE DEIXAR O VISITANTE MUDAR  COR DO BLOG PASSA OS PRIMEIROS PASSOS)
Procure por:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)



 E apague a parte em vermelho                                                              Ler mais -> -> ->



Procure agora por:

 .body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;

}

E apague novamente a parte em vermelho

Procure por:

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)

}


Apague a parte em vermelho

Procure então por:

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;

}

Apague a parte em vermelho e salve.





Agora clique em Layout

Clique em Adicionar um Gadegt



Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias. (recomendo que troque o endereço de minhas imagens pelo endereço de suas imagens, para evitar problemas)


<script language='JavaScript'>
//<![CDATA[
day=new Date()     //..get the date
x=day.getHours()    //..get the hour

if(x>=0 && x<4)  {


document.write('<style type="text/css">body{background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnTSQRLSqccbdWkSTuXlsBmTeyUlVOj6Ii_mUR97j14KlaOnS8rX3-3Cy7JJijsSgqpiXBZ0EiftcHtxL1ga82BCfD5XVDkrtKJjM1UfPTE7DBByakhgU01cgAcjSJ-MeutJ6EHY7K1M/s1600/madrugada.png) leftno-repeat fixed;/*DAS 00:00HS AS 06:00HS */}"></style>')
} else

if(x>=4 && x<12) {

   document.write('<style type="text/css">body{background: #C4E2EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcCQIb9IFJeJoUzyRuqx3EkNBt_dwh4pVsQ65ObbVUkDtFOiRPROmtseJDoAzf83Ftqn2CaMXz5PRWuVVRgzXiCA1ww0K1fM14LDgGbwTBNais3cwt00F64TpGvKILHIAbGDhuDTtIlM/s1600/bright-day-sunrise-background.jpg) left no-repeat fixed;/*DAS 06:00HS AS 12:00HS */}</style>')

} else

if(x>=12 && x<18) {

   document.write('<style type="text/css">body{background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK9jRsubu5xlNWEo4oYGmYbU_7FTz1pUKySAntSh8BN0JMOLqxyL46SSWp7zYEsI5q2bAAcgNpJertb5C5oyxuceJ5DWr3kzt_s5pqBEfC-FKurxpazVIiDzGWnkQvBq3wXpYboctz3Xc/s1600/lazy-day-wallpaper.jpg) left no-repeat fixed;/*DAS 12:00HS A 18:00HS*/}</style>')

} else

if (x>=18 && x<24) {

   document.write('<style type="text/css">body{background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeKZEz6cnftOaDYQuj0yHuxE0JneiIh8PO8H50Uk0k5lsuBx_krsy8J6TEGrZAzWrRw3cJnL06VxYpxDcvPYDs8nLhmJRcU1oYCoY82AH1EXP4VJZ4iKlH40TVNANi7g4Y5Tt-L9CXW8/s1600/noite.png) leftno-repeat fixed; /*DAS 18:00HS AS 00:00HS*/}</style>')

}
//]]>
</script>


Nada disto é preciso mudar, se não tens muita experiência com HTML +e melhor não mecher.
Azul---------------------Endereço da imagem 
Amarelo---------------Se quer que a imagem de fundo se repita, apague esta parte em amarelo
Rosa--------------------Se quer que sua imagem de fundo role junto com o blog, apague o código em rosa



2 comentários: