Blogger sitenizde kullanabileceğiniz bu mini widget ile güncel hava durumu ve sıradaki namaz vaktine kalan süreyi ziyaretçilerinize gösterebilirsiniz. Basit HTML kodu sayesinde Blogger’a kolayca eklenir ve otomatik çalışır. Şık tasarımı ile sitenizde hem faydalı hem de dikkat çekici bir bilgi alanı oluşturur. Görsel aşağıda ki gibidir...
✅ hava durumu (ikon + derece)
✅ cami silüeti ikon
✅ sıradaki namaz vakti
✅ canlı geri sayım
✅ Blogger uyumlu
✅ görseldeki gibi gri kutu tasarım
Bunu Blogger → Yerleşim → HTML/JavaScript içine ekle.
<center><div class="mini-bar"> <div class="weather"> <span class="icon">⛅</span> <span id="temp">--°C</span> </div> <div class="divider"></div> <div class="prayer"> <span class="mosque">🕌</span> <span id="vakit">Yükleniyor</span> <span class="count" id="sayac">00:00:00</span> </div> </div> <style> .mini-bar{ display:flex; align-items:center; background:#efefef; border:1px solid #cfcfcf; font-family:Arial; font-size:14px; width:270px; height:34px; } .weather{ display:flex; align-items:center; gap:5px; padding:0 8px; } .divider{ width:1px; height:22px; background:#ccc; } .prayer{ display:flex; align-items:center; gap:6px; padding:0 8px; } .count{ background:#2c5fa8; color:white; padding:2px 6px; border-radius:3px; font-weight:bold; } .icon{ font-size:18px; } </style> <script> let city="Antalya"; // şehrini yazabilirsin async function getWeather(){ let r=await fetch("https://wttr.in/"+city+"?format=j1"); let j=await r.json(); document.getElementById("temp").innerHTML= j.current_condition[0].temp_C+"°C"; } async function getPrayer(){ let url="https://api.aladhan.com/v1/timingsByCity?city="+city+"&country=Turkey&method=13"; let r=await fetch(url); let j=await r.json(); let times={ fajr:j.data.timings.Fajr, dhuhr:j.data.timings.Dhuhr, asr:j.data.timings.Asr, maghrib:j.data.timings.Maghrib, isha:j.data.timings.Isha }; nextPrayer(times); } function nextPrayer(t){ let now=new Date(); let list=[ ["İmsak",t.fajr], ["Öğle",t.dhuhr], ["İkindi",t.asr], ["Akşam",t.maghrib], ["Yatsı",t.isha] ]; for(let i=0;i<list.length;i++){ let time=list[i][1].split(":"); let target=new Date(); target.setHours(time[0],time[1],0); if(now<target){ document.getElementById("vakit").innerHTML=list[i][0]; countdown(target); break; } } } function countdown(target){ setInterval(function(){ let now=new Date(); let diff=target-now; let h=Math.floor(diff/(1000*60*60)); let m=Math.floor((diff%(1000*60*60))/(1000*60)); let s=Math.floor((diff%(1000*60))/1000); document.getElementById("sayac").innerHTML= String(h).padStart(2,"0")+":"+ String(m).padStart(2,"0")+":"+ String(s).padStart(2,"0"); },1000); } getWeather(); getPrayer(); </script></center>




0 Comments:
Yorum Gönder