Tramite questo web tools è possibile inserire sul proprio sito, blog o forum una tabella aggiornata sulle ultime quotazioni disponibili riguardante le valute del mondo come Euro, Dollaro Americano, Sterlina inglese, etc. Per eseguire questa operazione non ci vogliono conoscenze di programmazione specifiche ma basta fare un copia e incolla del codice che trovate in questa sezione e posizionarlo sulla vostra pagina web nella posizione che desiderate. Per i più esigenti sono state previste anche delle variabili di personalizzazione che permettono una maggiore integrazione.
Iniziamo con l’inserimento più semplice, avete uno spazio sul vostro sito dove volete pubblicare il widget cambio valute ? Prendete il codice sottostante e inseritelo nella pagina HTML nel punto in cui volete che questo sia posizionato, il widget per default avrà una altezza di 282px e la larghezza si adatterà automatica al contenitore che racchiude il codice che avete appena inserito, quindi se lo inserite ad esempio in una sidebar definita 300px il widget avrà una dimensione di 300×282. Ecco il codice da copiare nella vostra pagina HTML il quale caricherà da solo il codice della tabella:
<script type="text/javascript" src="http://startbyzero.com/static/finance/currencies/widget.js"></script>
Una volta inserito il codice vi dovrebbe apparire il widget nella forma che vedete nell’immagine a seguire. Infatti il widget per default visualizza nella prima colonna le valute rispetto all’EURO e nella seconda le valute rispetto al Dollaro americano. Come potete notare dalla prima immagine questa è la forma più semplice della visualizzazione del widget, se invece avete esigenze di colore e layout diverse vedete con attenzione la tabella delle opzioni che troverete alla fine di questa pagina e trovate una soluzione più adatta. In ogni caso vi riporto anche un’immagine di esempio:
Widget Cambio valute – esempi di personalizzazione
==> GUARDA ALCUNI ESEMPI DI COLORI PER IL TUO SITO WEB
Una piccola avvertenza: se usate una larghezza più piccola di 250px mi raccomando specificate anche l’opzione sz_small_font=”yes” altrimenti le informazioni non entrano nel widget.
Adesso vediamo come possiamo ad esempio personalizzare il nostro widget con dei colori e una lingua diversa da quella di default, rispetto al codice precedente basta inserire un nuovo blocco di codice prima di quello standard elencando le opzioni e i valori scelti.
<script type="text/javascript"><!-- sz_width = "300"; sz_lang = "en"; sz_color = "ffffff"; sz_color_label = "4b9af3"; sz_color_value = "4b9af3"; sz_color_border = "4b9af3"; sz_back = "ffffff"; sz_back_title = "4b9af3"; sz_back_label = "b1d3f9"; sz_back_foot = "4b9af3"; sz_back_hover = "e4edf8"; //--> </script> <script type="text/javascript" src="http://startbyzero.com/static/finance/currencies/widget.js"></script>
Notate che tutti i valori che dovranno essere specificati per le varie opzioni devo essere indicati come stringa quindi opzione=valore dove valore è sempre specificato tra doppi apici. Altrimenti l’opzione non viene considerata e viene usato il valore di default.
Parametri di personalizzazione widget
| Descrizione | Opzione | Default | Valori ammessi |
|---|---|---|---|
| (iframe) larghezza | sz_width | 100% | valore ampiezza iframe |
| (iframe) altezza | sz_height | 282 | altezza iframe in px |
| Lingua | sz_lang | it | it, en, es |
| Titolo widget | sz_title | yes | yes, no (usare per titolo) |
| Footer widget | sz_footer | no | yes, no (usare per footer) |
| Font piccolo | sz_small_font | yes | yes, no (usare yes per width<250) |
| Colore testo | sz_color | a1a6a6 | valore RGB in ESA |
| Colore titolo | sz_color_title | sz_color | valore RGB in ESA |
| Colore periodo | sz_color_label | sz_color | valore RGB in ESA |
| Colore valore | sz_color_value | sz_color | valore RGB in ESA |
| Colore data | sz_color_foot | sz_color | valore RGB in ESA |
| Colore bordo celle | sz_color_border | d6d9de | valore RGB in ESA |
| Background | sz_back | transparent | transparent o valore RGB |
| Background celle | sz_back_cell | transparent | transparent o valore RGB |
| Background titolo | sz_back_title | sz_back_cell | transparent o valore RGB |
| Background periodo | sz_back_label | sz_back_cell | transparent o valore RGB |
| Background valore | sz_back_value | sz_back_cell | transparent o valore RGB |
| Background data | sz_back_foot | sz_back_cell | transparent o valore RGB |
| Background hover | sz_back_hover | f1f1f1 | none o valore RGB |

