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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qH_Pio-A2CS4ao49ahDlKy9NwKTTgo06YqC8iRmwRkNsuCmdYW3owYwFqePp2CeXU7yeFVB5152VIY69Fpf7niIQgb81Kety2A5wZL-gc8LFDQHItWMwoffVlypE6ZcHPYQVu0V6VX8/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/AVvXsEjcINooAt9T5r-C4_dnYXQnhuLA2qtjhAXE_xAJaCmYXQURrfFUKqWQjoPb9Go5k0R18ckfIiqEr0jUI2Xl-nODX1In3eAGs9MLeUdunRrmjKC7mYR5IBbwmTHtYBxH6ll8HKv_5E6hkcI/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/AVvXsEhnl2X7nLqYMurWzoCkRh3spKelZ6_h8vkcZWiFmSGifbOnYuRhZ01B8mrj-xLyr-vETv-iZm_Mm3hb5dlIyJ-VmcXwBZXF9yJ50i3Ic3d62_YOTBKVnsQ3AffXoliTPpIgHLXUSg1_ZJM/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/AVvXsEh38k871BMwInyzRPimHyXUv9-9O1CmqhCzdOMIa7N-Sgdl4N3d3KttZiWtmiyAy2Ugh5kf5sL6P6PedP4IKSknQ0QKNAx-U1e68o7PlKpB_AGBKArRZSvNAoHAeTfPnS4uAa61ku2j0yc/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: