Kayan Yazılar İçin İmsakiye Eklentisi: Kapsamlı Bir Kılavuz

Giriş

Kayan yazılar, web sayfalarında kullanıcıların ekranlarında sabit kalan ve kaydırma yaparken görünürlüklerini koruyan öğelerdir. İmsakiyeler, Ramazan ayı boyunca oruç tutan Müslümanlar için önemli bir araçtır ve kayan yazılar, bu bilgileri kolayca erişilebilir hale getirmek için kullanılabilir. Bu makale, kayan yazılar için bir imsakiye eklentisi oluşturma sürecini ayrıntılı olarak açıklayacak ve konuyla ilgili faydalı kaynaklar sağlayacaktır.

Kayan Yazı Eklentisi Oluşturma

1. HTML Yapısı

İlk adım, kayan yazı eklentisinin HTML yapısını oluşturmaktır. Aşağıdaki kod, temel yapıyı sağlar:

“`html

“`

2. CSS Stilleri

Ardından, kayan yazı eklentisinin görünümünü ve davranışını tanımlamak için CSS stilleri ekleyin. Aşağıdaki kod, eklentiyi sağ üst köşeye sabitler ve kaydırma yaparken görünürlüğünü korur:

“`css

imsakiye-kayanyazi {

position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}

.imsakiye-baslik {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 10px;
}

.imsakiye-icerik {
list-style-type: none;
padding: 0;
}

.imsakiye-icerik li {
font-size: 1rem;
margin-bottom: 5px;
}
“`

3. JavaScript İşlevselliği

Son olarak, kayan yazı eklentisine JavaScript işlevselliği ekleyin. Bu, eklentinin kaydırma yaparken görünür kalmasını sağlar. Aşağıdaki kod, bu işlevselliği uygular:

javascript
window.addEventListener("scroll", function() {
var kayanyazi = document.getElementById("imsakiye-kayanyazi");
kayanyazi.style.top = window.pageYOffset + "px";
});

İmsakiye Verilerini Ekleme

Kayan yazı eklentisi oluşturulduktan sonra, imsakiye verilerini eklemeniz gerekir. Bu veriler, Diyanet İşleri Başkanlığı veya diğer güvenilir kaynaklardan elde edilebilir. Verileri eklentiye aşağıdaki gibi ekleyebilirsiniz:

“`html

• İmsak:
• Güneş Doğumu:
• Öğle:
• İkindi:
• Akşam:
• Yatsı:

“`

Ardından, JavaScript kullanarak imsakiye verilerini ilgili HTML öğelerine ekleyin:

“`javascript
var imsak = document.getElementById(“imsak”);
imsak.innerHTML = “04:30”;

var gunesdogumu = document.getElementById(“gunesdogumu”);
gunesdogumu.innerHTML = “06:00”;

// Diğer imsakiye verilerini ekleyin…
“`

Faydalı Kaynaklar

• Diyanet İşleri Başkanlığı İmsakiyesi
• Kayan Yazı Eklentisi Örneği
• JavaScript Kaydırma Olayı

Sonuç

Kayan yazılar için bir imsakiye eklentisi oluşturmak, Ramazan ayı boyunca oruç tutan Müslümanlar için değerli bir araç olabilir. Bu makalede açıklanan adımları izleyerek, web sitenize kolayca erişilebilir ve kullanışlı bir kayan yazı imsakiyesi ekleyebilirsiniz.