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!

38 commenti:

Adriano Zangari ha detto...

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

Boby ha detto...

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

Sandra ha detto...

Grazie Orazio e Buon Natale!

Boby ha detto...

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

rocciajubba 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

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

Natalunia_7 ha detto...

Ho lo stesso problema di rocciajubba..uffi =(

Natalunia_7 ha detto...

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

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

marcorobutti ha detto...

Provato e funziona ! Grazie come sempre !!!

Hai ragione eliminando la riga di commento

""

nel primo codice tutto va perfettamente :-)

marcorobutti 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

Boby 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 :)

Rotator 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 :)

Boby 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

Natalunia_7 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

Margherita 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

Bogomilla Hopp 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!

Fangyaya ha detto...

fangyanting20150926
pandora jewelry, http://www.pandorajewelryoutlet.us.com/
cheap wedding dresses, http://www.cheap-weddingdresses.net/
nike air force 1, http://www.airforce1.us.com/
chanel handbags, http://www.chanelhandbagsoutlet.eu.com/
north face jackets, http://www.thenorthfaces.in.net/
ghd hair straighteners, http://www.ghdhairstraightenerssale.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike mercurial, http://www.nikemercurial.org/
louis vuitton outlet, http://www.louisvuittonus.us.com/
oakley sunglasses, http://www.oakleysunglassescanada.com/
louis vuitton handbags, http://www.louisvuittonhandbags.org.uk/
football shirts, http://www.cheapfootballshirt.org.uk/
prada outlet, http://www.pradaoutlet.us/
michael kors wallet, http://www.michaelkorswallet.net/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms shoes, http://www.toms.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutlets.in.net/
ugg boots, http://www.uggbootsclearance.in.net/
hermes birkin, http://www.hermesbirkin.org/
oakley sunglasses, http://www.oakley.in.net/
polo ralph lauren, http://www.poloralphlauren.us.org/
cheap jordans, http://www.cheapjordanshoes.in.net/
tiffany and co jewelry, http://www.tiffanyandco.in.net/
michael kors handbags, http://www.michaelkorshandbag.co.uk/

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

dong dong23 ha detto...

beats wireless headphones
michael kors outlet online
jordans
louis vuitton handbags
polo ralph shirts
jordans
juicy couture
michael kors outlet
beats headphones
kate spade
christian louboutin outlet
mont blanc pens
louis vuitton outlet
coach outlet store online
cheap nfl jerseys
michael kors canada
michael kors outlet clearance
louis vuitton handbags
adidas shoes
replica watches
burberry outlet
louis vuitton outlet
pandora jewelry
fitflops sale clearance
louis vuitton handbags
michael kors handbags
nike outlet store
michael kors outlet
ray ban wayfarer
polo ralph lauren
burberry outlet
ray-ban sunglasses
mont blanc pens
christian louboutin outlet
michael kors outlet
louis vuitton outlet
cheap oakleys
gucci handbags
cheap toms shoes
christian louboutin shoes
20165.4wengdongdong

Chenzhen 20160303chenzhen ha detto...

coach purses on sale
cheap ray bans
coach outlet online
louboutin outlet
ray ban outlet store
tiffany and co outlet
nike free 5.0
birkenstocks
cartier love ring
ghd hair dryer
lacoste shoes
nike free flyknit 3.0
louis vuitton purse
cheap jordan shoes
adidas trainers
burberry outlet
michael kors outlet online
ghd
coach outlet online
longchamp outlet
cheap oakley sunglasses
christian louboutin uk
black timberland boots
michael kors outlet clearance
rolex replica watches
louis vuitton handbags
polo ralph lauren outlet
yeezy boost 350 white
louis vuitton handbags
adidas nmd runner
louboutin shoes
michael kors handbags
yeezy boost 350
jordan pas cher
michael kors uk
fake oakleys
louis vuitton pas cher
pandora jewelry
adidas gazelle
louis vuitton outlet
chenzhen201662

raybanoutlet001 ha detto...

coach handbags
ecco shoes outlet
mont blanc pens
michael kors outlet
seattle seahawks jerseys
hollister clothing
nike roshe
louis vuitton sacs
cheap nba jerseys
cheap michael kors handbags

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
oakley sunglasses wholesale
cheap oakley sunglasses
kate spade outlet store
adidas shoes for men
coach outlet
mcm backpack
coach outlet online
oakley sunglasses
pandora outlet online
oakley sunglasses

نور معاذ ha detto...

Services availaBle:
- Cleaning houses, BuilDings anD villas (apartments - shops - hotels)
- Plain anD polishing marBle.
- Cleaning tiles.
شركة الاول لكشف تسربات المياه بالرياض
شركة الاول لمكافحة حشرات بالرياض
شركة الاول شركة نقل اثاث بالرياض
شركة تنظيف بالرياض

نور معاذ ha detto...


شركة الاول للتنظيف
شركة الاول تخزين اثاث بالرياض
شركة تنظيف شقق بالمدينة المنورة
افضل شركة تنظيف بالمدينة المنورة
تنظيف سجاد بالرياض

نور معاذ ha detto...

شركة الاول شركة نقل عفش بالمدينة المنورة
شركة الاول لكشف تسربات المياه بالمدينة المنورة
شركة الاول شركة مكافحة حشرات بالمدينة المنورة
شركة الاول لتنظيف خزانات بالمدينة المنورة
شركة تنظيف منازل شرق شمال الرياض


Prima di lasciare un commento, leggete qui

Posta un commento