Pubblicato il 14/12/12e aggiornato il

Come addobbare il blog per le Feste di Natale.

Come personalizzare il blog con immagini natalizie e fiocchi di neve cadenti. Elenco di altre personalizzazioni natalizie.
Tutti gli anni in questo periodo della stagione ho presentato delle personalizzazioni per abbellire il blog con effetti natalizi. A fine post ricorderò alcuni degli articoli che ho già postato e che mantengono intatta la loro validità. L'effetto che vado a proporre inserisce nel layout due immagini fisse nella parte alta del blog e due nella parte bassa oltre a un effetto nevicata che è sempre molto richiesto. L'articolo mi è stato ispirato dal blog Duy Pham. Si tratta di un codice javascript che va incollato nel modello e di cui, come mio solito, ho postato nel web una dimostrazione





Tale codice può essere incollato in una qualsiasi pagina web che supporti il javascript. Se utilizziamo la piattaforma Blogger, si va su Modello > Modifica HTML > Procedi e si cerca la riga </body>. Subito sopra si incolla questo codice


<!-- Addobbo di Natale Inizio -->
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://lh6.googleusercontent.com/-Di8HyBYuJZM/UMtBwjjwuFI/AAAAAAAAdnk/dA-4EZMGaco/s150/alto-sinistra.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://lh5.googleusercontent.com/-JldeQjMDYZo/UMtBt7NC2bI/AAAAAAAAdnc/yWIVWI6azKA/s150/alto-destra.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://lh6.googleusercontent.com/-UCGpY7pJTxg/UMtB2vcQvLI/AAAAAAAAdn0/hnwcqDMVbkA/s640/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://lh4.googleusercontent.com/-xDQzwyfI-uU/UMtBzvGCsrI/AAAAAAAAdns/Osn5TLGrcL8/s180/basso-sinistra.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function festenatale(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=festenatale().clientWidth;doc_height=festenatale().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#ffffff">*</span><\/div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:festenatale().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?festenatale().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?festenatale().scrollHeight:festenatale().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>
<!-- Addobbo di Natale Fine -->


Si salva il modello. I fiocchi di neve avranno la forma degli asterischi * e saranno di colore bianco (#ffffff). Ovviamente si può cambiare la forma dei fiocchi usando un altro simbolo oppure si può modificarne il colore agendo sul codice esadecimale se abbiamo un blog con sfondo bianco. Nella Demo per i fiocchi di neve è stato scelto il color acciaio (#002F80)per renderla più visibile.
Ricordo anche altri articoli che si occupano di personalizzazioni natalizie per blog:
  1. Effetto di Angeli che volteggiano nel blog -
  2. Effetto nevicata e altri oggetti cadenti - 
  3. Effetto neve per blog con sfondo scuro -
  4. Neve colorata che cade nel blog -
  5. Sottofondo musicale di canzoni di Natale -
  6. Slitta di Babbo Natale -
  7. Campane natalizie nel layout del blog -
  8. Luci e luminarie di Natale -
  9. Countdown per Natale e Capodanno -
  10. Neve e Stella cadente da installare nel blog -




14 commenti :

  1. Usato in un mio blog è molto carino :)

    RispondiElimina
  2. Risposte
    1. p.s. hai qualche coniglio nel cappello per i blog a visualizzazione dinamica?

      Elimina
    2. @ Silvia
      I blog a Visualizzazione Dinamica soffrono l'impossibilità di modificare il template e di aggiungere i widget HTML/Javascript.

      Elimina
    3. Bellissimo! E' possibile modificare il numero dei fiocchi di neve che cadono?

      Elimina
    4. @ NicoNico
      E' piuttosto complicato

      Elimina
    5. Ah ok allora lasciamo perdere xD Grazie :)

      Elimina
  3. è possibile levare colore di sfondo????? widget sono messi apposto con bianco nel mio o si vedono contorni!!!!!

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      Prova a cambiare il codice esadecimale del colore accanto a background

      Elimina
  4. Molto suggestivo l'effetto, però è possibile rimuovere l'albero di Natale in basso a sx? Da' l'impressione di "rubarmi" troppo spazio nello schermo. :)

    RispondiElimina
    Risposte
    1. @ Nicola
      Puoi provare con un artificio in modo da non modificare tutto il codice. Non ho testato ma dovrebbe funzionare. Questo codice
      img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://lh4.googleusercontent.com/-xDQzwyfI-uU/UMtBzvGCsrI/AAAAAAAAdns/Osn5TLGrcL8/s180/basso-sinistra.png"

      modificalo in questo modo
      img style="position:fixed;z-index:9999;bottom:30px;left:30px; width:0px; height:0px;" src="https://lh4.googleusercontent.com/-xDQzwyfI-uU/UMtBzvGCsrI/AAAAAAAAdns/Osn5TLGrcL8/s180/basso-sinistra.png"
      oppure se non funzionasse width:0px; height:0px; mettilo in quest'altra posizione
      img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://lh4.googleusercontent.com/-xDQzwyfI-uU/UMtBzvGCsrI/AAAAAAAAdns/Osn5TLGrcL8/s180/basso-sinistra.png" width:0px; height:0px;/

      Elimina
    2. Negativo, il trucco non funziona. Va bene così, grazie lo stesso.

      Elimina
  5. Ciao Ernesto!
    Ho utilizzato i babbo natale cadenti nel mio blog! Sono molto carini!
    Buone feste!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.