Come inserire le luci di Natale nel blog.

Dopo aver visto diverse luci natalizie su Christmas Graphics e su siti analoghi ho pensato di postare dei codici per mostrare tali luci di Natale nel blog. I vari codici si possono installare secondo due metodologie. La prima è quella di andare su Modello > Modifica HTML > Procedi e incollarli sopra il tag </body> mentre la seconda è quella di andare su Layout > Aggiungi un gadget > HTML/Javascript. Nel primo caso le luminarie saranno visibili nella parte alta del blog nella zona della Navbar. Questo non comporterà alcun problema per chi la Navbar non la usa o addirittura non ce l'ha ma può essere fastidioso per chi la utilizza per entrare nel blog. Con questa opzione l'estensione delle luci sarà per tutta la lunghezza del blog.

Se invece si incolla il codice delle ludi di Natale attraverso un gadget questo può essere posizionato a piacere per esempio nella zona soprastante agli articoli o addirittura in una Sidebar. Si visualizzerà però soltanto per la larghezza dell'area principale o della colonna in cui viene inserito il gadget. Ecco le immagini

	25 pixel
	44 pixel
	45 pixel
	32 pixel
	47 pixel
	38 pixel
	24 pixel
	22 pixel
	32 pixel
	77 pixel
	29 pixel
	69 pixel
	20 pixel
	21 pixel
	43 pixel

Per ricavare l'indirizzo di ciascuna immagine cliccateci sopra, si aprirà il Lightbox nativo di Blogger. Andate con il destro del mouse sulla immagine e scegliete Copia URL immagine. Tale URL va sostituito a quello del codice che vado a mostrare. Nella colonna sulla destra viene visualizzata anche l'altezza di ciascuna immagine. Anche questo valore va sostituito a quello del codice che si riferisce all'inserimento della prima immagine

<!-- Luci animate di Natale Inizio -->
<style type="text/css">
.lucinatale {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMeUlWFbMaff6ZKZUOWneS8zkpSz7eDDyBsmc4O4KaFeeGzFtAEo_CvDBrpyk-d1AOC2aSVT7HLNXCskijzi4YZ_dglcuw5eF1xVBuBA7FyKrcXJw2ejvSss6uDqKfL2OUjAFr2_iz2k/s435/light01.gif);
background-repeat:repeat-x;
height:25px;
width:100%;
position:absolute;
top:0;
left:0;
z-index:9999;
}
</style>
<div class='lucinatale'></div>
<!-- Luci animate di Natale Fine - http://www.ideepercomputeredinternet.com -->

Come detto all'inizio del post può essere incollato nel Modello sopra alla riga </body> o in un elemento pagina HTML/Javascript. L'URL della immagine può essere sostituito così come va inserita l'altezza corretta nella riga height. Se si sostituisce absolute con fixed l'immagine rimarrà fissa allo scorrere della pagina.