Come mostrare un video in autoplay di benvenuto con pulsante di accesso a Blogger.

Molti miei articoli vengono ispirati da domande rivoltemi dai lettori nei commenti sul sito o in post nella pagina Facebook. Proprio ieri ne ho ricevuta una su una possibile personalizzazione che potrebbe interessare altre persone per cui ho deciso di dedicarle un post. Mi si chiedeva se fosse possibile realizzare una pagina di benvenuto da mostrare nella homepage del sito o in una qualsiasi altra pagina che mostrasse un video che si riproduce in autoplay. Il lettore dovrebbe aver comunque la possibilità di bypassare tale video e di accedere subito alla pagina del blog su Blogger.

Non so se ho descritto bene la funzionalità ma proporrò comunque una Demo che dovrebbe evitare problemi di interpretazioni. Prima di procedere occorre avere un blog su Blogger e l'indirizzo della pagina in cui mostrare questo video di benvenuto. Ricordo che i blog gratuiti del tipo nomegblog.blogspot.it devono aver gli indirizzi con il .com al posto del .it altrimenti i tag condizionali non funzioneranno.

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.

Come mostrare una pagina o un messaggio di benvenuto che scompaia automaticamente dopo pochi secondi.

Ho già avuto modo di illustrare un metodo per inserire nel blog una pagina di benvenuto che può essere utile per presentare il contenuto del sito agli utenti. Si trattava di un ulteriore passo in avanti rispetto a una schermata di benvenuto che avevo avuto modo di proporre in un articolo precedente.

Sempre seguendo questa falsariga vi voglio illustrare come fare in modo che questa pagina o questo messaggio si chiuda dopo un certo numero di secondi. Si può anche fare in modo che risulti visibile solo in determinate situazioni attraverso i tag condizionali. Per esempio mostrarlo solo nella homepage o solo in una pagina statica in cui ci siano dei contenuti particolari che ci consiglino di avvertire gli utenti in tal senso.

Come inserire un messaggio di benvenuto nella homepage del blog.

Su alcuni blog su Blogger è talvolta necessario mostrare un messaggio di presentazione del sito corredato delle informazioni che possono essere utili all'utente. Questo messaggio è in genere opportuno che venga visualizzato solo in homepage per fare in modo che, quando si apre un post, il navigatore possa iniziare a leggerlo senza dover prima dover scorrere il messaggio di presentazione.

Mi sono già occupato altre volte di come introdurre widget o messaggi di invito. Ricordo i seguenti articoli:

1. Come inserire un messaggio di benvenuto delle pagine delle etichette -
2. Come inserire un widget di benvenuto in Blogger -
3. Come creare una pagina di benvenuto (prima versione) -
4. Come inserire una pagina di benvenuto (seconda versione) -
5. Come inserire un articolo di presentazione su Blogger -

Come inserire un messaggio di benvenuto nelle pagine delle etichette.

In un precedente articolo ho illustrato come aggiungere una introduzione con immagine a pagine relative a delle determinate etichette. In un commento mi è stato fatto notare come, nella grande maggioranza di blog, il numero di etichette sia molto elevato e che quindi sia preferibile inserire una sola descrizione comune a tutte le etichette. La cosa è fattibile usando la condizione per mostrare un elemento solo nelle pagine delle etichette. Basta andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Si espandono i modelli widget e si cerca la riga

<b:include data='top' name='status-message'/>

subito sotto si incolla questo codice

Come inserire il widget di benvenuto direttamente nel modello e personalizzarlo completamente.

Qualche tempo fa ho presentato il cosiddetto widget di benvenuto che mostra un messaggio di saluto al visitatore che si trova a passare nel nostro sito con un invito a sottoscrivere i feed e la pagina fan di Facebook. La sua particolarità sta nel fatto che riesce a rilevare da quale sito proviene e mostra un'icona e un messaggio personalizzato a seconda che si venga da Google, Yahoo. Blogger, Digg, StumbleUpon, Youtube,  ecc. Ho aggiunto anche servizi italiani come OKNotizie e Diggita. In totale sono al momento 33; per l'elenco completo potate andare in questo post.
Ci sono alcune considerazioni da fare

1. Nei commenti mi è stato fatto presente la difficoltà di personalizzare completamente il widget per adattarlo a tutti i modelli
2. Lo script del widget l'ho caricato su Google Sites che, pur essendo la scelta migliore come hosting, qualche volta rallenta l'apertura della pagina
3. Dall'inizio di quest'anno la velocità di caricamento diventa un importante parametro per il posizionamento dei post su Google

Ho quindi deciso di postare lo script direttamente nel modello con i seguenti benefici

1. Non ci saranno limiti di banda (bandwidht)
2. Il browser farà meno richieste di indirizzi e quindi sarà più veloce aprire la pagina
3. Ci potrà essere una personalizzazione totale del widget anche se consigliabile solo ai più esperti

Per inserire il Widget di Benvenuto mediante questo sistema occorre

1. Scaricare un modello completo del blog per un eventuale backup
2. Eliminare il widget se lo avevamo già inserito mediante l'altra modalità
3. Andare su Layout > Modifica HTML e cercare la seguente riga

</head>

Immediatamente sopra a questa riga occorre incollare il seguente codice

<!--INIZIO WIDGET DI BENVENUTO-->
<script type='text/javascript'>
//<![CDATA[
/**
* @author Kaushik (http://classictutorials.com)
* Widget tradotto in italiano e rielaborato da Parsifa32 (http://parsifal32.blogspot.com/)
*/
function showHideDiv(myRestrictedDomainList){
    var arrayOfRestrictedDomains = new Array();
    document.getElementById("mainDisplayDiv").style.display = 'block';
}
var myRestrictedDomainList = "http://parsifal32.blogspot.com/";
showHideDiv(myRestrictedDomainList);
function displayRequiredText(feedURL){
    var url = document.referrer;
    var dynamicHTMLText;
    /* Social book mark and search icons */
    var generalIcon = "http://public.blu.livefilestore.com/y1p55mdRjiY3TZxHb1cRV4E3HJdKtRP0CEWatRyYaGKX-_MeJ8uO6MtFIskkQ2jwfibvzK8akQuUeiHJ_NGwIt5ew/rss-icona.png";
    var googleIcon = "http://public.blu.livefilestore.com/y1pRfbyxuZOmgV4HY6IMUbJvGwbht0BEBJnaaBo-He5k9bJq-z8LPoVCEjaqVInNzsQUBIbz0IeCQ6rb7szvXtywA/google_icona.png";
    var yahooIcon = "http://public.blu.livefilestore.com/y1pDFUO-YBmT0CWpaj7JOtckC9ODk2oJqeTpwMMtMKVel5ccJy6Ud8ppYfoaGsMUCzoMBsu4O8mLiXZs8f0bs4qjA/yahoo-icona.jpg";
    var bingIcon = "http://public.blu.livefilestore.com/y1pcLL8xdHX5p_P_Ctcq0RS9zz4cTUHxSzSGsoB7-5qZIqNwdIQGLgLLscDJIZ1ZEN_Pb1IYc6ZRCFtGt1wq-yi0g/bing-icona.png";
    var diggitaIcon = "http://public.blu.livefilestore.com/y1pTLuDAVm8ZFmkNqJnno0dowQZdOxo9Lg58uPDZ_EYSFWJaskT2omNE-r1f_ZyqJpH3XP45pvboKDfkLOhXErJGA/diggita-icona.jpeg";
    var bloggerIcon = "http://public.blu.livefilestore.com/y1pONAqe9NgthqkbJMFCV5X2MUtWiOR5zjvVEIgq0O08DSTjotSWMgRoOWekvddzoNSdlJJuCLxyacIzfiISACcAg/blogger-icon.jpg";
    var diggIcon = "http://img25.imageshack.us/img25/8466/diggw.png";
    var stumbIcon = "http://img18.imageshack.us/img18/2233/stumbleupono.png";
    var deliciousIcon = "http://img8.imageshack.us/img8/840/deliciousv.png";
    var facebookIcon = "http://img195.imageshack.us/img195/3755/facebookx.png";
    var flickrIcon = "http://img200.imageshack.us/img200/541/flickrp.png";
    var friendfeedIcon = "http://img195.imageshack.us/img195/1743/friendfeed.png";
    var friendsterIcon = "http://img195.imageshack.us/img195/5779/friendsterb.png";
    var furlIcon = "http://img25.imageshack.us/img25/8360/furlv.png";
    var lastfmIcon = "http://img25.imageshack.us/img25/3770/lastfmjzy.png";
    var linkedinIcon = "http://img195.imageshack.us/img195/3427/linkedin.png";
    var livejournalIcon = "http://img200.imageshack.us/img200/756/livejournal.png";
    var magnoliaIcon = "http://img39.imageshack.us/img39/6933/magnolia.png";
    var mixxIcon = "http://img39.imageshack.us/img39/7815/mixx.png";
    var myspaceIcon = "http://img39.imageshack.us/img39/5831/myspaceq.png";
    var netvibesIcon = "http://img200.imageshack.us/img200/1662/netvibes.png";
    var newsvineIcon = "http://img195.imageshack.us/img195/1458/newsvinex.png";
    var oknotizieIcon = "http://public.blu.livefilestore.com/y1phsjzR76U7BR1RoDvw8-kKJbQkV90bQZCjA9ZbYWPz6wNzk7KRkmSD4qWJ8kAspv7bo5gWqr_4Ca4-xHUwij69g/oknotizie-icona.png";
    var picasaIcon = "http://img25.imageshack.us/img25/8716/picasaz.png";
    var pownceIcon = "http://img25.imageshack.us/img25/706/powncer.png";
    var redditIcon = "http://img25.imageshack.us/img25/6296/redditl.png";
    var technoratiIcon = "http://img25.imageshack.us/img25/7565/technoratib.png";
    var twitterIcon = "http://img25.imageshack.us/img25/929/twitterruz.png";
    var vimeoIcon = "http://img25.imageshack.us/img25/3870/vimeo.png";
    var webshotsIcon = "http://img39.imageshack.us/img39/9844/webshots.png";
    var wordpressIcon = "http://img200.imageshack.us/img200/4008/wordpress.png";
    var yelpIcon = "http://img195.imageshack.us/img195/5002/yelp.png";
    var youtubeIcon = "http://img18.imageshack.us/img18/882/youtubed.png";
    /* Define Search criteria*/
    var cameFromGoogle = new RegExp("google");
    var cameFromBing = new RegExp("bing");
    var cameFromBlogger = new RegExp("blogger");
    var cameFromDiggita = new RegExp("diggita");
    var cameFromYahoo = new RegExp("yahoo");
    var cameFromDigg = new RegExp("digg");   
    var cameFromStumbleupon = new RegExp("stumbleupon");
    var cameFromDelicious = new RegExp("delicious");
    var cameFromFacebook = new RegExp("facebook");
    var cameFromFlickr = new RegExp("flickr");
    var cameFromFriendfeed = new RegExp("friendfeed");
    var cameFromFriendster = new RegExp("friendster");
    var cameFromFurl = new RegExp("furl");
    var cameFromLastfm = new RegExp("lastfm");
    var cameFromLinkedin = new RegExp("linkedin");
    var cameFromLivejournal = new RegExp("livejournal");
    var cameFromMagnolia = new RegExp("magnolia");
    var cameFromMixx = new RegExp("mixx");
    var cameFromMyspace = new RegExp("myspace");
    var cameFromNetvibes = new RegExp("netvibes");
    var cameFromNewsvine = new RegExp("newsvine");
    var cameFromOknotizie = new RegExp("oknotizie");
    var cameFromPicasa = new RegExp("picasa");
    var cameFromPownce = new RegExp("pownce");
    var cameFromReddit = new RegExp("reddit");
    var cameFromTechnorati = new RegExp("technorati");
    var cameFromTwitter = new RegExp("twitter");
    var cameFromVimeo = new RegExp("vimeo");
    var cameFromWebshots = new RegExp("webshots");
    var cameFromWordpress = new RegExp("wordpress");
    var cameFromYelp = new RegExp("yelp");
    var cameFromYoutube = new RegExp("youtube");
    /* Content to be populated*/
    var googleContent = "<table><tr><td><img src='"+googleIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Google!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var bingContent = "<table><tr><td><img src='"+bingIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Bing!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var bloggerContent = "<table><tr><td><img src='"+bloggerIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao! <b>Amico di Blogger</b> Se trovi questo sito interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var diggitaContent = "<table><tr><td><img src='"+diggitaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Diggita!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"   
    var yahooContent = "<table><tr><td><img src='"+yahooIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Yahoo!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b> Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
    var diggContent = "<table><tr><td><img src='"+diggIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Digg!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"   
    var stmbleuponURL = "http://www.stumbleupon.com/submit?url=" + document.location.href;
    var stumbleuponContent = "<table><tr><td><img src='"+stumbIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>StumblerUpon!</b> Non dimenticarti di <a href='" + stmbleuponURL + "' style='color:#940F04'><b>darmi un thumb</b></a> se ti piace questa pagina. </font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/aggiornato-il-widget-del-messaggio-di.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
        var deliciousContent = "<table><tr><td><img src='"+deliciousIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao Amico di <b>Delicious!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var facebookContent = "<table><tr><td><img src='"+facebookIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Facebook!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
        var flickrContent = "<table><tr><td><img src='"+flickrIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Flickr!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var friendfeedContent = "<table><tr><td><img src='"+friendfeedIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Amico di Friendfeed! </b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var friendsterContent = "<table><tr><td><img src='"+friendsterIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>FriendSter user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var furlContent = "<table><tr><td><img src='"+furlIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Furl user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var lastfmContent = "<table><tr><td><img src='"+lastfmIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Lastf user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var linkedinContent = "<table><tr><td><img src='"+linkedinIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao <b>Linkedin user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var livejournalContent = "<table><tr><td><img src='"+livejournalIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Livejournal user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var magnoliaContent = "<table><tr><td><img src='"+magnoliaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Magnolia user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var mixxContent = "<table><tr><td><img src='"+mixxIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Mixx user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var myspaceContent = "<table><tr><td><img src='"+myspaceIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>amico di MySpace!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed </b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var netvibesContent = "<table><tr><td><img src='"+netvibesIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Netvibes user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var newsvineContent = "<table><tr><td><img src='"+newsvineIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Newsvine user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per essere sempre aggiornato sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var oknotizieContent = "<table><tr><td><img src='"+oknotizieIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>OKNotizie!</b> Se trovi questo blog interessante puoi <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a>  per essere sempre aggiornato sugli ultimi post. Se non sai che cosa sono i feed, <a href='http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>"
    var picasaContent = "<table><tr><td><img src='"+picasaIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Picasa!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var pownceContent = "<table><tr><td><img src='"+pownceIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Pownce user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var redditContent = "<table><tr><td><img src='"+redditIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Reddit!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a>  per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var technoratiContent = "<table><tr><td><img src='"+technoratiIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Technorati!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var twitterContent = "<table><tr><td><img src='"+twitterIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da<b>Twitter!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var vimeoContent = "<table><tr><td><img src='"+vimeoIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Vimeo</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var webshotsContent = "<table><tr><td><img src='"+webshotsIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Webshots user!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var wordpressContent = "<table><tr><td><img src='"+wordpressIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Wordpress!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var yelpContent = "<table><tr><td><img src='"+yelpIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto <b>Utente di Yelp!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var youtubeContent = "<table><tr><td><img src='"+youtubeIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Benvenuto da <b>Youtube!</b> Se ritieni utile questa pagina <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivi i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventa Fan su Facebook</b></a> per avere gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    var general = "<table><tr><td><img src='"+generalIcon+"' width='50' height='50'></td><td><font size='3' face='Trebuchet MS' color='#191919'>Ciao!</b> Se sei nuovo di qui ti potrebbe interessare <a href='" + feedURL + "' style='color:#940F04'><b>Sottoscrivere i feed</b></a> o <a href='" + PageFanURL + "' style='color:#940F04'><b>Diventare Fan su Facebook</b></a> per avere tutti gli aggiornamenti sugli ultimi articoli. Se non sai che cosa sono i feed, <a href='" + feedFeed + "' style='color:#940F04'><b>Leggi qui!</b></a></font></td></tr><tr><td></td><td align='right'><hr/><font face='Verdana' size='1' color=#CDC0B0 ><a href='http://parsifal32.blogspot.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html' style='color:#CDC0B0'>Installa il widget</a></font></td></tr></table>";
    /* Function to call the dynamic contents*/
    if (cameFromGoogle.test(url)) {
            dynamicHTMLText = googleContent;
        }
    else if (cameFromBing.test(url)) {
            dynamicHTMLText = bingContent;
        }
    else if (cameFromDiggita.test(url)) {
            dynamicHTMLText = diggitaContent;
        }
    else if (cameFromBlogger.test(url)) {
            dynamicHTMLText = bloggerContent;
        }   
    else if (cameFromDigg.test(url)) {
            dynamicHTMLText = diggContent;
        }   
    else if (cameFromYahoo.test(url)) {
            dynamicHTMLText = yahooContent;
        }
    else if (cameFromStumbleupon.test(url)) {
            dynamicHTMLText = stumbleuponContent;
        }
    else if (cameFromDelicious.test(url)) {
            dynamicHTMLText = deliciousContent;
        }
    else if (cameFromFacebook.test(url)) {
            dynamicHTMLText = facebookContent;
        }
    else if (cameFromFlickr.test(url)) {
            dynamicHTMLText = flickrContent;
        }
    else if (cameFromFriendfeed.test(url)) {
            dynamicHTMLText = friendfeedContent;
        }
    else if (cameFromFriendster.test(url)) {
            dynamicHTMLText = friendsterContent;
        }
    else if (cameFromFurl.test(url)) {
            dynamicHTMLText = furlContent;
        }
    else if (cameFromLastfm.test(url)) {
            dynamicHTMLText = lastfmContent;
        }
    else if (cameFromLinkedin.test(url)) {
            dynamicHTMLText = linkedinContent;
        }
    else if (cameFromLivejournal.test(url)) {
            dynamicHTMLText = livejournalContent;
        }
    else if (cameFromMagnolia.test(url)) {
            dynamicHTMLText = magnoliaContent;
        }
    else if (cameFromMixx.test(url)) {
            dynamicHTMLText = mixxContent;
        }
    else if (cameFromMyspace.test(url)) {
            dynamicHTMLText = myspaceContent;
        }
    else if (cameFromNetvibes.test(url)) {
            dynamicHTMLText = netvibesContent;
        }
    else if (cameFromNewsvine.test(url)) {
            dynamicHTMLText = newsvineContent;
        }
    else if (cameFromPicasa.test(url)) {
            dynamicHTMLText = picasaContent;
        }
    else if (cameFromOknotizie.test(url)) {
            dynamicHTMLText = oknotizieContent;
        }   
    else if (cameFromPownce.test(url)) {
            dynamicHTMLText = pownceContent;
        }
    else if (cameFromReddit.test(url)) {
            dynamicHTMLText = redditContent;
        }
    else if (cameFromTechnorati.test(url)) {
            dynamicHTMLText = technoratiContent;
        }
    else if (cameFromTwitter.test(url)) {
            dynamicHTMLText = twitterContent;
        }
    else if (cameFromVimeo.test(url)) {
            dynamicHTMLText = vimeoContent;
        }
    else if (cameFromWebshots.test(url)) {
            dynamicHTMLText = webshotsContent;
        }
    else if (cameFromWordpress.test(url)) {
            dynamicHTMLText = wordpressContent;
        }
    else if (cameFromYelp.test(url)) {
            dynamicHTMLText = yelpContent;
        }
    else if (cameFromYoutube.test(url)) {
            dynamicHTMLText = youtubeContent;
        }
    else {
            dynamicHTMLText = general;
        }
    return dynamicHTMLText;
}
function showHideDiv(myRestrictedDomainList){
    var arrayOfRestrictedDomains = new Array();
    document.getElementById("mainDisplayDiv").style.display = 'block';
}
//]]>
</script>
<!--FINE WIDGET DI BENVENUTO-->

L'unica personalizzazione fondamentale è quella dell'inserimento dell'URL del blog evidenziato di rosso. Essendo un widget che comprende più di trenta servizi ci sono molte stringhe ripetute quindi, nel caso si volesse cambiarne qualcuna, è opportuno usare Notepad++ che ha anche la funzione di sostituire un pezzo di codice contemporaneamente in più posizioni. Vi do alcuni accenni di possibili modifiche

1. La famiglia di caratteri è la Trebuchet MS, se si ha un blog con un altra famiglia è sufficiente sostituire tutte le occorrenze di Trebuchet MS con p.e.con  Arial o San Serif o Verdana, ecc.
2. La dimensione del carattere del messaggio è font size='3'. Se si vogliono caratteri più piccoli si metta font size='2'.
3. Il colore del testo del messaggio è #191919, si può sostituire con il colore del testo del nostro blog
4. Il colore dei link è #940F04 e anche in questo caso si può fare la stessa operazione

Dopo aver fatto le personalizzazioni e aver incollato il codice si Salva il modello. Non si vedrà ancora nulla perché dobbiamo andare in Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del Sito, incollare il seguente codice senza inserire il Titolo

<div id="mainDisplayDiv" style="background:#FFFFFF;border:2px dashed #003366;display:none">
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
var feedURL = "http://feeds.feedburner.com/ComputerChePassione";
var feedFeed = "http://parsifal32.blogspot.com/2009/11/cosa-sono-i-feed-e-come-si-usano-solo.html";
var PageFanURL = "http://www.facebook.com/pages/IDEE-PER-COMPUTER-ED-INTERNET/207337935513";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script type="text/javascript">
var myRestrictedDomainList = "URL_del_blog";
showHideDiv(myRestrictedDomainList);
</script>

Le parti evidenziate di rosse vanno personalizzare in questo modo

1. In var feedURL  va messo l'indirizzo dei feed del vostro blog
2. In var feedFeed si può inserire un indirizzo di una pagina che spiega cosa sono i feed oppure si può lasciare anche la pagina di questo blog
3. In var PageFanURL bisogna incollare l'indirizzo della nostra pagina fan
4. #FFFFFF è il colore di sfondo del widget e può essere cambiato
5. 2px sono la larghezza del bordo. Se non volete bordo mettete 0px 
6. dashed è lo stile del bordo che, in questo caso, è tratteggiato, se lo volete continuo al suo posto inserite solid, se mettete dotted sarà punteggiato
7. #003366 è il colore del bordo e può essere personalizzato a piacere
8. In URL_del_Blog va  inserito l'indirizzo del sito

Finalmente si clicca su Salva e si posiziona l'elemento nella parte alta del modello dove vanno a finire gli occhi del visitatore appena entrato nel blog

Da quando ho questo widget nel blog ho notato un aumento superiore alla media di sottoscrizioni ai feed e alla pagina fan. 

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.

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.

 

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.

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

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

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.