🌤️ Modern Hava Durumu Widget Blogger
Web sitelerinde kullanıcı deneyimini artıran en önemli araçlardan biri canlı hava durumu widget’larıdır. Bu sistem sayesinde ziyaretçiler şehirlerine ait anlık sıcaklık, rüzgar ve hava durumunu öğrenebilir.
🌤️ Hava Durumu Widget Nedir?
Bu widget, kullanıcıların şehir ismi girerek canlı hava durumu verilerini görmesini sağlar. OpenStreetMap ve Open-Meteo API kullanarak gerçek zamanlı veri çeker.
---⚡ Özellikler
- 🌍 Şehir bazlı arama sistemi
- 🌡️ Canlı sıcaklık gösterimi
- 💨 Rüzgar hızı bilgisi
- 📱 Mobil uyumlu modern tasarım
- ⚡ Hafif ve SEO dostu yapı
💻 Blogger Hava Durumu Widget Kodu
<div id="weather-widget">
<div class="ww-card">
<div class="ww-header">🌤️ Şehir Hava Durumu</div>
<div class="ww-search">
<input id="cityInput" placeholder="Şehir yaz (Tokat, Istanbul)" />
<button onclick="getWeather()">Ara</button>
</div>
<div id="weatherResult">Şehir girin</div>
</div>
</div>
<style>
.ww-card{
width:320px;
margin:auto;
padding:16px;
border-radius:16px;
background:linear-gradient(145deg,#0f172a,#111827);
color:#fff;
box-shadow:0 0 20px rgba(0,255,255,0.2);
}
.ww-header{
text-align:center;
color:#00ffe0;
font-weight:bold;
margin-bottom:10px;
}
.ww-search{
display:flex;
gap:6px;
}
.ww-search input{
flex:1;
padding:8px;
border-radius:8px;
border:none;
}
.ww-search button{
background:#00ffe0;
border:none;
padding:8px 10px;
border-radius:8px;
cursor:pointer;
}
</style>
<script>
async function getWeather(){
let city=document.getElementById("cityInput").value;
let result=document.getElementById("weatherResult");
if(!city){
result.innerHTML="Şehir girin";
return;
}
result.innerHTML="Yükleniyor...";
let geo=await fetch("https://nominatim.openstreetmap.org/search?format=json&q="+city)
.then(r=>r.json());
if(!geo.length){
result.innerHTML="Şehir bulunamadı";
return;
}
let w=await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${geo[0].lat}&longitude=${geo[0].lon}¤t_weather=true`
).then(r=>r.json());
let d=w.current_weather;
result.innerHTML=
"🌡️ " + d.temperature + "°C<br>" +
"💨 Rüzgar: " + d.windspeed + " km/h";
}
</script>