Luci di natale animate nel blog!


luci di natale

Io adoro l’atmosfera natalizia: l’albero, il presepe, le luci fuori e un Babbo Natale appeso fuori dalla porta con una lavagnetta con scritto “Buon Natale da Orazio e Mary”. Ecco una modifica abbastanza semplice che vi permetterà di mettere le lucine (con tanto di effetti animati) anche nel blog. L’effetto originale l’ho trovato in questa pagina, ma ho dovuto fare diverse modifiche per farlo funzionare su Blogger.

Come sempre, fate prima un backup del template, perchè se c’è una cosa certa nella vita è l’imprevisto.

Accendiamo il blog!

Sebbene illustrerò la procedura per inserirle su Blogger, la modifica può essere applicata a qualsiasi pagina HTML standard o a un’altra piattaforma che permetta di modificare il codice del layout.

Per farlo su Blogger, andate in Design –> Modifica HTML e cercate questa riga di codice:

</head>

Subito sopra, incollate queste:

<!-- luci di natale - inizio -->
<link href='http://tinyurl.com/34e7u5c' media='screen' rel='stylesheet'/>
<script src='http://tinyurl.com/36mvfge' type='text/javascript'/>
<script src='http://tinyurl.com/37ub5ro' type='text/javascript'/>
<script src='http://tinyurl.com/3ycavhy' type='text/javascript'/>
<script type='text/javascript'>
var urlBase = &#39;http://www.schillmania.com/projects/snowstorm/lights/&#39;;
soundManager.url = &#39;./&#39;;
</script>
<!-- luci di natale – fine -->

Successivamente cercate questa riga:

</body>

e subito sopra incollate:

<div id='lights'>

</div>

Salvate il template e il gioco è fatto. Se avete mantenuto la barra di navigazione di Blogger, le due cose si posizioneranno una sull’altra e l’effetto sarà sgradevole, quindi consiglio di nasconderla seguendo queste istruzioni:

Una volta passata la festività, potrete eliminare le luci dal blog cancellando le righe aggiunte.

Altre decorazioni natalizie per il blog

Ecco un elenco di post pubblicati gli anni passati su come aggiungere effetti e decorazioni al blog per il Natale:

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

29 commenti:

Unknown ha detto...

Ciao Orazio,bellissime corro a inserirle nel mio blog.
Buon Natale anche a te e famiglia.

ZiaBoby ha detto...

non vado matta per gli addobbi di Natale, però questo lo metto xD

Sandra ha detto...

Grazie Orazio e Buon Natale!

ZiaBoby ha detto...

ma l'effetto per far rompere le luci non funziona con blogger vero?

Sara Salvarani ha detto...

Non funziona!
Quando provo a fare l'anteprima mi dice che non è possibile analizzare il modello.

Borgo Grondaie ha detto...

Orazio ho lo stesso problema di rocciajubba :-(

Amina

Unknown ha detto...

Ciao Orazio, una richiesta se mi puoi aiutare...come faccio ad inserire un banner nel header di blogger uguale al tuo, cioe inserire un widget HTML proprio li...?

Grazie mille Max

Gianni Senaldi ha detto...

Ciao Orazio,
ho provato ad inserire quanto indicato ma .. non succede nulla.
Sbaglio in qualcosa?

Anonimo ha detto...

Ho lo stesso problema di rocciajubba..uffi =(

Anonimo ha detto...

Ho risolto!
Il problema è nel primo codice in cui manca la chiusura!
Dove trovate;

Quor è ha detto...

Ciao Orazio, sai che ci ho provato? Ma come puoi ben immaginare ho combinato un c..ino! Per fortuna avendo seguito il tuo consiglio non ho perso nè blog, nè template, tempestivamente salvati.
Ci riproverò...
Sai? ho sbirciato un pochino tra i tuoi lettori e ho scoperto che c'è davvero di tutto: hai followers di tutti i tipi e d'ogni settore...è stato divertente e istruttivo.
Ciao

Tenebrae ha detto...

avete ragione, windows live writer ha cambiato un carattere nel primo codice (tanto per cambiare)... l'ho reinstallato recentemente e ho dimenticato di disabilitare questa funzione

per risolvere il problema, nel primo codice escludete l'ultima riga

stasera aggiornerò il post

Anonimo ha detto...

Provato e funziona ! Grazie come sempre !!!

Hai ragione eliminando la riga di commento

""

nel primo codice tutto va perfettamente :-)

Anonimo ha detto...

errata corrige ...

ecco la riga da eliminare

<!-- luci di natale - fine –>

Borgo Grondaie ha detto...

Grazie!!

Tenebrae ha detto...

codice sistemato!

Tenebrae ha detto...

@boby: l'animazione avrebbe funzionato anche su blogger, ma non i suoni, per motivi di sicurezza (l'applicazione in flash avrebbe dovuto accedere a mp3 pubblicati su un altro sito)

senza suoni ho visto che ci perdeva davvero tanto e allora ho lasciato solo l'effetto che vedi

@max: non è una cosa che posso spiegare in un commento, però me la segno per spiegare come farlo coi nuovi template

@lamagagio': anch'io giro spesso tra i followers... ed è vero, c'è proprio di tutto, a volte ci passo delle ore

ZiaBoby ha detto...

ok, ma ti dispiacerebbe se integrassi il tuo codice con l'effetto delle luci che si rompono?
anche se non si sente il rumore, mi piace distruggerle xD

Tenebrae ha detto...

@boby: fai pure, basta decommentare queste due righe:


self.o.onmouseover = self.smash;
self.o.onclick = self.smash;

fammi sapere che ne pensi

flblu ha detto...

troooooppo carine :)

Anonimo ha detto...

@Tenebrae
A me non funziona :(
Che, tra l'altro, ho provato a inserire anche la neve (prendendo sempre il codice dal tuo blog) ma non funziona neanche quella!
Spero di non aver toccato nulla di sbagliato...

Niniofin ha detto...

Confermo nemmeno a me funziona con il codice messo sopra non succede propio nulla,come Rotator chiedo aiuto.
Grazie

Tenebrae ha detto...

altri che hanno avuto problemi? chi lo ha inserito con successo? datemi qualche feedback positivo oltre che quelli negativi :)

ZiaBoby ha detto...

io l'ho inserito proprio oggi pur se prendendo alcuni codici dalla fonte originale, comunque ricordo dalle prime prove che non avevo avuto alcun problema con il tuo codice ;)

Tenebrae ha detto...

grazie boby

Anonimo ha detto...

A me funziona benissimo!

franca ha detto...

Ciao! Sono una tua nuova "fans"! Premetto che sono una frana con internet e inizio solo ora a muovere i primi passi, ma ho letto il tuo post di come impostare un traduttore sul blog e...ci sono riuscita al primo colpo! Il merito è tutto tuo, spieghi così bene e chiaramente i passaggi (avevo già letto altri blog e non ci avevo capito nulla) che anche una imbranata come me è riuscita ad inserire il traduttore! Poi ho letto un sacco di altri tuoi post uno più interessante dell'altro.
Ho letto il post "Da leggere prima di inviarmi una mail o lasciare un commento", condivido perfettamente tutto, ti capisco, l'importante per me era lasciare una testimonianza della mia "gratitudine" verso una persona che mi ha aperto un mondo finora sconosciuto e un pochino temuto...ma spiegato da te è tutto più facile!
Grazie mille!!!!
Franca

Quattrocrocette ha detto...

Ciao, ho inserito le luci (togliendo l'ultima riga come dicevi prima) e anche la neve. Vedo gli effetti se faccio l'anteprima da Modifica Html, se salvo e apro il blog non si vede nulla. Mi puoi aiutare?
Grazie
Margherita

Anya ha detto...

Ciao, ti mandato una mail ma probabilmente non l'hai ricevuta ;-(
Vorrei un aiuto per fare 2 cose sul blog:
1) vorrei incrociare alcune categorie con una pagina statica (es. tutto quanto parla di "cucito" finisce automaticamente in Crafts)
2)vorrei che i blog che seguo si vedessero in una pagina statica ad essi dedicata e aggiornata automaticamente... è possibile??? Ti lascio l'indirizzo del blog in caso ti servisse per capire meglio http://bogomillahoppkids.blogspot.it
grazie mille e buone feste!


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.