Custom cross rate table widget
This widget will support at most 2 base currencies, and 10 target currencies. It's flexible to set up currencies and theme.
View the code:
<style type="text/css">
#cross-rate-container{
width: 250px;
}
#cross-rate-container table.cross-rate-table{
width: 100%;
border-bottom: 2px solid #eee;
}
#cross-rate-container table.cross-rate-table td{
text-align: right;
font-family: 12px;
font-family:Georgia, "Times New Roman", Times, serif;
padding: 3px 5px 3px 5px;
color: #333;
}
#cross-rate-container table.cross-rate-table tr.row-0 td{
border-bottom: 2px solid #eee;
}
#cross-rate-container table.cross-rate-table tr.row-0 span{
float: right;
}
#cross-rate-container table.cross-rate-table tr td.col-0{
border-right: 1px solid #eee;
text-align: center;
padding-left: 20px;
}
#cross-rate-container table.cross-rate-table td span{
display: block;
padding-left: 20px;
height: 16px;
width: 30px;
}
#cross-rate-container .updated-div{
font-size: 10px;
color: #777;
text-align: right;
margin-top:4px;
}
#cross-rate-container .credit-div{
text-align: right;
}
#cross-rate-container .credit-div a,
#cross-rate-container .credit-div a:hover,
#cross-rate-container .credit-div a:visited{
color: #777;
font-size: 10px;
}
.cny-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 0px no-repeat; }
.usd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -16px no-repeat; }
.gbp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -32px no-repeat; }
.eur-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -48px no-repeat; }
.jpy-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -64px no-repeat; }
.frf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -80px no-repeat; }
.dem-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -96px no-repeat; }
.rub-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -112px no-repeat; }
.inr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -128px no-repeat; }
.aud-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -144px no-repeat; }
.nzd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -160px no-repeat; }
.brl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -176px no-repeat; }
.cad-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -192px no-repeat; }
.chf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -208px no-repeat; }
.nok-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -224px no-repeat; }
.sek-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -240px no-repeat; }
.huf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -256px no-repeat; }
.hkd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -272px no-repeat; }
.twd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -288px no-repeat; }
.ars-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -304px no-repeat; }
.bsd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -320px no-repeat; }
.xaf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -336px no-repeat; }
.xpf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -352px no-repeat; }
.clp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -368px no-repeat; }
.cop-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -384px no-repeat; }
.hrk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -400px no-repeat; }
.czk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -416px no-repeat; }
.dkk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -432px no-repeat; }
.xcd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -448px no-repeat; }
.fjd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -464px no-repeat; }
.ghs-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -480px no-repeat; }
.gtq-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -496px no-repeat; }
.hnl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -512px no-repeat; }
.isk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -528px no-repeat; }
.idr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -544px no-repeat; }
.ils-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -560px no-repeat; }
.jmd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -576px no-repeat; }
.myr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -592px no-repeat; }
.mxn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -608px no-repeat; }
.mad-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -624px no-repeat; }
.mmk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -640px no-repeat; }
.ang-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -656px no-repeat; }
.pkr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -672px no-repeat; }
.pab-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -688px no-repeat; }
.pen-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -704px no-repeat; }
.php-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -720px no-repeat; }
.pln-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -736px no-repeat; }
.ron-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -752px no-repeat; }
.rsd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -768px no-repeat; }
.sgd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -784px no-repeat; }
.zar-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -800px no-repeat; }
.krw-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -816px no-repeat; }
.lkr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -832px no-repeat; }
.thb-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -848px no-repeat; }
.ttd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -864px no-repeat; }
.tnd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -880px no-repeat; }
.try-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -896px no-repeat; }
.aed-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -912px no-repeat; }
.vef-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -928px no-repeat; }
.vnd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -944px no-repeat; }
.amd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -960px no-repeat; }
.egp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -976px no-repeat; }
.crc-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -992px no-repeat; }
.lat-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1008px no-repeat; }
.lvl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1008px no-repeat; }
.all-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1024px no-repeat; }
.azn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1040px no-repeat; }
.byr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1056px no-repeat; }
.bam-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1072px no-repeat; }
.bgn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1088px no-repeat; }
.gel-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1104px no-repeat; }
.kzt-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1120px no-repeat; }
.ltl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1136px no-repeat; }
.mkd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1152px no-repeat; }
.mdl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1168px no-repeat; }
.uah-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1184px no-repeat; }
.shp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1200px no-repeat; }
.gip-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1216px no-repeat; }
.bbd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1232px no-repeat; }
.bzd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1248px no-repeat; }
.cup-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1264px no-repeat; }
.cuc-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1264px no-repeat; }
.dop-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1280px no-repeat; }
.htg-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1296px no-repeat; }
.nio-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1312px no-repeat; }
.bmd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1328px no-repeat; }
.kyd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1344px no-repeat; }
.awg-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1360px no-repeat; }
.bob-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1376px no-repeat; }
.gyd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1392px no-repeat; }
.pyg-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1408px no-repeat; }
.srd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1424px no-repeat; }
.uyu-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1440px no-repeat; }
.fkp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1456px no-repeat; }
.pgk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1472px no-repeat; }
.wst-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1488px no-repeat; }
.sbd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1504px no-repeat; }
.top-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1520px no-repeat; }
.vuv-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1536px no-repeat; }
.afn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1552px no-repeat; }
.bhd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1568px no-repeat; }
.bdt-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1584px no-repeat; }
.btn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1600px no-repeat; }
.bnd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1616px no-repeat; }
.khr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1632px no-repeat; }
.irr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1648px no-repeat; }
.iqd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1664px no-repeat; }
.jod-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1680px no-repeat; }
.kwd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1696px no-repeat; }
.kgs-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1712px no-repeat; }
.lak-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1728px no-repeat; }
.lbp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1744px no-repeat; }
.mvr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1760px no-repeat; }
.mnt-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1776px no-repeat; }
.npr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1792px no-repeat; }
.kpw-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1808px no-repeat; }
.omr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1824px no-repeat; }
.qar-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1840px no-repeat; }
.sar-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1856px no-repeat; }
.syp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1872px no-repeat; }
.tjs-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1888px no-repeat; }
.tmt-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1904px no-repeat; }
.uzs-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1920px no-repeat; }
.yer-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1936px no-repeat; }
.mop-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1952px no-repeat; }
.dzd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1968px no-repeat; }
.aoa-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -1984px no-repeat; }
.xof-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2000px no-repeat; }
.bwp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2016px no-repeat; }
.bif-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2032px no-repeat; }
.cve-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2048px no-repeat; }
.kmf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2064px no-repeat; }
.cdf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2080px no-repeat; }
.djf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2096px no-repeat; }
.ern-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2112px no-repeat; }
.etb-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2128px no-repeat; }
.gmd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2144px no-repeat; }
.gnf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2160px no-repeat; }
.kes-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2176px no-repeat; }
.lsl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2192px no-repeat; }
.lrd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2208px no-repeat; }
.lyd-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2224px no-repeat; }
.mga-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2240px no-repeat; }
.mro-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2256px no-repeat; }
.mwk-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2272px no-repeat; }
.mur-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2288px no-repeat; }
.mzn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2304px no-repeat; }
.nad-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2320px no-repeat; }
.ngn-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2336px no-repeat; }
.rwf-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2352px no-repeat; }
.std-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2368px no-repeat; }
.scr-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2384px no-repeat; }
.sll-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2400px no-repeat; }
.sos-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2416px no-repeat; }
.ssp-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2432px no-repeat; }
.sdg-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2448px no-repeat; }
.szl-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2464px no-repeat; }
.tzs-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2480px no-repeat; }
.ugx-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2496px no-repeat; }
.zmw-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2512px no-repeat; }
.btc-s {background:url(../themes/custom/seahawk/images/converter/cis16.png) 0 -2528px no-repeat; }
</style>
<div id="cross-rate-container">
<script type="text/javascript" src="http://currency7.com/widgets/b.php?from=inr-aed&to=eur-gbp-jpy-usd-chf-hkd-rub-zar"></script>
</div>
How to customize the widget
The core of above code is in this line:
<script type="text/javascript" src="http://currency7.com/widgets/b.php?from=inr-aed&to=eur-gbp-jpy-usd-chf-hkd-rub-zar"></script>
Changing the parameters in the URL will update the widget accordingly. Each currency code should be separated with a dash("-").