20 de ago de 2011

Fundo no Blogger que muda conforme o horário




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;
}

Um comentário:

  1. Ola elke !
    Gostei deste hack , mas acho que o script não esta funcionando bem. Fiz tudo o que se pede mas as imagens não estao mudando.
    Seria bom vc verificar seu demo pq ele tambem não transcende as imagens.

    Gostaria muito de usar este hack ,
    se vc o corrigir eu agradeço desde ja ;)

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube