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.
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 == "visibile"){menu.className = "invisibile"; }
else{ menu.className = "visibile"; }
}
</script>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
var menu = document.getElementById(identificazione);
if(menu.className == "visibile"){menu.className = "invisibile"; }
else{ menu.className = "visibile"; }
}
</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='"loading" + 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´ E VEDRETE IL SITO</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("mostranascondi('benvenuto')", 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.<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´ E VEDRETE IL SITO</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("mostranascondi('benvenuto')", 10000);
</script>
</b:if>
Le altre personalizzazioni più importanti riguardano
- 10000 è il tempo in millisecondi che il messaggio rimane visibile prima di scomparire
- #E4F9F8 è il colore dello sfondo della pagina del messaggio
- width:600px; height:400px rappresentano la larghezza e l'altezza del messaggio
- top:40%; left:40%; è il punto in percentuale del layout in cui inizia il messaggio.
- color:#003366 è il colore del testo del messaggio
- font-size:24px; line-height:24px sono la dimensione dei caratteri e delle righe di testo del messaggio
- text-align:center; per centrare il messaggio e eventuali immagini inserite
Se avete un cronometro potete controllare che sparisce esattamente dopo 10 secondi.
ahhhhhhhhhhh che meraviglia
RispondiElimina@Dea
EliminaPer così poco ;)
Ciao Ernesto, bella davvero questa pagina di benvenuto!
RispondiEliminaUna 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
@Giuliana
EliminaIl sito si carica subito e quando sparisce la pagina di benvenuto è praticamente già pronto. Lo puoi verificare nella Demo.
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.
EliminaGrazie :)
bella idea...si potrebbe inserire anche il widget per il mi piace di facebook?il mi piace della fanpage intendo
RispondiElimina@Domenico
EliminaPuoi inserire tutto quello che ti pare basta che abbia un codice HTML quindi un bottone, un iframe un video, ecc
ok, avevo postato anche un altro commento che non vedo però; dicevo se sarebbe possibile mostrarlo non a schermo intero, a mò di popup
Eliminasì una sorta di lightbox con iframe sarebbe l'ideale :)
RispondiElimina@GratisOquasi
EliminaCi 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
ciao parsifal. sto provando ad usare il messaggio di benvenuto per avvisare che il sito è in costruzione.
RispondiEliminaavrei 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
@FrancescoSansone
EliminaPer il tuo problema è più adatto questo post
http://www.ideepercomputeredinternet.com/2011/11/blogger-blog-in-manutenzione-widget-mi.html
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?
RispondiEliminaGrazie!
@GiorgioC.
EliminaC'è 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
Grazie mille!
EliminaIo 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@Lemedichesse
EliminaIl 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.
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...
RispondiEliminaTi prego di scrivere in minuscolo. Per l'immagine basta che tu incolli un codice di questo tipo
Elimina<p><img src='URL_IMMAGINE'/></p>
nel punto in cui vuoi visualizzarla
@#