Pubblicato il 21/12/09 - aggiornato il  | 22 commenti :

Come creare una pagina di benvenuto in un blog su Blogger con l'effetto Lightbox.

Per mostrare questo effetto ho dovuto creare un nuovo blog che ho chiamato Pagina di Benvenuto. Accedendovi potete rendervi conto di cosa stia parlando. Quando si entra nella Homepage del blog si visualizzerà una finestra sul tipo dell'effetto Lightbox con un invito a entrare nel sito e relativo collegamento nella parte bassa.

pagina-benvenuto

E' inutile sottolineare come la pagina di benvenuto possa essere creata da ciascuno di voi a seconda delle proprie esigenze e secondo i propri gusti. Se accedete a un singolo post del blog che ho creato, la pagina di benvenuto non sarà invece visibile. Ma andiamo per gradi.

Per prima cosa occorre accedere a Layout > Modifica HTML e salvare il modello completo. Cercare la riga di codice </head> e, immediatamente sopra, incollare il seguente codice

<!-- Pagina di Benvenuto -->
<link href='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/leightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/prototype.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/leightbox.js' type='text/javascript'/>
<!-- Pagina di Benvenuto - http://parsifal32.blogspot.com -->

Salvare il modello. Adesso occorre editare una pagina di benvenuto e questo può essere fatto con programmi installati nel computer o anche utilizzando dei tool online come Online HTML Editor. Nel caso in cui voleste inserire nella vostra pagina anche delle immagini, queste prima devono essere caricate su un hosting gratuito tipo Skydrive o Imageshack.

online HTML Generator

 

Quando avete editato la vostra pagina con immagini, testo e collegamenti vari, andando sull'icona a forma di minore e maggiore (<>), potete visualizzare il codice corrispondente e copiarlo in un file di testo.

Alternativamente a Online HTML Generator potete usare anche Windows Live Writer o l'Editor di Blogger; in questo caso vi dovete ricordare comunque di caricare le immagini su un hosting e di passare alla modalità HTML per copiare il codice.

A titolo di esempio riporto il codice creato per la pagina di benvenuto che ho creato per prova

<img src="http://sjmshg.blu.livefilestore.com/y1pgBiP3B2O4ODgfwAfKyv63vwtEqVS5DDq-da2QVpj0AY8cVYD7_vksVmMFmefa3JNZiGloQ-tjpDhePOcJ5l3mqzSSz8vA4t8/wel003.gif" title="benvenuto-gif" alt="benvenuto-gif" border="0px" />
<div><img src="http://sjmshg.blu.livefilestore.com/y1pJRUEzhJeKe5w6ju4QstoKqB-L2E8CCFgVbFnp-Q3Ut85N8SIoj05sxtcAp7Mb5qX0XYhsV6DsUoLt27Q1DtqmFjSk4iuZ3bQ/ideepercomputer.png" title="idee per computer" alt="idee per computer" border="0px" /><br />
</div>
<div><span style="font-size: 14pt; ">Per</span><a href="http://feeds.feedburner.com/ComputerChePassione"><span style="font-size: large;"> iscriverti ai feed</span></a><span style="font-size: large;"> o per </span><a href="http://www.facebook.com/pages/IDEE-PER-COMPUTER-ED-INTERNET/207337935513"><span style="font-size: large;">diventare fan su Facebook</span></a></div>

Come vedete ci sono gli URL di due immagini e un paio di collegamenti. Adesso andiamo su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript. Titoliamo l'elemento in un modo riconoscibile tipo "Benvenuto" e incolliamo il seguente codice in Sezioni del sito

<!-- messaggio benvenuto inizio -->
<div id="pop01" class="leightbox">

<div class="scrollbox">

<!-- Codice HTML della pagina di benvenuto creato precedentemente -->

<a href="URL_DEL_BLOG" class="lbAction" rel="deactivate">Entra nel blog</a>
</div>

<!-- messaggio benvenuto fine -->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script></div>

Le personalizzazioni da fare sono le seguenti

  1. Al posto della riga rossa dobbiamo inserire il codice HTML che abbiamo creato per la nostra Pagina di Benvenuto
  2. In URL_DEL_BLOG dobbiamo inserire l'indirizzo del nostro blog
  3. Entra nel blog e l'espressione che sarà letta nella parte finale della finestra e che può essere sostituita con un altra.

pagina-benvenuto

Questo elemento pagina va salvato e, con il mouse, posizionato nella parte alta del modello, sopra all'area del post

pagina-benvenuto-2

Nel momento in cui si accede al blog sarà vista quindi la pagina di benvenuto e successivamente si potrà accedere al blog cliccando su Entra nel blog. 

Senza ulteriori modifiche questa pagina sarà visibile quando si apre qualsiasi post del blog e questo non è consigliabile ma è opportuna che venga visualizzata solo quando il visitatore accede alla Homepage. Bisogna quindi inserire questa condizione nel modello.

Si usa il sistema già ampiamento spiegato negli articoli

  1. Come inserire un widget solo negli articoli o solo in Homepage - 
  2. Come inserire un widget solo in una pagina specifica del blog -

Si va nuovamente su Layout > Modifica HTML e si cerca il widget attraverso il nome che gli abbiamo dato, in questo caso "benvenuto", cliccando su F3 o pigiando Ctrl+F, dopo aver messo la spunta su Espandi i modelli widget

Si inseriscono le due righe

<b:if cond='data:blog.url == data:blog.homepageUrl'> e

</b:if>

esattamente nella posizione mostrata da questo screenshot

codice html

Vanno cioè inserite rispettivamente dopo la riga <b:includable id='main'> e prima della riga </b:includable>. Si salva il modello, si riapre l'elemento pagina andando su Layout > Elementi pagina > Modifica e si elimina il Titolo, in questo caso "benvenuto" perché non ci serve più per la sua individuazione.

Osservazioni finali

  1. Si può scegliere di mettere il messaggio di benvenuto in tutte le pagine e non seguire l'ultimo passaggio
  2. Si può anche mettere il messaggio di benvenuto a un altro blog che adesso abbiamo un po' tralasciato per reindirizzare il traffico nel nostro blog principale
  3. Si può utilizzare questo tool anche quando si ha un blog in fase di manutenzione affinché i visitatori visualizzino un messaggio del tipo "Sito in Manutenzione" o simile
  4. Se svolete una cosa meno ingombrante potreste essere interessati al widget di benvenuto personalizzato. 

Si possono effettuare anche delle personalizzazioni allo stile della finestra Lightbox. Basta scaricare il file presente a questo indirizzo, modificarlo e ricaricarlo su un nostro hosting che può essere Google Sites.

Le modifiche possono riguardare la posizione della scritta Entra nel blog che in questo caso è in basso a destra ma che possiamo mettere in alto sostituendo bottom con top nella parte iniziale del codice. Possiamo anche modificare l'opacità della finestra andando nella parte finale, ma queste cose sono per smanettoni.

Fonti | Leightbox, CodeBook e Divya Sai.





22 commenti :

  1. Ciao Parsi
    Carina la modifica ma con IE7 mi blocca la presentazione sul tuo blog di prova dandomi errore e mi chiude il browser :(

    RispondiElimina
  2. @AUTOdi....
    Sei sicuro che non sia un problema del tuo browser perché l'ho testato anche con IE7 e IE8 e non ha dato nessun problema...

    RispondiElimina
  3. Sono incuriosito, ma..
    hi riprovato adesso e ancora niente: messaggio di errore.
    Sai cosa sfrutta LB? Forse qualche componente da aggiornare...? Non capisco

    RispondiElimina
  4. @Autodi...
    E' vero, adesso anche a me IE dà un errore nella visualizzazione della pagina. Stranissimo prima non lo dava :(

    RispondiElimina
  5. ho seguito il tutorial passo passo, ma non riesco a far scomparire il Lightbox dalla home page nonostante faccia click su "entra nel blog" (a cui corrisponde l'URL del mio blog), come posso fare?

    RispondiElimina
  6. @edo
    forse è un problema del browser perché questo effetto non funziona perfettamente con tutti i browser. Prova con Firefox.
    Ciao

    RispondiElimina
  7. uso firefox, ma niente: ha funzionato solo per una decina di minuti. ho provato anche con Chrome e con IE8, ma non va uguale :(
    avranno cambiato qualcosa in blogger... fa niente, ho ripiegato su un banner statico; grazie comunque :)

    RispondiElimina
  8. Ciao Parsi,
    ma questo effetto è l'unico che si può usare per realizzare una home page in Blogger?
    Oppure si può fare come in Wordpress in cui puoi decidere di impostare una pagina come home page dalla quale poi si passa alla schermata dei post?

    Il mio intento sarebbe creare una hp come se si trattasse di un sito che è la finestra di benvenuto e di presentazione del Blog e poi dare la possibilità agli utenti di navigare tra i post.

    RispondiElimina
  9. @Mamma Ninja
    Si può fare con il redirect della homepage a una pagina statica che tu hai creato appositamente come landing page.
    Ecco il tutorial
    http://www.ideepercomputeredinternet.com/2009/12/come-inserire-il-redirect-in-un-blog-su.html
    Se non sei capace dimmelo che magari ci faccio un altro post.
    Ciao

    RispondiElimina
  10. Ciao scusami sono nuova nel campo, volevo dirti che anche a me non funziona bene per lo meno il lightbox va solo non ho capito perchè non è al centro della pagina me lo da attaccato al bordo superiore della pagina, non riesco a capire perchè ho seguito tutti i procedimenti
    comunque è una svolta!!!:D

    RispondiElimina
  11. Funziona esattamente come nella pagina di Demo. Il messaggio è fisso non è flottante. Se si scorre la pagina va in alto ma è normale.

    RispondiElimina
  12. Devo inserire un avviso che possa essere visualizzato ad ogni pagina del blog ma solo per la prima visita, non deve uscire per ogni cambio pagina insomma.
    Ernesto hai qualche idea??!!

    RispondiElimina
  13. @Auto ...
    Entrano di mezzo i cookie. E' il server che li mette nel browser. Temo sia impossibile gestire una cosa del genere con Blogger. Con Wordpress ci saranno certamente dei plugin ...

    RispondiElimina
  14. Grazie mille ernesto per questa spiegazione molto utile, ma se vorrei ampliare la pagina di benvenuto in 800 per 600px come devo fare ho provato ha cambiare le misure nel widget ma mi da sempre le stesse misureimpostate qui nel tutorial

    RispondiElimina
    Risposte
    1. allora ci sono riuscita hihh unica cosa, non riesco a centrarla mi sta tutta a destra

      Elimina
    2. @Arwen+-+-+
      Prova a mettere un < center > all'inizio e < /center > alla fine. Non so se funzionerà ma provare costa poco. Ovviamente togli gli spazi che ho messo subito prima e subito topo i tag.

      Elimina
    3. Ciao Ernesto, come si fà per ampliare la pagina dal codice html?

      Elimina
    4. @EvoCuore
      Intendi questa pagina di benvenuto? Dovresti scaricare questo file
      http://sites.google.com/site/ideepercomputeredinternet/pagina-benvenuto-1/leightbox.css
      incollandolo nel browser e pigiando su Invio, quindi modificarlo nel valore di width quindi ricaricarlo su Google Sites, ottenerne il link diretto quindi sostituirlo nel codice.

      Elimina
    5. sisi è questa pagina perchè devo visualizzare un img più grande, grazie per le istruzioni, come faccio per ricaricare il file su google sites? ho cercato su internet ma non l'ho capito

      Elimina
    6. @EvoCuore
      Quando cerchi queste informazioni fai prima a farlo direttamente in questo blog invece che andare generalmente su internet. Ecco il post
      http://www.ideepercomputeredinternet.com/2010/05/come-caricare-file-javascript-e-css-su.html
      La grafica è un po' cambiata visto che l'articolo risale a più di due anni fa ma la sostanza non cambia.

      Elimina
    7. Grazie Ernesto ci sono riuscito grazie ai tuoi consigli, un ultima domanda, volendo potrei inserire anche della musica?

      Elimina
    8. @EvoCuore
      La musica nel blog o nella pagina di benvenuto? Ti linko tre articoli
      http://www.ideepercomputeredinternet.com/2011/05/come-creare-una-pagina-di-introduzione.html
      http://www.ideepercomputeredinternet.com/2012/07/musica-sottofondo-blogger-audio.html
      http://www.ideepercomputeredinternet.com/2011/01/come-inserire-il-player-audio-di-yahoo.html

      Elimina

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.