Finestra modale di benvenuto da mostrare in Blogger con l'Effetto 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
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
Per l'installazione di ShadowBox si possono seguire le indicazioni del post che ho appena linkato. Per questa demo della finestra popup ho leggermente modificato il codice nei colori e nell'opacità
overlayColor: "#450808",
overlayOpacity: "0.8",
overlayOpacity: "0.8",
Dopo aver inserito questo script, se non si è ancora fatto, si va sempre su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e, immediatamente sopra alla riga </head>, si incolla il codice
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "it",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'Codice HTML da visualizzare in apertura', height: 336, // Altezza della finestra
width: 506 // Larghezza della finestra
});
}
setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura
// ]]>
</script>
</b:if>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "it",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'Codice HTML da visualizzare in apertura', height: 336, // Altezza della finestra
width: 506 // Larghezza della finestra
});
}
setTimeout('Shadowbox.close()', 20000); // Durata del tempo di apertura
// ]]>
</script>
</b:if>
Le personalizzazioni da fare riguardano:
- Le dimensioni della finestra popup in altezza e larghezza
- La durata del tempo di apertura della finestra in millisecondi (20000 significa una durata di 20 secondi)
- La prima e l'ultima riga impongono di visualizzare la finestra popup solo in homepage e possono essere sostituite da altri tag condizionali
- Il codice dell'oggetto da mostrare in primo piano
Per il punto 4) ci sarebbero un sacco di possibilità da prendere in esame. Come esempio vi posto il codice che ho inserito nel post di demo
dove l'URL in rosso è quello dei feed di questo blog e quello in blu è l'indirizzo della immagine che ho caricato su Picasa. Adesso dobbiamo fare una ulteriore modifica che sarà diversa a seconda che utilizziamo un vecchio template o uno nuovo del Designer Modelli. Nel primo caso cerchiamo la riga
e la sostituiamo con
<body onload='AlertMessage();'>
Con in nuovi template la riga da cercare sarà
<body expr:class='"loading" + data:blog.mobileClass'>
e dovrà essere sostituita con
<body expr:class='"loading" + data:blog.mobileClass' onload='AlertMessage();'>
Si salva il modello. Il contenuto in HTML della finestra popup dovrà essere inserito tra le due virgolette singole della riga content. Per una immagine con un collegamento il codice sarà
<a href="URL DEL COLLEGAMENTO"><img src="URL DELLA IMMAGINE"/></a>
Se si vuole mettere solo del testo si può usare questa sintassi
<div style="padding:20px 10px 20px 10px; color:#ffffff; background-color: #000000;">Testo da visualizzare</div>
Si può inserire anche un video con il relativo codice da incorporare preso per esempio da Youtube. In questo caso va scelto il vecchio codice. E' anche possibile inserire un oggetto in flash in formato SWF. Il filmato dovrà essere preventivamente caricato su DropBox. Non ho testato ma possiamo anche inserire un iFrame di una pagina web cambiando le righe players: ['html'] e player: 'html', con players: ['iframe'] e player: 'iframe',.
Concludo osservando che oltre a un invito a sottoscrivere i feed, si può inserire anche un banner pubblicitario. Meglio comunque non utilizzare quelli dei circuiti pubblicitari ufficiali perché la cosa potrebbe andare contro il regolamento del programma. Mi riferisco a una pubblicità di un evento, di un prodotto, di un libro o di qualsiasi cosa che trattiamo nel nostro sito. I blog di notizie possono inserire l'immagine di una notizia in primo piano, quelli musicali la copertina dell'ultimo CD di un artista, i blog collegati a pubblicazioni possono inserire l'immagine del libro con il link al negozio online, ecc…
Aggiornamento: L'effetto funziona con Chrome e Firefox ma non con IE.
Aggiornamento: L'effetto funziona con Chrome e Firefox ma non con IE.
Fonte | ShadowBox -
Ma si visualizza ogni volta che si va in home page??
RispondiElimina@Curiosità da Condividere
RispondiEliminaSì, tutte le volte che si apre la homepage si vede la finestra popup per un certo numero di secondi, però può essere eliminata immediatamente
Come posso creare una finestra pop up in cui appare la finestra della pagina fan di facebook,in modo da invitare a mettere mi piace oppure di attendere 5 seconi. Ho visto questo effetto in molti siti. Sai come si fa?
RispondiEliminaSe mi posti un link posso dare una occhiata
RispondiEliminaEsiste l'app dedicata ma se non sbaglio è a pagamento. Si chiama Facebook Traffic Pop e permette di cliccare il Mi Piace ai visitatori per aumentare i fan della pagina...
RispondiEliminaciao, volevo chiederti se è possibile, dato un script (, praticamente è un banner in flash) farlo apparire come popup?? grazie anticipato
RispondiElimina@Mark86
RispondiEliminaDevi inserire il codice del banner in flash tra le due virgolette di content. Se non sai come inserire un banner in flash, devi prima caricarlo su un hosting tipo DropBox
http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
Quindi incollare l'URL con le modalità di questo post
http://www.ideepercomputeredinternet.com/2009/02/inserire-dei-filmati-in-formato-swf-nel.html
grazie lo provo subito e vi posto il risultato ;)
RispondiEliminaniente non mi funziona, durante l'Anteprima del Modello mi appare all'inizio della pagina proprio in alto questo ...height: 336, // Altezza della finestra width: 506 // Larghezza della finestra }); } setTimeout('Shadowbox.close... ciò significa che qualcosa non va
RispondiEliminaAltre info: uso Chrome; all'interno del blog ho inserito altri tuoi widget; uso un nuovo template quindi ho sostituito quello che dici nella guida; all'interno di CONTENT ho messo un banner in flash sotto forma di script di dimensioni 728x90 (devo modificare anche le dimensioni height e width?) GRAZIE
http://marcoparrilla.blogspot.com se vuoi dare un occhiata
@Mark86
RispondiEliminaL'immagine che ho usato io è di 500x333 pixel, leggermente inferiore alla finestra 506x336
Può darsi che dipenda dalle dimensioni oppure dal fatto, più probabile, che il formato flash non è supportato negli effetti del genere lightbox
Ciao Ernesto,
RispondiEliminaprima di cominciare ti chiedo?:
prima devo inserire l'effetto ShadowBox che descrivi qui e poi fare questa modifica, oppure questa procedura esclude/include l'altra?
Ciao Ernesto. Post molto utile ma non riesco a inserirlo nel mio blog. Seguo tutta la procedura ma sulla home page non mi compare nessuna finestra di pop up. è strano perchè non mi dà errori. Quello che vorrei fare è inserire un pop up per invitare le persone a cliccare mi piace. Come poteri risolvere? Hai qualche suggerimento?
RispondiEliminaGrazie
@Raffaele
RispondiEliminaDevi prima inserire l'Effetto ShadowBox
http://www.ideepercomputeredinternet.com/2011/05/effetto-shadowbox-per-gallerie-di-foto.html
e controllare che ti funzioni inserendo delle immagini di prova in qualche post. Se non ci sono problemi non dovrebbero esserci neppure per questa finestra popup.
Se invece non riesci a inserire ShadowBox e a farlo funzionare, prova a caricare i javascript su DropBox, cioè questo
https://sites.google.com/site/scriptperilblog/effetti/shadowbox1.css
e questo
https://sites.google.com/site/scriptperilblog/effetti/shadowbox.js
penso di aver fatto tutto correttamente, per l'installazone dello shadowbox ho caricato anche i file su dropbox e ho testato il funzionamento sul blog.
RispondiEliminaCome prova ho messo il codice per il testo nella riga contenent ma non mi esce nulla.. sapresti dirmi cosa ho sbagliato?
Questo è il sito xboxbook.org
@GEKO24
RispondiEliminaNon ci sono errori. Se sei sicuro di aver fatto tutto correttamente significa soltanto che nel tuo modello c'è un altro javascript incompatibile con quello di Shadowbox. E' purtroppo una cosa molto comune specie con i modelli già molto personalizzati.
Ciao Ernesto dopo un'infinità di correzioni al template del mio blog sono riuscito a far funzionare questo effetto, ti scrivo per rispondere a Rubel (e a chi può interessare, magari puoi fare un post tu migliore) visto che sono riuscito a fare ciò che lui chiedeva, e cioè inserire il banner per far iscrivere i miei lettori alla pagina fan di Facebook.
RispondiEliminaCon il tuo permesso lo spiego:
Per prima cosa si deve creare il bottone andando a questa pagina: http://developers.facebook.com/docs/plugins/ scegliendo quello che più piace, ma consiglio quello che mostra gli avatar (o foto) degli utenti iscritti e di dargli le dimensioni 450px-258px (logico che vanno modificate nello script qui pubblicato in altezza262px e larghezza454).
Adesso si deve selezionare la versione "iframe" (qui un esempio: http://img266.imageshack.us/img266/3564/snap20111119101405002.png) e incollarla in content al posto dello spazio dell'url dell'immagine e non mettere alcun link di collegamento (qui un'altro es: http://img143.imageshack.us/img143/9901/snap20111119101213001.png).
Fatto, basta regolare il tempo di durata di esposizione (consiglio di lasciarlo com'è) e l'effetto sarà questo:http://img171.imageshack.us/img171/4186/snap20111119104530001.png.
Così inserito il tutto è interattivo, cioè basta cliccarle su "Mi Piace" e andrà in automatico.
Un paio di precisazioni, Facebook non da la dimensione 258 ma 290, andrà modificata una volta inserita nel template, non va modificato 'html' e ['html'] in 'iframe' e ['iframe'] altrimenti non va.
Da lunedì potrete vederlo nella mia home page http://sauroweb.blogspot.com/
Scusami se mi sono permesso questa mini guida nel tuo blog, spero possa essere utile a te e chiunque voglia farsi più fans al proprio blog.
Ciao Sauro
P.S. sto cercando un modo per includere un titolo (es: Se ti piace il blog diventa fans su Facebook), hai suggerimenti da darmi?
@Sauro
RispondiEliminaGrazie delle info molto dettagliate e complimenti per il lavoro fatto.
i complimenti vanno a te, seguendo le tue guide sto imparando moltissime cose, prima o poi devo sdebitarmi, dimmi tu come.... Grazie di tutto
RispondiElimina@Sauro
RispondiEliminaNon ho mai chiesto nulla a nessuno e non lo farò neppure adesso ;) Non ho neppure messo il bottone per le donazioni come invece hanno fatto molti miei colleghi.
Mi basta solo che sia riconosciuto il mio lavoro, solo questo.
Questo commento è stato eliminato dall'autore.
RispondiEliminaLeggi il commento precedente di Sauro. Non ho testato quindi ti consiglio di usare le sue impostazioni che sembra funzionino. Quando avrò un po' di tempo magari ci faccio un post ;)
Eliminascusate,
RispondiEliminaho analizzato l'html di sauro e non ho trovato neanche un "b:if cond='data:......" ne tanto meno i vari <b: etc....
che invece ci sono normalmente all'interno di head /head.
Quindi la domanda nasce spontanea, si possono eliminare tutti o vanno fatte particolari modifiche???
attendo news da sauro.
Grazie in anticipo.
@AgenziaMatrimoniale
EliminaSauro risponderà per quanto gli compete ma intanto ti posso dire che i tag condizionali del tipo b:if non si vedono nel sorgente pagina; funzionano in modo tale da mostrare un certo HTML a seconda della pagina in cui ci si trova.
*Animazione non Matrimoniale aahahah sarà mica stato un lapsus freudiano :D
Eliminagrazie per la risposta,
RispondiEliminaallora non capisco perchè non funzioni. ho fatto tutto quello che è stato scritto ma niente... non appare...nulla...help!!!!
Grazie ancora
Ciao Ernesto! Intanto complimenti per gli articoli dedicati a Shadowbox, molto utili.. A tal proposito volevo chiederti una gentilezza. .sai percaso se è possibile realizzare un galeria come questo esempio? http://www.marcopoderi.net/
RispondiEliminaOssia, è possibile creare un box di testo da far apparire sotto ogni contenuto ingrandito? Grazie anticipatamente.. Spero mi potresti essere utile. Filippo
@filippoman
EliminaL'effetto è il Fancybox
http://fancybox.net/
Non so se sia applicabile a Blogger.
Grazie 1000; Sai per caso se esistono guide o tutorial in italiano per facilitare l'istallazione? Grazie
Elimina@filippoman
EliminaMa chi si mette a perdere tempo per fare queste cose oltre al fesso del sottoscritto? ahahah
Eh eh eh.. invece di gente come te ce ne vorrebbe, credimi! Ascolta, grazie al tuo supporto penso di aver risolto (in parte).
RispondiEliminaMi piacerebbe applicare un effetto più "customizzato".. mi spiego meglio, se dai una occhiata alla immagine seguente http://desmond.imageshack.us/Himg716/scaled.php?server=716&filename=senzatitoloy.png&res=medium vorrei sapere, se possibile, formattare il testo del titolo, ad esempio aggiungere un bold o aggiungere paragrafi.
Grazie anticipatamente
@filippoman
EliminaSono cose che non si possono dire a priori. Se hai tempo e volontà non ti resta che provare, ti posso solo fare gli auguri :))
Ok, Grazie 1000
Eliminaciao grazie mille per le info nel post solo che volevo chiederti.. come si fa a mettere questo pop up in tutte le pagine e non solo nella home?
RispondiElimina@bellaaa
EliminaBasta che toglie la prima e l'ultima riga del codice che sono colorate di rosso. C'era già scritto nel punto 3) delle personalizzazioni.
ciao e complimenti per gli articoli, molto utili e interessanti, volevo fare una domanda, ci sono alcuni template per i quali questa funzione non si può attivare?
RispondiEliminaho provato con vari template e funziona per tutti tranne che per uno in particolare, quello che mi interessava di più:-( forse sbaglio qualche passaggio non so
@MarioRagosta
EliminaNo. E' tipico dei widget di questo genere non funzionare nei modelli che hanno già dei javascript incorporati.
...e non ci sono sotterfugi, vero? o mi tengo il template o il widget?
EliminaNon ne conosco
EliminaHo inserito il codice presente nell'altra guida di Shadowbox e ho inserito anche quello in questa pagina, il tutto per creare un popup come ha spiegato Sauro nei commenti, ma non mi funziona, forse perché ho inserito il javascript dei tuoi articoli simili?
RispondiEliminaComunque ho provato a vedere se funziona tramite un immagine ma non mi funziona ugualmente...
Della guida di Sauro non ho capito solo questo ma penso non sia importante:
non va modificato 'html' e ['html'] in 'iframe' e ['iframe'] altrimenti non va.
Purtroppo non riesco a risolvere questa cosa da solo :(
@Andrea
EliminaVisto l'interesse suscitato da questo commento di Sauro, pubblicai un altro post con le istruzioni per inserire il Like Box
http://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html
possono essere adattate a un altro iframe o codice
Mi è molto piaciuto il demo del popup di benvenuto e vorrei sapere se è possibile creare una finestra di benvenuto di 10 secondi in html senza toccare il modello?
RispondiEliminai miei comnplimenti!
Grazie
@kamasa54
EliminaPer la finestra di benvenuto di 10 secondi basta che metta 10000 al posto di 20000. Però bisogna per forza modificare il modello.
Una cosa strana funziona con il dominio blogspot e non con il dominio personalizzato appena comprato. Sbaglio qualcosa. Grazie mille
RispondiElimina@# Con il dominio personalizzato i javascript di Shadowbox caricati su Google Sites li devi caricare nella cartella Public di Dropbox
EliminaCiao Ernesto, sai se posso usarlo per fare un pop-up col form per raccogliere email? Sto provando ma non riesco, mi si apre la finestra ma è tutta nera. In pratica vorrei utilizzare o il codice html del form di mailchimp o l'indirizzo web del form. Sbaglio qualcosa o non si può fare?
RispondiEliminaGrazie mille per i tuoi consigli, sono fantastici :)!
Pier
@# Prova con quest'altro
Eliminahttp://www.ideepercomputeredinternet.com/2012/03/come-mostrare-il-like-box-di-facebook.html
dove al posto del codice della pagina di Facebook provi a mettere quello del modulo della posta (non ti so dire se funzionerà...)
Grazie Ernesto, provo subito :)
EliminaL'ho fatto, mi riesce solo a metà, cioè, si vede il form ma se ne vede solo una parte, poi si vedono gli affari per scendere, ho provato ad aumentare le dimensioni della finestra, quella aumenta ma il form no, sono stato chiaro? Ho paura di no :(
EliminaPier
@# Te lo avevo detto che non è detto che avrebbe funzionato :(
EliminaPeccato, ci mancava poco.
EliminaGrazie lo stesso
Questo commento è stato eliminato dall'autore.
RispondiEliminaCiao, io vorrei creare un pop-up con una immagine linkabile che ogni 2-3 giorni cambio.
RispondiEliminaDi conseguenza sarebbe per me meglio avere un controllo su widget html, piuttosto che andare a modificare ogni 2-3 gg il codice.
Dove posso trovare qualche tua "dritta"?
In questo caso non c'è :)
Eliminaacc... e non ci sono soluzioni alternative? per esempio nel mio blog il popup social è un widget. Non è shadowbox, ma non mi interessa.
Elimina