Fuochi di artificio da mostrare nel blog per Capodanno.

Come mostrare dei fuochi artificiali nel blog per festeggiare l'arrivo del nuovo anno.

Oltre ai widget classici che mostrano le pubblicazioni più recenti come quello degli Ultimi Articoli o le pubblicazioni di maggior successo come quello dei Post più Popolari, hanno grande successo nel mondo del web anche i gadget che potremmo definire stagionali e che si usano in determinati periodi dell'anno. Nel mese di Dicembre sono sempre molto richiesti i gadget di ambientazione natalizia oltre al solito effetto invernale della neve che cade.

La tradizione di salutare il nuovo anno con i fuochi d'artificio è ormai consolidata nonostante la condanna unanime dei botti di fine anno che in certe zone d'Italia portano al pronto soccorso numerose persone tutti gli anni. Volendo attrezzare il nostro blog con un stile adeguato per la fine dell'anno vecchio e l'inizio dell'anno nuovo, ho già illustrato il Fireworks Effect che mostra tutta una serie di fuochi d'artificio che partono dalla parte bassa del layout. Vado adesso a presentare una variante più complessa e quindi più suggestiva di questo effetto. Ne ho pubblicato anche una demo

Si vedranno una serie di lanci di punti colorati che poi si dissolveranno con effetto multicolore

Per l'installazione dell'effetto si utilizza la libreria JQuery quindi se avete un modello in cui fosse già presente non sarà necessario installare nuovamente il javascript anche se è sempre opportuno aggiornarla all'ultima versione. D'altra parte ci sono modelli che per esempio usano Prototype e Scriptaculous che invece sono incompatibili con JQuery. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

#IPCEI_fuochi{
  display: block;
  width: 1000px;
  height: 800px;
  float: center;
  color:#7E7E7E;
  text-align: center;
  font-size: 14px;
}
#IPCEI_fuochi a {
  color:#7E7E7E;
}

poi si cerca la riga </body> e, subito sopra, si incolla quest'altro codice

<div id="IPCEI_fuochi">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//sites.google.com/site/scriptperilblog/javascript-2/fuochi.js" type="text/javascript"></script>
<script>
jQuery(function($){              
Xteam.fireworkShow('#IPCEI_fuochi', 100);                
});  
</script>

Si salva il modello. Se nel template fosse già presente JQuery si può fare a meno di incollare le righe evidenziate di giallo. Se invece si possiede un blog con dominio personalizzato allora il javascript il cui URL è colorato di viola dovrà essere scaricato incollandone l'indirizzo nella barra del browser e premendo Invio. Successivamente dovrà essere caricato su Dropbox o Google Code. Volendo i fuochi d'artificio possono anche essere inseriti in un solo post o in una sola pagina statica, cosa che ho fatto nella demo dell'effetto. In questo caso dopo aver aperto l'Editor di Blogger si passa da Scrivi a HTML e si incolla un codice come questo

<style type="text/css">
body {background-color:#D1D1D1;
     color:#000000;}
#IPCEI_fuochi{
            display: block;     
            width: 1000px;
            height: 800px;
            float: center;
            color:#7E7E7E;
            text-align: center;
            font-size: 14px;
        }
        #IPCEI_fuochi a {
            color:#7E7E7E;
        }
</style>
<div id="IPCEI_fuochi">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//sites.google.com/site/scriptperilblog/javascript-2/fuochi.js" type="text/javascript"></script>
<script>
jQuery(function($){              
Xteam.fireworkShow('#IPCEI_fuochi', 100);                
});  
</script>

dove ho fatto in modo che la pagina avesse uno sfondo grigio (#D1D1D1) e che il colore del testo fosse nero (#000000). Il post o la pagina si pubblica come al solito. In questo caso è opportuno diminuire le dimensioni dell'effetto rispetto a quelle proposte che sono di 1000x800 pixel.