Effetti speciali natalizi per blog su Blogger (1° parte).

Come addobbare il blog su Blogger per Natale e per Capodanno con effetti speciali, immagini e altri widget.

Visto che mancano meno di due settimane a Natale ripropongo alcuni effetti speciali da inserire nel nostro sito su Blogger (ma non solo) in occasione delle festività di fine anno. Data la gran mole di effetti che ho presentato in questi anni molti dei quali sono tutt'ora perfettamente funzionanti e visto che ho intenzione di integrarli con altri realizzati per l'occasione ho pensato di dividere l'articolo in almeno due parti per non avere un post di lunghezza enciclopedica.

Per ciascuna personalizzazione ho realizzato anche una dimostrazione per dare la possibilità al lettore di visualizzare direttamente l'effetto online. Si va dalle classiche nevicate, alle canzoni natalizie, dalle stelle comete alle slitte di Babbo Natale, dagli Angeli volteggianti ad addobbi natalizi tipici.

COUNTDOWN PER NATALE

Come prima proposta ecco un semplicissimo countdown che può essere installato in un gadget HTML per mostrare in tempo reale quanti giorni, ore, minuti e secondi mancano a Natale. Si può inserire il contatore anche in un post o in una pagina statica e ovviamente si possono modificare i codici dei colori e il testo visualizzato dai lettori. Il codice javascript è il seguente

<style>
#contatore_natale {
color:#036;
font-size:120%;
font-weight:bold;
}
</style>
<div id="contatore_natale">
</div>
<script language="JavaScript">
var bp_date_target = new Date("December 25, 2014 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>

che può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript.



Sostituendo l'anno si può già realizzare il countdown anche per Natale 2015, Natale 2016, ecc

Seguendo questa falsariga si può realizzare anche un countdown per Capodanno

<style>
#contatore_capodanno {
color:#940F04;
font-size:120%;
font-weight:bold;
}
</style>
<div id="contatore_capodanno"></div>
<script language="JavaScript">
var bp_date_target = new Date("January 01, 2015 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>

che può anche essere inserito nel blog dopo che sia passato il Natale.

NEVICATA CON STELLA CADENTE

Con questo effetto si visualizzerà nel blog una caduta di fiocchi di neve insieme a stelle cadenti. Per la sua installazione  si deve copiare il codice seguente

• Codice nevicata con stella cadente -

che dovrà essere incollato su Layout > Aggiungi un gadget > HTML/Javascript per poi salvare.

 

SLITTA DI BABBO NATALE

Per visualizzare una slitta come questa

si va su Modello > Modifica HTML, si cerca  </body> e, subito sopra, si incolla questo codice 

<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>

quindi si salva il template. Anche in questo caso c'è una pagina di demo

 

 

EFFETTO CASCATA DI NEVE O DI ALTRI OGGETTI

Un effetto classico che almeno qualche anno fa era presente su moltissimi siti era quello della nevicata o della caduta di altri oggetti come potrebbero essere dei pacchi regalo, pupazzi di Babbo Natale o altro ancora. Ci si basa sempre su un javascript creato Dynamic Drive che può essere copiato da qui

• Codice nevicata -

Tale codice può essere personalizzato modificando i parametri colorati ciascuno dei quali ha accanto un commento che ne illustra la funzione. Si possono anche sostituire i due URL della immagine dell'oggetto della cascata che può essere un fiocco di neve ma non solo 

Cliccando con il destro del mouse sugli oggetti proposti qui sopra se ne può ricavare l'URL da sostituire in entrambe le occorrenze a quello proposto che si vede anche nella Demo

 

ADDOBBI NATALIZI

Per avere un blog con un addobbo natalizio completo formato da festoni natalizi, neve in basso con albero compreso e nevicata anche colorata per creare una situazione come questa

si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla 

<script type='text/javascript'>
//<![CDATA[
document.write('<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:#002F80">*</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>

Si salva il template. Cliccando qui sotto potete visualizzare la demo

I quattro URL colorati di viola rappresentano le immagini presenti agli angoli in alto e nella parte bassa del layout. La neve è data dal carattere asterisco e la sua colorazione è #002F80 anche nella Demo per renderla più visibile nei siti con sfondo bianco. La dimensione dell'area della nevicata si può personalizzare è di 800x600 pixel.