Piyasalarda gün: altın ve dolarda son durum
Ekonomi Servisi · Bugün
Bu örnek bir haber sitesi sayfasıdır. Sağdaki kur kutusu dovizdolar.com WASM widget'ıyla
oluşturulmuştur ve fiyatlar canlıdır. Kutunun görünümü tamamen bu sayfanın kendi CSS'i ile
belirlenmiştir — widget hiçbir hazır stil dayatmaz.
Yazınızın akışı burada devam eder. Widget sayfanızın kendi DOM'una yazdığı için yazı tipiniz,
renkleriniz ve boşluk düzeniniz olduğu gibi geçerlidir; iframe kutusu içinde sıkışmaz.
Aynı widget'ın bambaşka bir görünümü için trading panosu demosuna
veya kuyumcu vitrin demosuna göz atın.
1. HTML (gövdeye yapıştırın)
<div class="dd-widget"
data-semboller="dolar,euro,sterlin,gram-altin,ceyrek-altin"
data-para="try"
data-tema="unstyled"></div>
<script src="https://dovizdolar.com/w.js" async></script>
2. CSS (bu görünümü veren kod — tamamı sizde)
<style>
body{background:#f6f7f9;font-family:Georgia,"Times New Roman",serif;color:#1a1a1a}
.sayfa{max-width:900px;margin:0 auto;padding:26px 18px;display:grid;grid-template-columns:1fr 320px;gap:32px}
@media(max-width:760px){.sayfa{grid-template-columns:1fr}}
.mak h1{font-size:30px;line-height:1.25;margin:0 0 10px}
.mak .tarih{color:#777;font-size:13px;font-family:system-ui,sans-serif}
.mak p{line-height:1.75;font-size:17px;color:#2b2b2b}
.kutu-baslik{font-family:system-ui,sans-serif;font-size:12px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:#8a6d00;border-bottom:2px solid #e8c766;padding-bottom:7px;margin-bottom:2px}
/* ---- widget: editoryal kur kutusu ---- */
.dd-w{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fff;
border:1px solid #e3e6ea;border-radius:6px;padding:4px 14px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dd-w-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#666;
padding:9px 0 7px;text-transform:uppercase;letter-spacing:.06em}
.dd-w-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;animation:nb 2s infinite}
@keyframes nb{50%{opacity:.25}}
.dd-w-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
padding:9px 0;border-top:1px dotted #d8dde3;font-variant-numeric:tabular-nums}
.dd-w-name{font-weight:600;font-size:14px;color:#111}
.dd-w-bid,.dd-w-ask{font-size:14.5px;min-width:82px;text-align:right;color:#333}
.dd-w-ask{font-weight:700}
.dd-w-row[data-dir="up"] .dd-w-ask{color:#15803d}
.dd-w-row[data-dir="down"] .dd-w-ask{color:#b91c1c}
.dd-w-stale .dd-w-name::after{content:" (gecikmiş)";font-size:11px;color:#999;font-weight:400}
.dd-w-credit{display:block;font-size:11px;color:#8a6d00;text-decoration:none;padding-top:9px;
border-top:1px solid #eee;margin-top:4px}
.dd-w-time{font-size:11px;color:#999;padding-top:3px}
</style>
Sembolleri, para birimini ve temayı data-* öznitelikleriyle değiştirirsiniz.
Tüm sınıfların anlamı için CSS dokümantasyonuna bakın.