Blogunuza veya web sitenize ekleyebileceğiniz, ziyaretçilerinize anlık altın fiyatlarını gösterebileceğiniz şık ve modern bir HTML/CSS ve JavaScript kod bloğunu aşağıda bulabilirsiniz.
Bu kod bloğu, verileri güncel tutabilmek için güvenilir finans API'leri ile çalışmaya uygun olarak tasarlanmıştır ve sitenize herhangi bir ek kütüphane yüklemeden çalışır. canli,altin,kuru
Canlı Altın Kuru HTML/CSS Kodu
Aşağıdaki kodu web sitenizde istediğiniz yere (veya Blogger/WordPress gibi platformlardaki HTML bileşenlerine) ekleyebilirsiniz:
<div class="altin-widget">
<div class="widget-baslik">
<h3>Canlı Altın Kuru <span>(Güncel)</span></h3>
</div>
<div class="altin-kapsayici">
<div class="altin-kart">
<div class="altin-ad">Gram Altın</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Alış:</span> <span id="gram-alis">6.724,37</span> TL
</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Satış:</span> <span id="gram-satis">6.729,25</span> TL
</div>
</div>
<div class="altin-kart">
<div class="altin-ad">Çeyrek Altın</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Alış:</span> <span id="ceyrek-alis">10.610,44</span> TL
</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Satış:</span> <span id="ceyrek-satis">10.844,04</span> TL
</div>
</div>
<div class="altin-kart">
<div class="altin-ad">Ons Altın</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Alış:</span> <span id="ons-alis">4.565,16</span> USD
</div>
<div class="altin-fiyat">
<span class="fiyat-tur">Satış:</span> <span id="ons-satis">4.565,79</span> USD
</div>
</div>
</div>
<div class="widget-alt">
<p>Son Güncelleme: <span id="son-guncelleme">19:26</span></p>
</div>
</div>
<style>
.altin-widget {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
padding: 20px;
max-width: 600px;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
border-top: 4px solid #f39c12;
}
.widget-baslik h3 {
margin: 0 0 15px 0;
color: #2c3e50;
font-size: 1.2rem;
}
.widget-baslik span {
font-size: 0.85rem;
color: #7f8c8d;
font-weight: normal;
}
.altin-kapsayici {
display: flex;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
.altin-kart {
background: #fdfaf6;
border: 1px solid #e0d0b8;
border-radius: 8px;
padding: 12px;
flex: 1 1 150px;
min-width: 140px;
}
.altin-ad {
font-weight: 600;
color: #c67f00;
margin-bottom: 8px;
}
.altin-fiyat {
font-size: 0.95rem;
margin: 4px 0;
color: #333;
}
.fiyat-tur {
color: #666;
}
.widget-alt {
margin-top: 15px;
font-size: 0.75rem;
color: #95a5a6;
text-align: right;
}
</style>
JavaScript ile Anlık Güncelleme (Opsiyonel)
Eğer verileri dışarıdan bir finans API'sinden (örneğin döviz/altın API sağlayıcılarından) çekerek otomatik güncellemek isterseniz, aşağıdaki JavaScript kodunu HTML kodunuzun hemen altına ekleyebilirsiniz:
<script>
// Fonksiyon, API entegrasyonu için yapılandırılmıştır. Kendi API anahtarınızı ilgili servisten alıp buraya ekleyebilirsiniz.
function altinKurlariniGuncelle() {
// const apiUrl = "https://api.ornekfinans.com/altin";
// fetch(apiUrl)
// .then(response => response.json())
// .then(data => {
// document.getElementById('gram-alis').innerText = data.gram.alis;
// document.getElementById('gram-satis').innerText = data.gram.satis;
// ...
// document.getElementById('son-guncelleme').innerText = new Date().toLocaleTimeString();
// })
// .catch(error => console.error('Veri çekilemedi:', error));
}
// Sayfa yüklendiğinde ve her 5 dakikada bir güncellenmesi için:
// setInterval(altinKurlariniGuncelle, 300000);
// altinKurlariniGuncelle();
</script>
Blogunuza Nasıl Eklersiniz?
Blogger / Blogspot: Yerleşim (Layout) sekmesine gidin. Bir Gadget Ekle seçeneği ile HTML/JavaScript bileşenini seçip kodunuzu yapıştırarak kaydedin.
WordPress: Blok düzenleyicide Özel HTML bloğunu kullanarak kodu doğrudan yapıştırabilirsiniz.
Sıkça Sorulan Sorular
Bu kod mobil uyumlu mudur? Evet,
flexyapısı sayesinde tüm mobil cihazlarda ve tabletlerde düzgün bir şekilde hizalanır.Hangi değerleri gösterir? Kod üzerinde Gram, Çeyrek ve Ons altın fiyatlarını göstermek için üç ayrı kutu oluşturulmuştur.