Pubblicato il 13/12/14e aggiornato il

Canzoni natalizie e altri effetti da inserire nel blog per Natale.

Come riprodurre casualmente delle canzoni natalizie nel blog in occasione della Festa di Natale.
Continuo a presentare altre personalizzazioni da mettere nel blog in occasione delle feste di fine anno. Dopo un primo articolo pubblicato ieri vado a illustrare un'altra serie di effetti che non esaurirà il tema perché penso che ci vorrà un altro post per completare l'elenco.

La scelta di mostrare widget o layout natalizi nel nostro sito su Blogger è puramente personale e dipende molto dalla linea editoriale del sito. Questi effetti stanno molto bene in siti che si occupano di giochi, di make-up, di vacanze, di viaggi, di acquisti mentre per siti più tecnici come questo penso che non aggiungano nulla alla esperienza degli utenti.

RIPRODURRE CANZONI NATALIZIE IN MODO CASUALE


Una cosa piuttosto carina è quella di una riproduzione di una canzone o di un jingle natalizio quando un lettore entra in questo periodo nel sito. Naturalmente la lunghezza del file deve essere breve perché altrimenti potrebbe infastidire il navigatore. In un blog su Blogger dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra, si incolla questo codice javascript

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

Si salva il modello. Se si apre una qualsiasi pagina del sito si sentirà suonare una canzoncina random. I file audio li ho raccolti in un file ZIP che si può scaricare dal mio DropBox in questa pagina
Dopo aver cliccato su Scarica si può unzippare il file con 7Zip o programma analogo. I file MP3 sono stati caricati su Google Sites con la modalità Schedario. Non ci sarà nessun problema di funzionamento se avete un blog gratuito del tipo Blogspot. Se invece avete un dominio personalizzato allora dovete caricare tutti i file delle canzoni che vi interessano su Google Drive o sulla cartella Public di Dropbox. Gli URL dei jingle colorati di viola possono essere eliminati o sostituiti da altri brani con la stessa sintassi.



La riproduzione dei brani inizierà dopo qualche secondo, giusto il tempo per caricare gli MP3.

FOGLIE DI NEVE CADENTI


Insieme alla nevicata anche la caduta delle foglie è diventata un effetto molto comune più in epoca autunnale che invernale. Si utilizza sempre lo stesso javascript di Dynamic Drive a cui si apportano delle modifiche nelle immagini e in altri parametri.
Per modificare l'aspetto delle foglie bisogna sostituire nelle due occorrenze i due URL delle immagini che nel codice proposto sono sotto il commento //Configure below to change URL path to the snow image. Tale codice si può settare in alcuni parametri magari utilizzando l'Editor Notepad++ e a titolo di esempio ecco tutta una serie di immagini che possono essere usate a questo scopo


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


Se avete un OS Windows potete cliccare sopra a ciascuna immagine con il destro del mouse per poi andare su Copia indirizzo immagine. Si possono anche usare immagini animate in GIF al posto di quelle in PNG. Dopo aver configurato il file con l'immagine desiderata si salva usando Notepad++ in formato js in modo da ottenere un file del tipo leaf1.js. Dovremo quindi caricare il file su Google Sites (solo per i blog gratuiti), su Google Drive o su DropBox come illustrato nei link della sezione precedente riguardante le canzoni natalizie. 

Si va quindi su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice 

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

e si salva il widget dopo aver inserito l'indirizzo del file javascript.


 

ANGELI CHE VOLTEGGIANO NEL SITO 

 

angeli-svolazzanti-blog

Se si preferisce una personalizzazione di grande effetto come degli angeli che fluttuano nel blog partendo da una immaginaria linea di orizzonte fino ad arrivare in primo piano allora dobbiamo andare su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo codice
angelo

L'immagine precedente può ovviamente essere sostituita da un'altra modificando il suo URL colorato di rosso. Si può personalizzare il livello di opacità agendo su 0.5 e 50 e si può agire anche sui parametri seguenti

var numberOfGhosts = 12; /* Numero degli angeli */
var ghostSpeed = 0.9; /* Velocità */
var setTimeOutSpeed = 50; /* Tempo di permanenza */


con il campo di azione indicato nei commenti.



Probabilmente ci sarà un terzo post sempre a tema effetti speciali per le Feste di Natale.




Nessun commento :

Posta un commento

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.