AllaTurkaa

Değerli forum üyeleri ve radyo sahipleri,

Bu rehber, radyo sitenize veya herhangi bir web sayfasına, özel renklerinize uyumlu ve anlık program bilgisini gösteren dinamik Yayın Akışı Widget'ını nasıl entegre edeceğinizi adım adım açıklamaktadır.

Bu Widget, mevcut programı otomatik olarak vurgular, güncel tarih ve saati gösterir ve kolayca özelleştirilebilir bir yapı sunar. Amacımız, sitenizin estetiğini bozmadan, ziyaretçilerinize anlık bilgi sağlamaktır.

Widget'ın Temel Özellikleri

• Dinamik Vurgulama: Yayında olan programı otomatik olarak algılar ve vurgu rengiyle işaretler. • Tam Tarih/Saat: Sayfanın yenilenmesine gerek kalmadan, o anki tam tarih ve saati (saniyesine kadar) gösterir. • Modern Tasarım: Logo alanı solda, tarih/saat bilgisi sağda yer alır. Koyu tema ile her siteye uyum sağlar. • Kolay Özelleştirme: HTML ve CSS yapısı sayesinde renkler, fontlar ve boyutlar kolayca değiştirilebilir.

---

Adım 1: Widget Kodunu Edinme

Aşağıdaki kod, Widget'ın tamamını (HTML, CSS ve JavaScript) içerir. Lütfen bu kodu web sayfanızda veya yönetim panelinizdeki "Özel HTML" alanına eklemek için tamamını kopyalayın.

(Buraya, üzerinde son anlaştığımız ve markaya özel isim içermeyen o uzun kod bloğunu yapıştıracaksınız.)

---

Adım 2: Ekleme Yöntemi ve Uygulama

Bu kod tek bir blok halinde sunulmuştur. Web sitenize eklemek için aşağıdaki yöntemlerden birini kullanın:

A. Tavsiye Edilen Yöntem (En Güvenlisi): <iframe> Kullanımı

Bu yöntem, sayfanızın mevcut CSS'ini etkilemez ve en güvenilir çalışma biçimidir: 1. Kopyaladığınız kodun tamamını alın ve bir metin düzenleyici programda schedule.html adıyla kaydedin. 2. Bu .html dosyasını web sunucunuza (FTP/cPanel) yükleyin. 3. Widget'ın görünmesini istediğiniz sayfada aşağıdaki <iframe> etiketini kullanın:

<iframe src="https://sizin_siteniz/dosya_yolu/schedule.html" width="400" height="450" frameborder="0" scrolling="no" ></iframe>

B. Alternatif Yöntem: Doğrudan Kod Ekleme

Eğer içerik yönetim sisteminiz (CMS) veya özel temanız varsa, "HTML Widget Ekle" veya "Özel Kod" alanına kodun tamamını doğrudan yapıştırabilirsiniz.

---

Adım 3: Geliştirme ve Özelleştirme Alanları

Kodu kendi sitenize uyarlamak ve geliştirmek için şu üç bölümü düzenleyebilirsiniz:

1. Programları Düzenleme (HTML Bölümü)

Program listesi, kodun HTML bölümündeki data-day="0" (Pazartesi) ile başlayan kısımlardır. • Program başlangıç ve bitiş saatlerini data-start ve data-end alanlarında (Ör: "07:00") güncelleyin. Canlı vurgusu bu saatlere göre çalışır. • Programın görünen adını <span class="program-name">...</span> etiketleri arasına yazın.

2. Renkleri Değiştirme (CSS Bölümü)

Widget'ın rengini kolayca değiştirmek için kodun <style> etiketleri arasındaki CSS bölümünde şu renk kodlarını arayın ve kendi renklerinizle değiştirin: • #1c1c1c: Koyu arka plan rengi. • #FF8C00: Turuncu Vurgu Rengi (Aktif gün ve program saati bu renktedir). • #4a2800: Yayındaki programın daha koyu arka plan rengi.

3. Logo Değiştirme (HTML Bölümü)

Kendi logonuzu eklemek için, kodun üst kısmındaki <img> etiketinin src (kaynak) alanını kendi logonuzun URL'si ile değiştirin:

<img src="SİZİN_LOGONUZUN_URL'Sİ" alt="Radyo Logo" class="schedule-logo">

Bu talimatlar, kodu kullanacak herkese netlik sağlayacaktır. Uygulama sonrası herhangi bir sorun yaşarsanız destek alabilirsiniz!