Come installare una pagina di introduzione o di benvenuto in un blog di Blogger che si visualizzi solo una volta per ciascun utente mediante l'utilizzo dei cookie.
Ho già presentato diverse opzioni per introdurre una pagina di benvenuto o di presentazione al blog. Ricordo la pagina di manutenzione, la pagina di benvenuto con musica di sottofondo, la pagina di introduzione con Effetto Lightbox, il messaggio di benvenuto in homepage, un avviso fisso o flottante e, per finire, una pagina di benvenuto che scompare automaticamente dopo pochi secondi.
I commenti a questo ultimo post sono stati particolarmente incentrati nella ricerca della possibilità di usare i cookie per impedire che tale pagina possa essere visualizzata di continuo quando si naviga nel sito. Anche se fosse messa nella homepage sarebbe opportuno fare in modo di non mostrare la stessa pagina a un singolo navigatore dopo che è stata già vista una volta. E' evidente che diventerebbe estremamente noiosa.
Vado quindi a presentare una Pagina di Introduzione al blog che ha le seguenti caratteristiche:
- Sarà visualizzata solo quando si aprirà una determinata pagina (per esempio la homepage)
- Si potrà settare il numero di secondi che rimarrà visibile prima di scomparire con effetto dissolvenza dovuta a JQuery.
- Si potrà mostrare sempre o solo se l'utente non arriva nel blog dopo un certo tempo
- Si potrà decidere il numero dei giorni che dovranno durare i cookie
Occorre andare su Modello > Backup / Ripristino e salvare il modello completo per un eventuale backup di sicurezza nel caso la modifica non andasse a buon fine. Si torna quindi su Modello > Modifica HTML e si cerca la riga <head>. Da notare che si tratta dell'inizio della sezione e non della fine visto che il tag è senza slash ( /). Subito sotto a questa riga si incolla il
quindi si cerca la riga </body> e, subito sopra, si incolla quest'altro codice
<!-- Pagina di introduzione Inizio --><center>
<div class='meerkat'>
<div id='splash-content'>
<!-- Inizio contenuto introduzione --><div class='testointro'>
BENVENUTI IN QUESTO BLOG</div>
<div class='enter'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS48T20RcPZ4NCOwL4vPUCHhAHOFk7HgM5tEyd_RMm3bwlhyphenhyphenUom53dKJ0Oehk7QwKjLG0JRDpyVHSijenUwPMPVQaviPyG7P4-cfA1IaZtehWQ2T3dihf2uzblawmEbVZSmJo0Qt4m11R2/s1600/Header1.png'/><br/>
<div class='testointro'>
TRA DODICI SECONDI QUESTA PAGINA SCOMPARIRA´ E VEDRETE IL SITO</div>
<!-- Fine del contenuto introduzione -->
</div>
<br/><br/>
<div id='close'> ACCEDI AL BLOG </div>
</div></div>
</center>
<!-- Pagina di Introduzione fine -->
<div class='meerkat'>
<div id='splash-content'>
<!-- Inizio contenuto introduzione --><div class='testointro'>
BENVENUTI IN QUESTO BLOG</div>
<div class='enter'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS48T20RcPZ4NCOwL4vPUCHhAHOFk7HgM5tEyd_RMm3bwlhyphenhyphenUom53dKJ0Oehk7QwKjLG0JRDpyVHSijenUwPMPVQaviPyG7P4-cfA1IaZtehWQ2T3dihf2uzblawmEbVZSmJo0Qt4m11R2/s1600/Header1.png'/><br/>
<div class='testointro'>
TRA DODICI SECONDI QUESTA PAGINA SCOMPARIRA´ E VEDRETE IL SITO</div>
<!-- Fine del contenuto introduzione -->
</div>
<br/><br/>
<div id='close'> ACCEDI AL BLOG </div>
</div></div>
</center>
<!-- Pagina di Introduzione fine -->
Qui si possono personalizzare le scritte e l'immagine che si vogliono visualizzare oltre all'espressione con cui si chiude la pagina di introduzione per accedere al blog. Tra i due commenti che indicano l'inizio e la fine del contenuto di introduzione, possiamo sbizzarrirci con l'HTML. Ho creato una classe testointro per personalizzare le scritte che può comunque anche essere tolta. E' anche possibile scegliere una immagine di nostro gradimento da visualizzare nella introduzione.
Non abbiamo ancora finito perché, cliccando su F3 o su Ctrl+F, dobbiamo cercare la riga ]]></b:skin> e, subito sopra, incollare quest'ultimo codice
/* Pagina Benvenuto */#enter {margin-top:150px; /*Distanza tra la classe enter e la parte superiore */}
.testointro {
font-size:24px; // Dimensioni del testo della introduzione
font-weight:bold;
color:#003366; //Colore del testo della introduzione
text-align:center;
}
#close{
cursor:pointer;
font-size:28px; /* Dimensioni de testo per entrare al blog */font-weight:bold;
color:#940F04; /* Colore del testo per entrare al blog */}
.testointro {
font-size:24px; // Dimensioni del testo della introduzione
font-weight:bold;
color:#003366; //Colore del testo della introduzione
text-align:center;
}
#close{
cursor:pointer;
font-size:28px; /* Dimensioni de testo per entrare al blog */font-weight:bold;
color:#940F04; /* Colore del testo per entrare al blog */}
dove possono essere personalizzate le dimensioni dei caratteri e i colori dei font. Finalmente si salva il modello. Nel codice della Pagina di Introduzione che ho postato su Google Documenti ci sono diversi parametri da configurare. Ricordo i più importanti:
- La prima riga è lo script JQuery, se è già presente nel blog si può tralasciare di inserirlo
- background: '#d1d1d1' è il colore di sfondo della pagina
- timer: 12 rappresenta il numero di secondi che rimane visibile
- dontShowAgainAuto: false, è la riga con cui si gestisce la visualizzazione della pagina. Di default è stato impostato il valore false il che comporta che la pagina di introduzione sia sempre visibile. Se sostituiamo false con true allora la pagina di introduzione sarà mostrata solo una volta durante il lasso di tempo di cui al punto successivo
- cookieExpires: 2, è il numero dei giorni di vita dei cookie. Se nel punto 4) è stato impostato il valore true allora per 2 giorni in quel browser rimarrà un cookie che impedirà l'apertura della pagina di introduzione.
Concludo osservando che questa Pagina di Benvenuto si può rendere visibile non su tutti i post del blog ma per esempio solo in Homepage. A tale scopo occorre utilizzare i tag condizionali inserendo all'inizio e alla fine del codice incollato dopo <head> e all'inizio a alla fine del codice incollato prima di </body> le due righe seguenti
<b:if cond='data:blog.url == data:blog.homepageUrl'>
…… Codice …….</b:if>
…… Codice …….</b:if>
Ricordo anche che con l'avvento dei domini localizzati, se si inseriscono dei tag condizionali relativi a un post, dobbiamo considerare il suo URL canonico cioè quello con il .com e non quello con il .it.
Fonte | Meerkat -
molto bello! Questo tipo di effetto è possibile impostarlo per il box su facebook? Cioè avere un box che mantiene i cookie intendo...
RispondiElimina@NicoNico
EliminaAl momento no
Ok grazie e auguri! ;)
EliminaAuguriiiiiiiiiiiiiiiii! Buon compleanno! :)
RispondiElimina@Roberta
EliminaGrazie, gli auguri sono sempre ben accetti ^^
:**********
EliminaSalve Signor Ernesto !
RispondiEliminaHo aperto il DEMO ( http://scriptaculous-menu.blogspot.it/2012/04/demo-della-presentazione-di-una.html ) e ho visto uno sfondo molto carino in movimento, mi potrebbe segnalare il relativo articolo per inserirlo ?
La ringrazio anticipatamente
Piero
@RitmoNuevo
EliminaSi tratta dell'Effetto Groovy 1970s che puoi trovare qui
http://www.ideepercomputeredinternet.com/2011/03/effetto-groovy-1970s-per-inserire-barre.html
grazie mille!!!
EliminaNon funziona in nessun modo si apre sempre quando torno a home cosa devo fare per non aprirsi ogni volta che torno a home volevo che si apre una volta al giorno pero si apre sempre ...
RispondiEliminacosa devo fare ???
@# Questo codice è presente?
EliminadontShowAgainAuto: false,
cookieExpires: 2,
Sostituisci con
dontShowAgainAuto: true,
cookieExpires: 1,
Al posto di 1 puoi mettere anche un diverso numero di giorni
grazie mille funziona senza di te non facevo nulla grazie mille
Elimina