Fundo no Blogger que muda conforme o horário

 DEMO

Ontem o Ely Designer escreveu-me perguntando/sugerindo se havia algum código para modificar a imagem de fundo dependendo do horário. Pesquisei na net e encontrei o código no BloggerBuster. Fiz até um template que irei disponibilizar para vocês de hoje para amanhã.

Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

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

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) left no-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) left no-repeat fixed; /*DAS 18:00HS AS 00:00HS*/}</style>')

}
//]]>
</script>

Código de cores

Azul---------------------Endereço da imagem (recomendo que coloque o endereço de sua 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


Se quiser que o fundo do blog fica transparente, dando mais destaque aos backgrounds, procure por:

$(content.background.color.selector) {
  background-color: $(content.background.color);
}

 E o substitua por este código abaixo:

$(content.background.color.selector) {
  background: url(http://www.blogblog.com/1kt/transparent/white80.png) repeat;
}