Aggiornato:  | 10 commenti :

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

countdown-natale

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

babbo-natale snow1 snow2 snow3
snow4 snow5 snow6 paccodono

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

addobbi-natale

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.

10 commenti :

  1. Si può personalizzare e come, il fiocco di neve sostituendo l'asterisco con una immagine gif o png che hai tu stesso pubblicato in altri post simili ?

    RispondiElimina
    Risposte
    1. Prova a sostituire l'asterisco con questo codice
      <img src="URL_FIOCCO_DI_NEVE"/>
      dove l'URL del fiocco lo devi ricavare dopo aver caricato l'immagine su Picasa. Non ho testato e non assicuro che possa funzionare
      @#

      Elimina
  2. Ciao e grazie per i consigli sempre preziosi.
    Una domanda: nel caso volessi aumentare il nuomero dei fiocchi della nevicata, oppure viceversa, volessi inserire le decorazioni ma senza far scendere la neve, come mi devo comportare?

    RispondiElimina
    Risposte
    1. Ti riferisci immagino all'ultimo effetto. Il javascript è unico quindi purtroppo non è semplice scindere le varie componenti 😐
      @#

      Elimina
    2. Esatto, mi riferisco proprio all'ultimo effetto: vorrei poterlo inserire così come è (mi piace molto) ma senza la neve... Dici che non sia proprio possibile? :-(

      Elimina
  3. Ho fatto una prova da ignorante in materia e volevo proportela per un parere: usando il tuo script, ho eliminato la neve e modificato l'immagine del cartello "Christmas" in basso a sinistra, in quanto risultava con il pezzo sotto mancante (quindi colorandola di bianco sembra un mucchietto di neve). Come posso inviartelo?

    RispondiElimina
    Risposte
    1. Quello che conta è che ti funzioni 🙂
      @#

      Elimina
    2. Sì, certo... Potendotela inviare, magari sarebbe potuta risultare utile ad altri, tutto qui. Ad ogni modo grazie infinite perchè, non avendo le conoscenze adatte, se non avessi avuto il tuo script di cui sopra, non avrei mai potuto ottenere il risultato sperato

      P.S. Ultima domanda e poi non ti disturbo più, promesso :-)
      Esiste la possibilità di far passare la "Slitta di Babbo Natale" più in basso (verso il centro) regolando la distanza dalla cima? Lo chiedo perchè proprio in alto ho una serie di tasti che, una volta inserita la slitta, non sono più cliccabili in quanto quest'ultima ovviamente ci passa sopra

      Elimina
    3. E' una domanda che mi hanno fatto in tanti. Ci ho provato ma non ci sono riuscito. Se infatti invece di top:0; si mette top:100; per farla iniziare 100 pixel al di sotto purtroppo non succede nulla e il comando non viene preso :(
      @#

      Elimina
    4. Grazie ugualmente per il tentativo e la disponibilità dimostrata (e la pazienza) :-)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy