Pubblicato il 11/12/11e aggiornato il

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
slitta 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://lh4.googleusercontent.com/-ABrKHtLyu2Y/TwNef7IthtI/AAAAAAAAV84/9eLnnWbKGvk/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.  






38 commenti :

  1. Grazie grazie mille erano proprio queste che volevo ......... ora provo a metterle nel mio Blog.
    Sei stato gentilissimo Buona domenica

    RispondiElimina
  2. ho provato a mettere la slitta ma..... non funzionava ...
    credo di avere sbagliato qualche cosa non conosco per nulla l'HTML ........

    e non ho trovato una riga precisa che iniziasse come hai indicato tu ce ne erano diverse con la scritta body

    probabilmente ho sbagliato corpo he he he

    Grazie mille comunque!

    RispondiElimina
  3. @Arwwen
    Ce n'è solo una
    </body>
    clicca su F3 e incolla la riga nel piccolo campo che compare (in alto con Chrome o IE, in basso con Firefox), la trovi in un secondo.

    RispondiElimina
  4. Se ti può aiutare è esattamente la penultima riga :D. Ho controllato il tuo sorgente pagina.

    RispondiElimina
  5. Ciao che bell idee che hai avuto però non riesco a mettere la slitta come ad Harwen ci sn tanti body e io vedo solo questo body ( non sò dove andareeeee ho paura di combinare qualche guaio Buona Domenica :D

    RispondiElimina
  6. @princess
    C'è un solo body con la slash davanti cioè così
    /body
    e si trova alla fine del modello. Se hai un template non troppo recente è esattamente la penultima riga.

    RispondiElimina
  7. Grazie mille Ernesto Buona Giornata :D

    RispondiElimina
  8. grazie finalmente sono riuscita ma non utilizzando iul modifica HTML ma aggiugi gadget,!non riesco a salvare su modifica HTML non trovo il tasto.....
    anna

    RispondiElimina
  9. Ci sono riuscitaaaa olèèèèè grazieeeeeeeeeeeee :D

    RispondiElimina
  10. @anna
    Il tasto per salvare è Salva Modello. Puoi cliccare su Anteprima per vedere se ti funziona prima di salvare


    Si può anche mettere il codice prima della riga </head>
    ... a beneficio di chi ha dei problemi con questo tag ;)

    RispondiElimina
  11. Ho usufruito della ...slitta. E' un gadget molto simpatico e fila che è una meraviglia.
    Grazie della Tua gentilezza e Buone Feste.

    RispondiElimina
  12. @roberto
    Buone Feste anche a te.

    RispondiElimina
  13. Grazie Ernesto sei un "Mito" io ci riprovo .....
    Una Slitta di Babbo Natale o due per il Blog ci vogliono proprio in questo periodo !

    RispondiElimina
  14. @Arwen
    Credo che funzioni anche se il codice della seconda slitta si mette sopra alla riga
    </head>
    così ti riuscirà più semplice trovarla :)

    RispondiElimina
  15. Ernesto ho trovato il Body hi hi hi sono riuscita ad istallare correttamente le due slitte che bello !

    Grazie mille e Buone Feste a tè !?

    RispondiElimina
  16. @Arwen
    Mi fa piacere, visto che il diavolo è meno brutto di come si dipinge? Contraccambio gli auguri ^^

    RispondiElimina
  17. Ernesto non volevo dirlo ma .... il babbo natale in altro quello più carino che lavoro sulla testata del Blog mi ha bloccato tutto non riesco più ad uscire e nemmeno a fare un nuovo posto mi blocca la prima linea dove apre nuovo post design esci - come faccio ora?

    RispondiElimina
  18. come faccio a toglierlo o ad abbassarlo ....

    RispondiElimina
  19. Dopo innumerevoli tentativi sono riuscita a sbloccare la prima riga ed a rientrare in modifica html
    le ho tolte purtroppo xkè mi bloccavano tutto
    queste slitte non si possono mettere come gadget Java?

    Lo so che fra un po' mi tirerai dietro qualche cosa he he he !

    RispondiElimina
  20. Riassumendo la slitta più bella la prima non sono riuscita a metterla in testa perché bloccava tutto il Blog ho provato a metterla giù mettendo bottom 0 al posto di top 0 ma risultava troppo bassa ho provato con bottom 1 no 2 ma - ovviamente non funzionava - come faccio a metterla a metà strada fra top 0 e bottom 0?
    Esiste un modo?

    RispondiElimina
  21. @Arwen
    In questo blog non c'è la Navbar eppure riesco a entrare ugualmente ;)
    Basta andare in Bacheca
    http://www.blogger.com/home
    Ho fatto un aggiornamento che puoi leggere a fondo post per visualizzare la slitta in una posizione precisa del blog incollando il codice in un normale gadget HTML/Javascript.

    RispondiElimina
  22. Grazie sei troppo gentile ........
    ed il tutto per una slitta hi hi hi

    Sei Grande .... riprovo e questa volta devo farcela !!?!

    RispondiElimina
  23. Lo so lo so che domani mi uccidi ;-)) ma ho preso il codice che hai aggiunto e lo ho incollato in un nuovo Java Script come un Gadget .... ma non mi funziona

    Sigh ........

    RispondiElimina
  24. @Arwen
    Il codice funziona nei tre modelli in cui l'ho testato. Si vede che proprio nel tuo ha dei problemi ;(
    ... mi sembra un po' strano ...

    RispondiElimina
  25. NOjn so che dirti ..... vediamo se ho capito come andava inserito - bastava mettere un widget - con un gadget di tipo Java e incollare il codice no:.....

    io ci riprovo oggi perché ieri il blog faceva strane cose ..... vediamo se oggi funziona

    RispondiElimina
  26. no anche ora non funziona .... evidentemente ha proprio dei problemi col mio Blog sigh ... mi accontenterò della slitta più piccola

    grazie per tutto

    RispondiElimina
  27. Ciao, ho utilizzato il gadget HTML anzichè la modifica del modello e funziona bene. Volevo solo chiedere se è possibile bloccare lo scorrimento, come accade in questa pagina, evitando che scorra assieme alla pagina mentre si scende nella lettura.
    Grazie

    RispondiElimina
  28. @Giancarlo Chieco
    Non si possono fare paragoni con questa pagina perché qui è stata inserita dentro un post. Prova a sostituire fixed con absolute e guarda un po' cosa succede.

    RispondiElimina
  29. Perfetto! Adesso funziona belissimo e non è fastidioso. Grazie mille.
    PS.: Secondo me dovresti modificare il post inserendo absolute al posto di fixed, per i posteri.

    RispondiElimina
  30. Auguri di Buone Feste. Ripetere i commenti di altri bloggers sarebbe noioso ma comunque è vero, il tuo è uno dei migliori blogs in circolazione. Il meno che posso fare è aggiungerti tra i miei preferiti in fondo al post: http://ilmondodeidolci.blogspot.com
    Una parte importante della grafica del blog è opera tua
    Di nuovo auguroni

    RispondiElimina
  31. Ciao, Ernesto
    intanto grazie per tutto le dritte che ci offri.
    Volevo dirti che ho inserito il Babbo natale sul mio blog, ma ci sono differenze a secoda del browser usato. Con Firefox e Chrome passa dietro i gadget sulla destra, con Firefox passa davanti. C'è da fare qiualche modifica al codice?
    Frazie ancora e Buone Feste!

    RispondiElimina
  32. @girovago
    Se ti riferisci alla seconda slitta c'è poco da fare perché il codice è hostato su un sito esterno. Per la prima slitta prova a cambiare
    z-index:1000;
    con
    z-index:9999;

    RispondiElimina
  33. Ho provato, ma non cambia niente.
    Non importa, è bello anche così.
    Ancora grazie 1000.
    Anzi, 9999! :-)

    RispondiElimina
  34. Mi chiedevo,ma come mai nella tua pagina(http://demo-parsifal32.blogspot.it/p/natale.html)
    non compare il banner invasivo della slitta con le stellette?grazie

    RispondiElimina
    Risposte
    1. Forse lo hanno tolto. Non mi ricordo bene. È un post di 2 anni fa
      @#

      Elimina
    2. Lo spero perchè l'effetto è davvero molto carino. Ti ringrazio :-)

      Elimina

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.