Pubblicato il 11/03/12 - aggiornato il  | 19 commenti :

Come mostrare una pagina o un messaggio di benvenuto che scompaia automaticamente dopo pochi secondi.

Ho già avuto modo di illustrare un metodo per inserire nel blog una pagina di benvenuto che può essere utile per presentare il contenuto del sito agli utenti. Si trattava di un ulteriore passo in avanti rispetto a una schermata di benvenuto che avevo avuto modo di proporre in un articolo precedente.
Sempre seguendo questa falsariga vi voglio illustrare come fare in modo che questa pagina o questo messaggio si chiuda dopo un certo numero di secondi. Si può anche fare in modo che risulti visibile solo in determinate situazioni attraverso i tag condizionali. Per esempio mostrarlo solo nella homepage o solo in una pagina statica in cui ci siano dei contenuti particolari che ci consiglino di avvertire gli utenti in tal senso.
messaggio-di-benvenuto
Si va su Layout > Modello e si salva il template per un eventuale backup di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla questo codice
<style type='text/css'>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
  var menu = document.getElementById(identificazione);
  if(menu.className == &quot;visibile&quot;){menu.className = &quot;invisibile&quot;; }
  else{ menu.className = &quot;visibile&quot;; }
}
</script>
quindi, se abbiamo un vecchio modello, si cerca la riga <body> mentre se abbiamo un template del Designer Modelli bisogna cercare la riga
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Subito sotto a quest'ultima si incolla quest'altro codice
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #E4F9F8;'>
<div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#003366; font-size:24px; line-height:24px; text-align:center;'>
<p><strong>BENVENUTI IN QUESTO BLOG</strong></p>
<p><strong>VENGONO TRATTATI ARGOMENTI TECNICI MA CON APPROCCIO MOLTO SEMPLICE</strong></p>
<p><img src='
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS48T20RcPZ4NCOwL4vPUCHhAHOFk7HgM5tEyd_RMm3bwlhyphenhyphenUom53dKJ0Oehk7QwKjLG0JRDpyVHSijenUwPMPVQaviPyG7P4-cfA1IaZtehWQ2T3dihf2uzblawmEbVZSmJo0Qt4m11R2/s1600/Header1.png'/></p>
<p><strong>TRA DIECI SECONDI QUESTA PAGINA SCOMPARIRA&#180; E VEDRETE IL SITO</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout(&quot;mostranascondi(&#39;benvenuto&#39;)&quot;, 10000);
</script>
</b:if>
Dove la parte colorata di blu è il codice HTML del messaggio che si vuole mostrare e che può essere costituito solo da testo oppure contenere anche delle immagini. La prima e l'ultima riga sono i tag condizionali. In questo caso è stata posta la condizione che tale messaggio sia visibile solo quando si apre la Homepage ma possono essere sostituiti da un'altra condizione o anche tolti per far sì che il messaggio risulti sempre visibile per un certo lasso di tempo.
Le altre personalizzazioni più importanti riguardano
  1. 10000 è il tempo in millisecondi che il messaggio rimane visibile prima di scomparire
  2. #E4F9F8 è il colore dello sfondo della pagina del messaggio
  3. width:600px; height:400px rappresentano la larghezza e l'altezza del messaggio
  4. top:40%; left:40%; è il punto in percentuale del layout in cui inizia il messaggio.
  5. color:#003366 è il colore del testo del messaggio
  6. font-size:24px; line-height:24px sono la dimensione dei caratteri e delle righe di testo del messaggio
  7. text-align:center; per centrare il messaggio e eventuali immagini inserite
Si salva il modello. Potete testarne il suo funzionamento in questo
Se avete un cronometro potete controllare che sparisce esattamente dopo 10 secondi.


19 commenti :

  1. Ciao Ernesto, bella davvero questa pagina di benvenuto!
    Una domandina: nel frattempo che l'utente visualizza questa pagina, il sito vero e proprio carica? Oppure quando la pagina sparisce il sito deve appena iniziare a caricare?
    Grazie,
    Giuliana

    RispondiElimina
    Risposte
    1. @Giuliana
      Il sito si carica subito e quando sparisce la pagina di benvenuto è praticamente già pronto. Lo puoi verificare nella Demo.

      Elimina
    2. Allora oltre che bella questa pagina di benvenuto è anche utile, perchè permette di "intrattenere" l'utente che aspetta il caricamento del sito e magari di evitare che si spazientisca nell'attesa e che se ne vada.
      Grazie :)

      Elimina
  2. bella idea...si potrebbe inserire anche il widget per il mi piace di facebook?il mi piace della fanpage intendo

    RispondiElimina
    Risposte
    1. @Domenico
      Puoi inserire tutto quello che ti pare basta che abbia un codice HTML quindi un bottone, un iframe un video, ecc

      Elimina
    2. ok, avevo postato anche un altro commento che non vedo però; dicevo se sarebbe possibile mostrarlo non a schermo intero, a mò di popup

      Elimina
  3. sì una sorta di lightbox con iframe sarebbe l'ideale :)

    RispondiElimina
    Risposte
    1. @GratisOquasi
      Ci sono anche quest'altre opzioni
      http://www.ideepercomputeredinternet.com/2011/05/effetto-shadowbox-per-gallerie-di-foto.html
      http://www.ideepercomputeredinternet.com/2011/05/come-inserire-una-finestra-popup-di.html
      http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html
      che dovrebbero andare incontro alle tue esigenze

      Elimina
  4. ciao parsifal. sto provando ad usare il messaggio di benvenuto per avvisare che il sito è in costruzione.
    avrei due domande.
    per primo non riesco a mettere i collegamenti ai social.
    riesco a mettere le varie icone ma i link non funzionano.

    come secondo vorrei togliere i secondi... se possibile mettere che questo messaggio duri per sempre, almeno fino al giorno che completerò il sito.
    mi puoi aiutare??

    per farti capire meglio questo è il mio link:
    http://artsanso.blogspot.it/
    sotto la scritta vorrei mettere le icone con i collegamenti ai social.
    grazie

    RispondiElimina
    Risposte
    1. @FrancescoSansone
      Per il tuo problema è più adatto questo post
      http://www.ideepercomputeredinternet.com/2011/11/blogger-blog-in-manutenzione-widget-mi.html

      Elimina
  5. Ottimo articolo, ma c'è un problema: come faccio a fare in modo tale che se una persona ha già visitato la Home l'immagine di benvenuto non compaia di nuovo ogni volta che l'utente ci torna?

    Grazie!

    RispondiElimina
    Risposte
    1. @GiorgioC.
      C'è una versione della pagina di benvenuto che attraverso i cookie impedisce di essere vista per un certo periodo di tempo (diciamo una settimana, un mese, ecc... ) dopo che sia stata visualizzata una volta
      http://www.ideepercomputeredinternet.com/2012/04/creare-una-pagina-di-introduzione-al.html

      Elimina
  6. Io invece ho un problema...ho creato la pagina modificando dei parametri(colori e immagine) ho controllato l'anteprima e a parte il fatto che non riesco a centrarla andava bene, a quel punto l'ho salvata ma non scompare, insomma adesso che faccio? Sono rimasta con la pagina di benvenuto...ma non posso mandarti il link così mi dice che posso fare?

    RispondiElimina
    Risposte
    1. @Lemedichesse
      Il messaggio che leggi prima del modulo del commento parla di link attivi mentre puoi ovviamente incollare l'URL del tuo blog se vuoi che le dia una occhiata. Il problema è che non scompare la pagina e questo è strano.
      Adesso che guardo meglio il codice può darsi che l'editor mi abbia inserito uno spazio in più
      Al posto di
      ", 10000);
      metti
      ",10000);
      oppure cambia il valore 10000 che sono 10 secondi.

      Elimina
  7. ECCOMI..ERNESTO...SONO GABRY...E' QUESTO IL TUTORIAL A CUI FACEVO RIFERIMENTO POCO FA'.......LA PAGINA SONO RIUSCITO A INSERIRLA...HO CAMBIATO IL MSG, IL COLORE , ETC ETC.......SE NON SBAGLIO, IL TUTORIAL PARLA ANCHE DI IMMAGINI...CIOE' SI POSSONO INSERIRE IMMAGINI......POTRESTI SPIEGARMI COME FARE?? GRAZIE ERNESTO...

    RispondiElimina
    Risposte
    1. Ti prego di scrivere in minuscolo. Per l'immagine basta che tu incolli un codice di questo tipo
      <p><img src='URL_IMMAGINE'/></p>
      nel punto in cui vuoi visualizzarla
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy