AllaTurkaa

Merhabalar değerli forum sakinleri ve ziyaretçiler,

Bugün sizlere görsel estetiği modern tekniklerle birleştirdiğim, Çalı Kuşu FM için özel olarak hazırladığım 2026 konseptli radyo index çalışmamı paylaşıyorum.
Tasarımda hem kullanıcı deneyimini (UX) hem de görsel doyuruculuğu ön planda tuttum.
Öne Çıkan Teknik Özellikler:

• Premium JV Player Entegrasyonu: Standart oynatıcıların dışına çıkarak; özel animasyonlu, ses barlı ve çalan parça bilgisini anlık çeken modern bir Player yapısı kullanılmıştır.
  
• Gelişmiş Kayan DJ Paneli: Radyonun ruhu olan DJ'lerinizi, profil resimleriyle birlikte şık bir bant içinde gösteren, üzerine gelindiğinde duran akıllı kaydırma sistemi.
  
• Saydam Chat (Sohbet) Alanı: Sohbet penceresini (Chatango) arka plan resmiyle bütünleştiren, gözü yormayan hafif transparan (Opacity) yapı.
  
• Hızlı Erişim Butonları: Forum, SID Gönder, İfadeler ve MP3 Dönüştürücü gibi en çok kullanılan özellikler için animasyonlu GIF butonlar.
  
• Görsel Derinlik: 1303px genişliğinde, yüksek çözünürlüklü ve sanatsal bir tema bütünlüğü.
  

Kişiselleştirme ve Kurulum Kılavuzu:
Bu tasarımı kendi radyonuza uyarlamak için kod içerisinde aşağıdaki alanları bulup değiştirmeniz yeterlidir:
1. Radyo Çalma Linkini Değiştirme (Player Ayarı) Müziğin çalması için kodun en altındaki şu satırı bulun: src="https://eu4.fastcast4u.com/proxy/allaturka?mp=/1"

• Buradaki linki silip kendi radyo IPORT veya Proxy linkinizi tırnak işaretleri arasına yazın.
  

2. Şarkı İsminin Çıkması (Anlık Bilgi) Player üzerinde "Yükleniyor..." yazan ve şarkı ismini çeken kod şudur: data-username="allaturka"

• Buradaki allaturka yazan yere kendi radyo kullanıcı adınızı veya sistem isminizi yazmalısınız.
  

3. DJ Resimleri, İsimleri ve Yeni DJ Ekleme Kayan banttaki DJ bilgilerini değiştirmek için <div class="dj-list-inner"> bölümüne gidin:

• Resim Değiştirme: src="https://...jpg" kısmına DJ'in resim linkini yapıştırın.
  
• İsim Değiştirme: <b>DJ GİZEM</b> yazan yeri değiştirin.
  
• DJ Eklemek: Mevcut bir <span class="dj-card">...</span> satırını kopyalayıp altına yapıştırarak yeni bir DJ sırası oluşturun.
  

4. Chatango (Sohbet) Kodunu ve Ölçülerini Değiştirme Kendi Chatango odanızı eklemek için şu bölümü bulun: id="cid0020000431223133320" ve "handle":"testschat"

• Chatango'dan aldığınız kodun içindeki id ve handle (oda adı) kısımlarını buradakilerle değiştirin.
  
• Ölçü Ayarı: Boyutu değiştirmek isterseniz; width: 1218px; height: 736px; değerlerini güncelleyebilirsiniz.
  

5. Blogspot (Blogger) Üzerine Nasıl Eklenir?

Arkadaşlar, indexin Blogspot üzerinde tam ekran ve hatasız görünmesi için "Sayfalar" kısmını değil, direkt Tema düzenleme bölümünü kullanıyoruz. İşte adım adım yapılışı:

1. Yeni Blog Oluşturun: Blogger panelinden "Yeni Blog" deyin ve radyonuza uygun bir isim/adres seçin.
   
2. Temaya Giriş Yapın: Sol menüden "Tema" (Theme) sekmesine tıklayın.
   
3. HTML'i Düzenle: "Özelleştir" butonunun yanındaki küçük ok simgesine basın ve "HTML'i Düzenle" (Edit HTML) seçeneğini seçin.
   
4. Eski Kodları Temizleyin: Karşınıza çıkan penceredeki tüm kodları (CTRL + A yapıp silerek) tamamen boşaltın.
   
5. İndex Kodlarını Yapıştırın: Size verdiğim index kodlarını kopyalayıp bu boş alana yapıştırın ve sağ üstteki "Kaydet" (Disk simgesi) butonuna basın.
   
6. Mobil Görünümü Kapatın: (Önemli!) Tekrar Tema sayfasına dönün, "Mobil Ayarlar" kısmından mobil görünümü "Masaüstü" olarak işaretleyin ki telefonlardan girenler de hazırladığımız bu şık tasarımı görsün.

Not: Kodların düzgün çalışması için https://code.jquery.com/jquery-1.11.2.min.js kütüphanesinin silinmediğinden emin olun.
Boş İndex ve tema resmini de ekledim. düzenlemek kesmek biçmek serbesttir kafanıza göre takılın...


Demo Adres: BURADAN BUYRUN


Yazı Stili : BURADAN BUYRUN Not günlük sınırlı sayıda yazma imkanı vardır iyi değerlendirin.

Güle güle kullanın, yorumlarınızı bekliyorum

*Hayat, fırtınanın geçmesini beklemek değil, yağmurda dans etmeyi öğrenmektir.*