Come inserire la slitta di Babbo Natale che si sposta nel blog.

Continuo nella pubblicazione di effetti in tema con il periodo natalizio. Vediamo come sia possibile mostrare una Slitta animata di Babbo Natale (o Santa Claus per gli anglofili) che fa delle scorribande all'interno del blog. Il primo codice che propongo è il seguente

<!-- Slitta Babbo Natale Inizio -->
<marquee scrolldelay='100' style='position:fixed; top:0; right:0; z-index:1000; width:100%;'><img src='https://lh3.googleusercontent.com/-DxBG25VPAXY/TuM0d0DAXRI/AAAAAAAAVso/l_g37X9Tjok/s350/slitta-babbo-natale.gif'/></marquee>
<!-- Slitta di Babbo Natale Fine -->

Bisogna andare su Modello > Modifica HTML > Procedi, cercare la riga </body> e incollarlo subito sopra. Si vedrà Babbo Natale con la sua slitta trainata dalle renne che si sposterà da destra a sinistra nel blog. Il valore scrolldelay='100' determina la velocità di scorrimento. Se si diminuisce il numero aumenterà la velocità e viceversa. Si può naturalmente sostituire l'URL della immagine colorato di rosso con quello di un'altra che potrebbe essere per esempio una stella cometa. Con queste impostazioni l'immagine si vedrà nella parte alta del blog, se si vuole visualizzare in quella bassa basta sostituire top:0 con bottom:0. Il tag z-index:1000; serve per visualizzare l'immagine sopra tutti gli altri oggetti presenti nel blog, se non fosse sufficiente il valore 1000 si può mettere fino a 9999.

Ovviamente occorre salvare il modello. Il codice potrà essere tolto quando le Feste di Natale saranno finite. Un'altra opzione per visualizzare la Slitta di Babbo Natale è data da questo codice

<!-- Santa Claus Sleigh -->
<script src='http://blogparts.giffy.me/0017/parts.js' type='text/javascript'/>
<!-- Santa Claus Sleigh -->

Anche questo deve essere inserito in Modello > Modifica HTML > Procedi subito sopra alla riga </body>. La slitta si sposterà da destra a sinistra e dal basso in alto lasciando una scia di stelle colorate e avrà questo aspetto

• Demo delle Slitte di Babbo Natale -

Aggiornamento: A seguito di commenti che lamentavano la difficoltà a rientrare nel blog dopo aver inserito la prima slitta ho leggermente modificato il codice per poterlo inserire in un elemento pagina. Si deve quindi selezionare e copiare il seguente HTML 

<marquee scrolldelay='100' style='position:fixed; top:400; right:0; z-index:1000; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgceKE8VwxSvNuVvFAEFPU-SxAJd1_uBoPAaBDOFbu66v4NFNqTpSKVrVsDaiMYqHWU8sW5CKax_PlDvr7sEBZVKhFz3-SEHKu3iylyciNEwrvX_j-vAThyOLeTONb9W50Iw6M8hp3EBAX/s350/slitta-babbo-natale%252520%2525281%252529.gif'/></marquee>

quindi incollarlo su Layout > Aggiungi un gadget > HTML/Javascript. Si può anche configurare la distanza dalla parte alta del layout modificando il valore top:400; Nella pagina di Demo ho inserito anche questa seconda slitta che scorre orizzontalmente più in basso della seconda. Nel caso questa slitta non funzionasse, scaricate l'immagine e caricatela nella cartella Public del vostro DropBox.

Aggiornamento importante: La seconda slitta, quella che lascia una scia con le stellette, proviene da un sito orientale. Dopo qualche giorno dalla sua installazione compare un banner nella parte bassa del blog come credit verso il suo autore. Visto che è una cosa da inserire solo nelle Feste di Natale si può decidere di lasciare tutto così oppure scegliere di eliminare lo script. Mi scuso per non essermene accorto subito ma il banner del credit piuttosto invasivo è comparso solo dopo diversi giorni.