10 junho 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(http://4.bp.blogspot.com/-GCH45R6mkxc/TlAtI6B2kEI/AAAAAAAAAno/oJD8XhSTqYM/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(http://2.bp.blogspot.com/-6GWUTwqMHSs/Tk_OezXGtqI/AAAAAAAAAnY/ibp3pzyaLcg/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(http://1.bp.blogspot.com/-PuTIjNCIZaw/Tk_OiifSaZI/AAAAAAAAAnc/dGJUnp_y1_Y/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(http://2.bp.blogspot.com/-kQ6qKhT2GCw/TlAhcsfJx6I/AAAAAAAAAnk/cPeaQNHPoVU/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: