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. 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
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
content: '<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_n1dx0HnQMUdyY2Deyteb4JlJOYGYhUPU7AOJHNUqAsuCtnt8V84kSX7E7mPbxSDTtc9aVjsvt6V3khNjVpfcxV3sxRShiPuzQ80n2o2q_craEZkGM30MzGX1USUBimkZq1juapjk8Nc/"/></a>',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
<body>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 -
Nessun commento:
Posta un commento