Pubblicato il 12/12/13e aggiornato il

Effetti speciali da inserire nel blog per le Feste di Natale.

Come inserire nel blog effetti natalizi per abbellirlo in occasione delle Feste.
Durante le Feste di fine Anno è usanza tra i blogger di abbellire il proprio sito con immagini e effetti natalizi. Questa operazione non è tipica solo del Natale ma si osserva anche per Pasqua e per feste molto caratterizzate quali San Valentino e Halloween. Con questo articolo è mia intenzione elencare tutta una serie di personalizzazioni che possono essere inserite nel blog durante le Feste di Natale. Molte di esse sono compatibili quindi se ne possono aggiungere anche più di una contemporaneamente.

Molti degli effetti che vado a presentare sono estratti da post già pubblicati che sono stati rivisitati e corretti e che dovrebbero funzionare nei blog di tutte le piattaforme anche se come sempre farò riferimento a quelli su piattaforma Blogger per quello che riguarda la procedura di installazione.

ADDOBBO DI NATALE CON NEVICATA


addobbo-natale

Con questo effetto si inserirà nella parte bassa un albero innevato con relativo manto di neve, nella parte alta due festoni natalizi e una fitta nevicata che per ragioni di visibilità ho colorato di blu



Per la sua installazione si va su Modello > Modifica HTML e si cerca con Ctrl+F la riga </body>. Subito sopra si incolla il seguente 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 -->

Le personalizzazioni più rilevanti riguardano la forma dei fiocchi ( * ), il colore dei fiocchi #ffffff e quello della neve :#f5465a. Per questo e per altri codici i meno esperti possono fare riferimento al post sui codici dei colori per modificarli in base alle loro esigenze.

ANGELI CHE VOLANO NEL BLOG


Si tratta di un effetto che mostra degli angeli che partendo dal fondo della prospettiva si portano in primo piano volteggiando. È possibile scegliere l'immagine in GIF di tali angeli



Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice
Si salva. Le personalizzazioni riguardano il grado di opacità settato in 0.5 e 50 oltre a
var numberOfGhosts = 12; /* Numero degli angeli */var ghostSpeed = 0.9; /* Velocità */var setTimeOutSpeed = 50; /* Tempo di permanenza */
Si possono usare anche gli URL dei seguenti angeli

          angelo-gif          angelo2-gif     angelo3-gif

Si può cliccare con il destro del mouse su ciascun angelo per poi scegliere Copia URL Immagine e sostituirlo nel codice dell'effetto all'indirizzo colorato di rosso.

EFFETTO FOGLIE CADENTI


Questo effetto è più autunnale che invernale ma ha sempre un certo fascino. Occorre copiare il
e modificarlo nell'URL della foglia e negli altri parametri di configurazione usando Notepad++ . Si possono usare le seguenti foglie il cui URL si può ricavare cliccandoci sopra con il destro del mouse e scegliendo Copia URL Immagine (OS Windows)

foglia1 leaf1.js foglia5 leaf5.js
foglia2 leaf2.js foglia6 leaf6.js
foglia3 leaf3.js foglia7 leaf7.js
foglia4 leaf4.js foglia8 leaf8.js

Esiste anche una dimostrazione dell'effetto relativa alla prima foglia:



Per l'installazione si deve salvare il file modificato con Notepad++ col nome di leaf1.js. Tale file va caricato su Google Sites in modalità Schedario oppure su Dropbox se si ha un dominio personalizzato. Si va poi su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice

<script src="URL di leaf1.js" type="text/javascript"/></script>

dove ovviamente si può scegliere la foglia che più ci piace.

EFFETTO NEVE O ALTRI OGGETTI CADENTI


Si parte dal codice fondamentale di Dynamic Drive per l'effetto caduta che può poi essere personalizzato
In questo codice oltre a configurare il numero di oggetti da mostrare contemporaneamente e dopo quanto tempo devono scomparire si possono modificare i due URL delle immagini a seconda del tipo di fiocco di neve o dell'altro oggetto che vogliamo veder cadere nel nostro blog



babbo-natale snow1 snow2 snow3
snow4 snow5 snow6 paccodono

Per usare i fiocchi e oggetti mostrati nella tabella basta cliccarsi sopra con il destro del mouse e copiarne l'URL. In un blog su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice mentre in un sito Wordpress lo stesso codice si incolla su Aspetto > Widget > Testo.

INSERIRE UN SOTTOFONDO MUSICALE DI CANZONI NATALIZIE


Con questo effetto tutti i visitatori che apriranno il sito ascolteranno per alcuni secondi una canzone casuale che verrà riprodotta automaticamente. Ho raccolto i pezzi MP3 in un file ZIP di Dropbox


Se provate a pigiare su F5 per ricaricare la pagina ascolterete un altro jingle natalizio tra quelli presenti. Questi brani musicali li ho già caricati su Google Sites. Se avete un dominio personalizzato dovete usare Dropbox o un hosting personale. Chi ha un blog del tipo Blogspot può andare su Modello > Modifica HTML e cercare la riga </body>. Subito sopra va incollato questo codice

<!-- CANZONI E JINGLE NATALIZI INIZIO -->
<script type='text/javascript'>
//<![CDATA[
// Suoni di Natale by http://www.ideepercomputeredinternet.com
var natale = [
"https://sites.google.com/site/musicafilemp3/natale/1Deckthe.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1HejWDzien.mp3",
"https://sites.google.com/site/musicafilemp3/natale/1XmasTre.mp3",
"https://sites.google.com/site/musicafilemp3/natale/2SilentN.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Ave.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3FirstNoel.mp3",
"https://sites.google.com/site/musicafilemp3/natale/3Hark.mp3",
"https://sites.google.com/site/musicafilemp3/natale/4Greensl.mp3",
"https://sites.google.com/site/musicafilemp3/natale/DeckTheHallsInD.mp3",
"https://sites.google.com/site/musicafilemp3/natale/Jingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pFirstNo.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pJingle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pUnFlambeauJeannette.mp3",
"https://sites.google.com/site/musicafilemp3/natale/pWeWishY.mp3",
"https://sites.google.com/site/musicafilemp3/natale/SilentNightInA.mp3",
"https://sites.google.com/site/musicafilemp3/natale/tu-scendi-dalle-stelle.mp3",
"https://sites.google.com/site/musicafilemp3/natale/WeWishYouAMerry.mp3",
];
var rotazione = Math.random()*natale.length;
var numero = Math.floor(rotazione);
document.write('<iframe style="width:0;height:0;" src="http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/google-audio.xml&up_MP3='+natale[numero]+'&up_START=Yes" allowTransparency="true" frameborder="0" scrolling="no"></iframe>');
//]]>
</script>
<!-- CANZONI E JINGLE NATALIZI FINE - http://www.ideepercomputeredinternet.com -->

Possono essere eliminati gli URL dei jingle che non ci piacciono o possono essere sostituiti da altri mantenendo la stessa sintassi. Ovviamente si deve salvare il modello.

SLITTE DI BABBO NATALE




Per inserire questa slitta si va su Modello > Modifica HTML, si cerca la riga </body> e subito sopra si incolla il seguente codice

<!-- Slitta Babbo Natale Inizio -->
<marquee scrolldelay='100' style='position:fixed; top:0; right:0; z-index:1000; width:100%;'><img src='https://lh3.googleusercontent.com/-DxBG25VPAXY/TuM0d0DAXRI/AAAAAAAAVso/l_g37X9Tjok/s350/slitta-babbo-natale.gif'/></marquee>
<!-- Slitta di Babbo Natale Fine -->

Si salva il modello. Il parametro scrolldelay='100' ne determina la velocità di scorrimento. Diminuendo il numero aumenterà la velocità della slitta. La seconda slitta che propongo è la seguente



che sfreccerà nel blog a intervalli più o meno regolari. Si va sempre su Modello > Modifica HTML e sopra il tag </body> si incolla questo codice

<!-- Santa Claus Sleigh -->
<script src='http://blogparts.giffy.me/0017/parts.js' type='text/javascript'/>
<!-- Santa Claus Sleigh -->

Si salva il modello. Ecco la demo di entrambe le slitte



EFFETTO NEVICATA CON STELLA CADENTE


Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il
Si può verificare il suo effetto in questa pagina




CONTATORE PERSONALIZZATO PER NATALE


Si può anche presentare un countdown personalizzato dei giorni, ore, minuti e secondi che mancano a Natale. Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice

<style>
#contatore_natale {
color:#003366;
font-size:150%;
font-weight:bold;
}
</style>
<div id="contatore_natale">
</div>
<script language="JavaScript">
var bp_date_target = new Date("December 25, 2013 00:00:00");
var bp_date_now = new Date();
var messaggio_completo = "Auguro a tutti un Buon Natale";
if (bp_date_now >= bp_date_target) {
document.getElementById("contatore_natale").innerHTML =  messaggio_completo;
} else {
bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
if (bp_time_difference <= 0) {
document.getElementById("contatore_natale").innerHTML =  messaggio_completo;
return;
}
bp_count_down_message ="A Natale mancano " + bp_format_seconds(bp_time_difference, 86400, 100000) + " Giorni " + bp_format_seconds(bp_time_difference, 3600, 24) + " Ore " + bp_format_seconds(bp_time_difference, 60, 60) + " Minuti e " + bp_format_seconds(bp_time_difference, 1, 60) + " Secondi";
document.getElementById("contatore_natale").innerHTML = bp_count_down_message;
setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
num = ((Math.floor(secs / num1)) % num2).toString();
if (num.length < 2) s = "0" + num;
return "" + num + "";
}
</script>

dove possono essere personalizzati colori e testo. Per il Capodanno si può usare uno script simile

<style>
#contatore_capodanno {
color:#940F04;
font-size:150%;
font-weight:bold;
}
</style>
<div id="contatore_capodanno"></div>
<script language="JavaScript">
var bp_date_target = new Date("January 01, 2014 00:00:00");
var bp_date_now = new Date();
var messaggio_completo = "Auguro a tutti un Buon Anno";
if (bp_date_now >= bp_date_target) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
} else {
bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000);
display_time_difference(bp_time_difference);
}
function display_time_difference(bp_time_difference) {
if (bp_time_difference <= 0) {
document.getElementById("contatore_capodanno").innerHTML =  messaggio_completo;
return;
}
bp_count_down_message ="A Capodanno mancano " + bp_format_seconds(bp_time_difference, 86400, 100000) + " Giorni " + bp_format_seconds(bp_time_difference, 3600, 24) + " Ore " + bp_format_seconds(bp_time_difference, 60, 60) + " Minuti e " + bp_format_seconds(bp_time_difference, 1, 60) + " Secondi";
document.getElementById("contatore_capodanno").innerHTML = bp_count_down_message;
setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000);
}
function bp_format_seconds(secs, num1, num2) {
num = ((Math.floor(secs / num1)) % num2).toString();
if (num.length < 2) s = "0" + num;
return "" + num + "";
}
</script>

countdown-natale
Se proprio tra gli effetti che ho proposto non ce ne fosse nessuno di vostro gradimento potete anche consultare il post su come aggiungere le Luci di Natale al blog.




12 commenti :

  1. Ti ringrazio per questi addobbi. Su "Il tamburo Riparato" ho usato uno dei tuoi codici. Ho fatto solo una piccola modifica per far sì che la neve che cade sia visibile sempre anche quando l'utente scorre la pagina. Puoi vedere il codice direttamente su http://tamburoriparato.blogspot.it/

    RispondiElimina
    Risposte
    1. Salve, volevo sapere che modifica hai fatto per far si che la neve sia visibile anche quando l'utente scorre la pagina.
      Grazie :)

      Elimina
  2. Ciao Ernesto, nell'addobbo di Natale con nevicata viene modificato lo sfondo con un colore unico, nonché quello del layout dei post. Ti chiedo se è possibile conservare lo sfondo originario e quello dei post, lasciando solo gli addobbi e la neve. Grazie anticipatamente.

    RispondiElimina
  3. Prova a sostituire il codice del colore di questa riga
    background:#f5465a;
    o addirittura a toglierla del tutto
    @#

    RispondiElimina
    Risposte
    1. Grazie 1000, è stato sufficiente togliere solo il codice colore.

      Elimina
  4. Ciao Ernesto prima di tutto grazie per tutto quello che fai per noi , mi scuso per me che sono ignorante in materia, poi approfitto per farti tanti Auguri per un sereno Natale e ora arriviamo alla super domandona, come si crea un codice "conta commenti "da inserire in un gadget java? Mi faresti proprio un regalone
    Grazie Elise ♥

    RispondiElimina
    Risposte
    1. Cosa intendi per contatore di commenti? Contare i commenti di un singolo post o di tutto il blog? Nel primo caso leggi qui
      http://www.ideepercomputeredinternet.com/2012/01/numerazione-di-commenti-e-risposte-in.html
      Se invece vuoi un contatore universale per tutto il sito leggi qui
      http://www.ideepercomputeredinternet.com/2011/04/mostrare-da-quanto-tempo-e-online-un.html
      che oltre al numero di articoli mostra quello dei commenti e da quanto tempo il blog è online
      @#

      Elimina
    2. Grazie infinite Ernesto è la seconda, buona giornata
      Elise

      Elimina
  5. ciao, sono su blogger ma nel riquadro "aggiungi un widget" non trovo più la casella HTML/JAVASCRIPT come posso aggiungere i widget?

    RispondiElimina
    Risposte
    1. Sei sicura? Sei andata su Layout > Aggiungi un gadget > Base? Hai scorso verso il basso? Mi sembra una cosa molto strana. Prova a cambiare browser
      @#

      Elimina
    2. sono sicurissima provo a cambiare browser, a questo non avevo pensato grazie

      Elimina

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.