AllaTurkaa

Değerli Allaturkaa Üyeleri ve Ziyaretçiler,

Bugün sizlerle, kendi projelerinizde kullanabileceğiniz veya kişisel arşiviniz olarak saklayabileceğiniz,
tamamen açık kaynak, reklamsız ve ücretsiz bir Kur'an-ı Kerim Player çalışmasını paylaşmak istiyorum.
Dost Yurdu projesi kapsamında hazırladığım bu çalışma, estetik tasarımı ve kullanıcı dostu arayüzüyle öne çıkıyor.
Sistemin Özellikleri

• Tam Liste: 114 surenin tamamını içeren düzenli bir liste.
  
• Modern Tasarım: Playfair Display ve Poppins fontları ile zenginleştirilmiş, cam efekti (glassmorphism) barındıran şık arayüz.
  
• Responsive Yapı: Mobil cihazlar, tabletler ve masaüstü bilgisayarlarla tam uyumlu.
  
• Otomatik Geçiş: Bir sure bittiğinde otomatik olarak bir sonrakine geçme özelliği.
  
• Hafif Kod: Dış bağımlılığı olmayan, sadece tek bir HTML dosyasıyla çalışan hızlı yapı.
  

Kendi Sitenize Nasıl Eklersiniz?
Aşağıdaki kodları kopyalayıp sitenizde yeni bir HTML sayfası oluşturarak veya mevcut sayfanızın içine yapıştırarak hemen kullanmaya başlayabilirsiniz. Hiçbir veritabanı kurulumu gerektirmez.

Renk Düzeni ve Özelleştirme
Tasarımda #f39c12 (Altın Sarısı) ve #0f0c29 (Gece Mavisi) tonları hakimdir. Eğer renkleri değiştirmek isterseniz:

• CSS kısmındaki background: #0f0c29; satırını değiştirerek arka planı,
  
• .play-btn ve #progress-bar sınıflarındaki #f39c12 kodlarını değiştirerek vurgu renklerini kendinize göre uyarlayabilirsiniz.
  

Linklerde Hata Olursa Nasıl Düzeltilir?
Kod içerisinde const baseUrl değişkeni bulunmaktadır. Eğer ses dosyalarının sunucusu değişirse veya kendi sunucunuza yüklemek isterseniz, sadece bu linki güncellemeniz yeterlidir.
Dosya isimleri 001.mp3, 002.mp3 formatında olduğu sürece sistem hatasız çalışacaktır.

CMS, Blog ve Forum Entegrasyonu (WordPress, Blogger, vBulletin vb.)
Bu oynatıcıyı sadece tek bir HTML dosyası olarak değil, mevcut sitenizin içine bir "Widget" veya "Sayfa" olarak da ekleyebilirsiniz. İşte yöntemler:

• Blogger Kullanıcıları: Yeni bir sayfa oluşturun, düzenleme panelinde sol üstteki kalem simgesinden **"HTML Görünümü"**ne geçin ve kodların tamamını yapıştırıp yayınlayın.
  
• Eğer yan menüye (Sidebar) eklemek isterseniz, "Yerleşim > Gadget Ekle > HTML/JavaScript" yolunu izleyebilirsiniz.
  
• WordPress Kullanıcıları: Gutenberg editöründe "Özel HTML" (Custom HTML) bloğunu seçerek kodları içine yapıştırın. Eğer sayfanın tam genişlikte görünmesini isterseniz, sayfa şablonunu "Full Width" olarak seçmeyi unutmayın.
  
• Forumlar (vBulletin, XenForo, MyBB): Admin panelinden yeni bir "Sayfa" (Page) oluşturarak veya bir konunun içine [HTML] tagları (eğer forumunuz izin veriyorsa) arasında ekleyerek paylaşabilirsiniz.
  
• Iframe Yöntemi: Eğer kodu başka bir sunucuda barındırıyorsanız, sitenizin herhangi bir yerine şu satırla çekebilirsiniz:
  <iframe src="dosya-yolu.html" width="100%" height="700px" frameborder="0"></iframe>
  

Demo Site: BURADAN BUYRUN

Dosya İçeriği (HTML/CSS/JS):

"Dünya bir köprüdür; üzerinden geç, ama üzerine ev kurma."

Selam ve dua ile,