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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzJCLu-QniBItVIh_CXvkWx9dXXjg0YfMhHYuzlOgmQbYIaRjCAFo7armcXyQyCMy_LQ4UGD1keRglcAEQ1m1hSopi1fCGe2ylPF_4LDeJMW1z1wxfy1p5PllHIEbOoIZCo4ZMa9r4F_D/s150/alto-sinistra.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEAk6M2hBnJ2Y1HUEQ2MTdaxbdvZ_t0kJC9WBwdQS11PWAOIOMCpjkTX4G91-nnRqQS4maUqogcVj87DLKuAlcOAywJhK9jI1h_gb_XSkEPVS8WCCssmZNUFZYGLSy1Z0TXvnq0hx7M75/s150/alto-destra.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezL3X4J_vaC83VyxpiGoywdqlq3BKyEExGNlW8YRp1KgdSgoTQqTFxJvKuQ5Cu8j2ex-ny4pt1Ju2wOeP5oNb3ns6hMyNQ3_shiYrLuQnMDuunX73INEm2ObYdTY7yjhc-7ZM4hXQXqj2/s640/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBU8Fd_7vU8xio1_lUEBOWWB5ZURNEpsqICBdC2__iVHhAWOZN5F6LxO-EaQCPUYLbD6u6idV6HjbHhyphenhyphenHOIfRTE9dO5s6_Vu_RYMMOISRl8_C-jH92zW1eje03HruxKFDoSUgQlIWKfmS/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

• Codice degli angeli volteggianti -

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

                        

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

• Codice delle foglie cadenti -

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)

	leaf1.js		leaf5.js
	leaf2.js		leaf6.js
	leaf3.js		leaf7.js
	leaf4.js		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

• Codice di neve e altri oggetti cadenti -

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

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

• Scaricare file ZIP di canzoni natalizie -

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXSgzSU6bDCgSV2Ug9j6Dn99qZLl3xsbcB-G6NXKjHGZwzXrWKevyss8kNODwTXK7pCERJuG0FIZpgviaELt_hbISoRul10oA8dyD5jDBM9qCdhNs0F-E164aFFsQ7uf4Hb_tnC3F4_8/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

• Codice della neve e della stella cadente -

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>

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.