2 aprile 2012

Creare una pagina di introduzione al blog con i cookie e JQuery

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:
  1. Sarà visualizzata solo quando si aprirà una determinata pagina (per esempio la homepage)
  2. Si potrà settare il numero di secondi che rimarrà visibile prima di scomparire con effetto dissolvenza dovuta a JQuery.
  3. Si potrà mostrare sempre o solo se l'utente non arriva nel blog dopo un certo tempo
  4. Si potrà decidere il numero dei giorni che dovranno durare i cookie

pagina-introduzione-blogger

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='http://2.bp.blogspot.com/-gYq0aygp69Q/T0NvQZcLJQI/AAAAAAAAWr0/5W24lhLf5D0/s1600/Header1.png'/><br/>
<div class='testointro'>
TRA DODICI SECONDI QUESTA PAGINA SCOMPARIRA&#180; 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 */}

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:
  1. La prima riga è lo script JQuery, se è già presente nel blog si può tralasciare di inserirlo
  2. background: '#d1d1d1' è il colore di sfondo della pagina
  3. timer: 12 rappresenta il numero di secondi che rimane visibile
  4. 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
  5. 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>

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 -


12 commenti:

  1. molto bello! Questo tipo di effetto è possibile impostarlo per il box su facebook? Cioè avere un box che mantiene i cookie intendo...

    RispondiElimina
  2. Auguriiiiiiiiiiiiiiiii! Buon compleanno! :)

    RispondiElimina
  3. Salve Signor Ernesto !
    Ho 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

    RispondiElimina
    Risposte
    1. @RitmoNuevo
      Si tratta dell'Effetto Groovy 1970s che puoi trovare qui
      http://www.ideepercomputeredinternet.com/2011/03/effetto-groovy-1970s-per-inserire-barre.html

      Elimina
  4. Non 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 ...
    cosa devo fare ???

    RispondiElimina
    Risposte
    1. @# Questo codice è presente?
      dontShowAgainAuto: false,
      cookieExpires: 2,
      Sostituisci con
      dontShowAgainAuto: true,
      cookieExpires: 1,
      Al posto di 1 puoi mettere anche un diverso numero di giorni

      Elimina
    2. grazie mille funziona senza di te non facevo nulla grazie mille

      Elimina

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