Widget Cambio Valute
Tramite questo web tools è possibile inserire sul proprio sito, blog o forum una tabella aggiornata sull’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. Per i più esigenti sono state previste delle variabili di personalizzazione che permettono una maggiore integrazione con il layout del proprio sito, come ad esempio i colori.
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 282 (px) 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 300 (px) il widget avrà una dimensione di 300 x 282. Ecco il codice da copiare nella vostra pagina HTML:
<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 qui accanto. 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 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.
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>
A questo punto dovremmo aver ottenuto questo risultato, non solo vediamo la tabella con colori diversi ma vediamo i titoli e le descrizioni in inglese. Per sapere tutti i parametri di configurazione disponibili basta vedere la tabella riepilogativa qui di seguito.
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.
GUARDA ALCUNI ESEMPI DI COLORI PER IL TUO SITO WEB
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 |
Elenco dei widget disponibili che puoi utilizzare per il tuo sito
- Autore:
- Massimo
- Articoli:
- 6
- Website:
- http://startbyzero.com/
