Pubblicato il 17/12/11e aggiornato il

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://lh6.googleusercontent.com/-urJ5iwwcdx0/Tuxmz022-PI/AAAAAAAAVyM/NP_ImTOLfHY/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.





11 commenti :

  1. Caro Ernesto, ne approfitto per farti gli auguri di Buon Natale e di un felice 2012. Sono estesi a tutti gli amici che frequentano il tuo splendido sito.

    RispondiElimina
  2. @Stefano
    Grazie degli auguri e contraccambio

    @Giancarlo
    Mi sa che stai un po' esagerando ;)) grazie comunque della considerazione.

    RispondiElimina
  3. bellissimi,le ho già inserite nel mio blog,grazie

    RispondiElimina
  4. No, è vero, Giancarlo ha ragione, sei proprio un mito :)
    Il tuo blog è fantastico e uno dei più completi che io abbia mai visto su questo argomento; sei competente, sempre disponibile e gentile, sempre pronto a dare consigli e risposte.
    Fatico a credere che tu sia un autodidatta, come hai fatto a imparare da solo tutto quello che sai? Solo dai libri e da Internet? Se così fosse, tanto di cappello, devi avere una bella testa.
    Ne approfitto per augurarti Buone Feste e ringraziarti ancora per l'aiuto, buona parte della grafica del mio blog è dovuta a te ;)

    RispondiElimina
  5. Inutile nascondersi dietro ad un dito: questo Blog, il suo autore, sono il top che si possa trovare nel web per questo tipo di argomentazioni. La mattina non può avere inizio se non entro a visionarti, caro Ernesto.

    Grazie sempre di tutto e serene festività a te e a questa fantastica...famiglia

    RispondiElimina
  6. mi aggrego al coro d'auguri ad Ernesto e ai lettori del blog

    RispondiElimina
  7. Auguri di Buon Natale e Felce Anno Nuovo anche da me!! mi associo naturalmente a tutti i complimenti..ciao Ernesto

    RispondiElimina
  8. Grazieeeee!!!!! Buon Natale...illuminato :)

    RispondiElimina

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.