Visualizzazione post con etichetta shadowbox. Mostra tutti i post
Visualizzazione post con etichetta shadowbox. Mostra tutti i post

Pubblicato il 21/05/11 - aggiornato il  | 54 commenti :

Come inserire una finestra popup di benvenuto con ShadowBox.

Ho avuto modo di presentare l'Effetto Shadowbox che ritengo sia uno dei migliori per gli utenti di Blogger data la sua estrema versatilità. L'obiettivo di questo post è quello di creare una finestra popup di entrata che può essere personalizzata con una immagine o anche con qualsiasi oggetto HTML.

L'immagine che si visualizza ha un collegamento alla sottoscrizione dei feed di questo blog, può essere chiusa cliccando sulla crocetta in basso a destra oppure scomparirà automaticamente dopo 20 secondi dall'apertura della pagina. La durata dell'apertura può essere personalizzata

 Ho postato sul web una dimostrazione di questo effetto


Questo è invece lo screenshot di quello che appare al visitatore


pagina popup di invito a sottoscrivere i feed


Pubblicato il 19/05/11 - aggiornato il  | 42 commenti :

Effetto ShadowBox per gallerie di foto e di video.

Ho presentato diversi effetti molto suggestivi come Lightbox, Lytebox, Expando, Facebox, Sfoglia Pagina e altri ancora ma credo che quello che vado a illustrare sia il migliore e il più completo. ShadowBox si basa sullo stesso concetto di Lightbox che permette all'utente di aprire delle finestre modali unitamente alla opacizzazione dello sfondo. Quello che ha in più rispetto a Lightbox è che è possibile anche utilizzarlo per i video di Youtube e Vimeo oltre che per pagine HTML come del resto accade anche per Lytebox.
E' anche possibile utilizzare l'effetto con delle mappe e creare un popup di benvenuto a chi arriva nel nostro blog. Queste due ultime funzioni le vedremo in un prossimo articolo per non appesantire troppo la trattazione. Si possono scaricare i file necessari all'installazione direttamente dal sito del creatore. Si mette la flag alle funzionalità che interessano e si seleziona la lingua con cui si vuole che operi l'effetto. Visto che è una operazione che ho già fatto e che ho già caricato le immagini degli strumenti di navigazione sul mio account Picasa, potete limitarvi a inserire gli script e i CSS nel template. Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice