Come addobbare il blog con effetti speciali per le feste di Natale.

Dopo aver presentato l'effetto della neve che cade basato su immagini di fiocchi o cristalli di neve in caduta oscillante e dopo aver proposto l'effetto tempesta di neve con la possibilità di personalizzarne il colore, ho pensato di racchiudere in un unico script alcuni abbellimenti per il blog da utilizzare durante le feste natalizie.

Si tratta di unire insieme la tempesta di neve a delle campane da visualizzare nella parta alta del blog. Ne propongo di tre tipi ma si possono facilmente inserire le immagini che più ci piacciono. Per l'installazione dell'effetto basta andare su Design > Aggiungi un gadget > HTML/Javascript e aggiungere il seguente codice in Sezioni del sito senza immettere il titolo

<!--Widget Natale Inizio-->
<script type="text/javascript" src=" ... jquery-snowfalls.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpw5Zmq2vzZeJisbgXTXG0QrSqHsAca2Zn3F_WCDsV1cWAnT5Lph_0ZF2m8T8Wqy-DhyphenhyphenwZBbNr7DC5XGpYmB-1PfNtrH7O9EQkmoC1_d2PRBsxg3ho0lfmJzdhiq1TOGB3VxQIwIWK6pes/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dX4rMdueNNVAxJ-4Vj_ryBjxM5ZkzZdR3hlsBqc3_KV1X2uPDSMIAJ7h-jHdKF8SGKbXE3HfCk7qFvbT_XoAiqvnkoxGdJ1NtEGrBbEJJgSfo4lH16Vpqwn37yGGSg_SOxdYFmDTR-rM/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script> <script src=' .... cascata-di-neve.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

I due file javascript il cui URL deve essere incollato al posto di  ... jquery-snowfalls.min.js e  .... cascata-di-neve.js possono essere scaricati da questo archivio e caricati su DropBox.
Dopo aver salvato il widget e averlo posizionato in qualsiasi punto del blog, il vostro sito prenderà questo aspetto

con due campane ai lati nella parte alta e una copiosa nevicata. Le immagini delle due campane sono in PNG e hanno gli URL evidenziati di rosso. Si possono sostituire anche con altre immagini caricate su un nostro hosting quale Picasa o SkyDrive.

La posizione delle immagini può essere calibrata per il nostro layout modificando i valori di top:15px;left:0px e top:15px;right:0px che ne fissano rispettivamente la distanza dalla parte alta del blog e dai rispettivi bordi.

Per la nevicata ho utilizzato il colore azzurro ghiaccio che ha questo codice #bff e che dovrebbe permettere di essere visibile anche in blog con sfondo bianco. Nel caso si volesse modificarlo bisogna scaricare questo file, cliccandoci sopra con il destro del mouse e scegliere Salva link con nome. Successivamente si apre con Notepad++ e si sostituisce nell'espressione flakeColor:"#eff" il colore dei fiocchi di neve. Si salva il file in formato JS e si carica su DropBox. Se ne acquisisce l'URL e si sostituisce nel precedente codice.

Le due immagini servite per l'effetto sono le seguenti

                                                                      

Se ne può ottenere l'URL cliccandoci sopra con il mouse e copiandolo dalla barra degli indirizzi. Se si vuole inserire una campane animata in GIF da entrambe le parti del blog occorre copiare questo codice

<!--Widget Natale Inizio-->
<script type="text/javascript" src=" .... jquery-snowfalls.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmDxz6ulnoWeT2S762BqBMvUBLXgzVySM7gti56P8o9Zfnuia6JBI3Xb_NBFqphKf8kqecqNfttMyqb7jJVzPFx90dcosp4ya6tqHOmnq0NJK97r5iu7QRIs61DQQt4aZFP-in2JhyphenhyphenNcQ/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmDxz6ulnoWeT2S762BqBMvUBLXgzVySM7gti56P8o9Zfnuia6JBI3Xb_NBFqphKf8kqecqNfttMyqb7jJVzPFx90dcosp4ya6tqHOmnq0NJK97r5iu7QRIs61DQQt4aZFP-in2JhyphenhyphenNcQ/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script> <script src=' ... cascata-di-neve.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

Dove i file javascript possono essere ottenuti scaricando lo stesso archivio e caricando i file su Dropbox. Anche in questo caso si possono fare le stesse personalizzazioni. L'immagine utilizzata è la seguente


e se ne può ottenere l'URL cliccandoci sopra con il mouse. L'aspetto del blog in questo caso sarà di questo tipo


Lo screenshot non può naturalmente dare il senso del movimento della campana e della neve. Se si vuole inserire una coppia di campane animate come quelle seguenti

per ottenere un effetto come questo


bisogna incollare questo codice

<!--Widget Natale Inizio-->
<script type="text/javascript" src="http://dl.dropbox.com/u/2574553/jquery-snowfalls.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHqv0H9NA4x3gEUCqYdmGukSnSDRcUwsn4b9OHl5EALo-e2atu0Lu-JdQvvOCkBSOQ_ns5-_ub42_eZCDr3Z5FRrASG2-ie_Q_K3svHDQXVaxfa74_YIwuLbIVE6PGrNGYTU10bmpM4O7/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHqv0H9NA4x3gEUCqYdmGukSnSDRcUwsn4b9OHl5EALo-e2atu0Lu-JdQvvOCkBSOQ_ns5-_ub42_eZCDr3Z5FRrASG2-ie_Q_K3svHDQXVaxfa74_YIwuLbIVE6PGrNGYTU10bmpM4O7/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script> <script src='http://dl.dropbox.com/u/2574553/cascata-di-neve.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

che può essere personalizzato come i precedenti. Di questa ultima versione ho anche creato una

• Demo dell'addobbo natalizio per il blog -

Concludo questo post presentandovi il codice per inserire solo le campane senza l'effetto della nevicata

<!--Widget Natale Inizio-->
<script type="text/javascript" src="http://dl.dropbox.com/u/2574553/jquery-snowfalls.min.js"></script> 
<script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpw5Zmq2vzZeJisbgXTXG0QrSqHsAca2Zn3F_WCDsV1cWAnT5Lph_0ZF2m8T8Wqy-DhyphenhyphenwZBbNr7DC5XGpYmB-1PfNtrH7O9EQkmoC1_d2PRBsxg3ho0lfmJzdhiq1TOGB3VxQIwIWK6pes/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dX4rMdueNNVAxJ-4Vj_ryBjxM5ZkzZdR3hlsBqc3_KV1X2uPDSMIAJ7h-jHdKF8SGKbXE3HfCk7qFvbT_XoAiqvnkoxGdJ1NtEGrBbEJJgSfo4lH16Vpqwn37yGGSg_SOxdYFmDTR-rM/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

Ho scelto le due campane in formato PNG e quindi non animate. Si possono sostituirne gli URL che sono stati evidenziati di rosso con quelli di immagini in GIF. Anche in questo caso vale tutto quello detto in precedenza in quanto a posizionamento delle immagini attraverso la modifica dei numeri di pixel dalle distanze dai bordi.

• Demo online delle due campane inserite per le Feste di Natale - 

Aggiornamento: L'autore di Benzene4Ever mi ha fatto presente che si possono personalizzare le campane inserendole come immagine statica quindi sempre visibili anche se si scorre la pagina verticalmente.
Se si preferisce questa impostazione, basta sostituire nel codice i due attributi
position:absolute; con position:fixed;
Devono essere sostituiti a entrambe le campane altrimenti una sta fissa e l'altra si muove con la pagina.