Pubblicato il 21/12/10 - aggiornato il  | 18 commenti :

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='http://lh4.ggpht.com/_nT13UtBmmiU/TQ-1tA-cylI/AAAAAAAAQuM/-sSz9rNg_ik/camapne-natale-sinistra.png' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='http://lh3.ggpht.com/_nT13UtBmmiU/TQ-1tdNWwNI/AAAAAAAAQuQ/jOQvnrMfafo/campane-natale-destra.png' 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  .... 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

effetti-natale-blog

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

                                                    campana-natale-sinistra                 campana-natale-destra 
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='http://lh3.ggpht.com/_nT13UtBmmiU/TRBlX3_rOHI/AAAAAAAAQuc/6fGIZA4vdgA/campana.gif' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='http://lh3.ggpht.com/_nT13UtBmmiU/TRBlX3_rOHI/AAAAAAAAQuc/6fGIZA4vdgA/campana.gif' 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

blog-campana-animata-natale
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
coppia-campane-animate-natale
per ottenere un effetto come questo

effetto-natale-campane-cascata-di-neve
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='http://lh5.ggpht.com/_nT13UtBmmiU/TRBlX32NG7I/AAAAAAAAQug/Glzwg7HvS_A/due-campane.gif' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='http://lh5.ggpht.com/_nT13UtBmmiU/TRBlX32NG7I/AAAAAAAAQug/Glzwg7HvS_A/due-campane.gif' 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
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='http://lh4.ggpht.com/_nT13UtBmmiU/TQ-1tA-cylI/AAAAAAAAQuM/-sSz9rNg_ik/camapne-natale-sinistra.png' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='http://lh3.ggpht.com/_nT13UtBmmiU/TQ-1tdNWwNI/AAAAAAAAQuQ/jOQvnrMfafo/campane-natale-destra.png' 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.
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.




18 commenti :

  1. P.S. Ho apportato una piccola modifica alle campane. Anzichè lo "style: absolute" l'ho inserito come "fixed". Stupendo!
    Grazie ancora!

    RispondiElimina
  2. @Benzene
    voglio provare anch'io con fixed, così rimangono sempre visibili :D
    grazie dell'idea. Aggiorno il post

    RispondiElimina
  3. messo ma a me le campane andavano su e sparivano così ho anch'io sostituito con fixed e una campana restava l'altra saliva eehhehehe
    perchè bisogna metterlo a entrambe

    ;-)) boh io ne ho uno che credevo a cristalli e invece è a fiocco ma nel mio ci dona perchè è pieno di foto di neve :)

    RispondiElimina
  4. @Tex Willer
    Sei sempre a brontolare...
    mi sembri diventato Kit Carson :D

    RispondiElimina
  5. io ho messo le stelle di natale ^_^

    RispondiElimina
  6. Ciao,ti ringrazio per gli addobbi di natale,era da un po che li stavo cercando,diventerò un tuo fan su facebook e continuerò a leggere i tuoi post,complimenti per la tua professionalità e competenza. Alla prossima e Buon Natale

    RispondiElimina
  7. @Soffio di Dea
    Bellissime le stelle di Natale in GIF. Ti rubo il link

    http://img412.imageshack.us/img412/493/gl7jw0.gif

    Per chi ama le stelle di natale può sostituire questo URL a quelli delle campane. Sono animate e glitterate

    @Adriano Zangari
    Contraccambio gli auguri di Buone Feste

    RispondiElimina
  8. Sarò la commentatrice più molesta però ogni tanto servo :D ho naturalmente adattato i valori mettendo top: 30px;right:30px :)

    RispondiElimina
  9. @Dea
    Certo che servi! Ma che dico... sei insostituibile *^*

    RispondiElimina
  10. @Parsifal
    Ho un ottimo Maestro! ha ha ha!!!!!

    RispondiElimina
  11. Quell'insostituibile mi sa d'ironico :D :*

    RispondiElimina
  12. Insostituibile forse no... ma se non ci fossi bisognerebbe inventarti ^^

    RispondiElimina
  13. codice catturato e campane posizionate.
    Quanto sono carine!!!!grazie!!!
    Ancora Buon Natale Ernesto,sei un mito!
    un abbraccio
    Lella

    RispondiElimina
  14. grazie mille, auguri di buon Natale e felice Anno nuovo:-)

    RispondiElimina
  15. @Corredi on Line
    Tanti auguri anche a te

    RispondiElimina
  16. Ciao wow sei geniale mamma mia che bell'effetto che fà grazieeeeeeeeeeee di averlo postatoooooo kiss :D

    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.