AllaTurkaa

Merhaba değerli forum dostları, bugün sizlerle görselliği ön planda olan, içinde JV Player, Kayan DJ Listesi ve Özel Chatango Alanı barındıran tam donanımlı (İSİM ÖRNEKTİR)"Gönül Yorgunu FM" radyo indexini paylaşıyorum.
Bu index, özellikle Blogger (Blogspot) kullanıcıları için optimize edilmiştir ancak tüm HTML destekli sitelerde sorunsuz çalışır.

İndex Özellikleri:

• JV Player: Koyu kırmızı/siyah degrade geçişli, yeşil stop efektli modern player.
  
• Kayan DJ Listesi: Otomatik kayan, üzerine gelince duran şık DJ tanıtım bandı.
  
• Gömülü Chat: Arka planı özel resimli, şeffaflığı ayarlanmış Chatango paneli.
  
• Hızlı Linkler: Forum, SİD gönder, İfadeler ve MP3 yap butonları hazır tanımlı.
  
• Mobil Uyumluluk: Sayfa genişliği 1200px olarak sabitlenmiş, her ekranda ortalı görünür.
  

ÖNEMLİ: Kendine Göre Özelleştirme Rehberi

1. Radyo Ses ve Şarkı İsmi Ayarı

• Ses Linki: Kodun en sonlarında bulunan <audio id="jv-audio-engine" src="https://eu4.fastcast4u.com/proxy/allaturka?mp=/1"></audio> satırındaki linki kendi yayın linkinizle değiştirin.
  
• Şarkı Bilgisi: Player içinde şarkı isminin görünmesi için data-username="allaturka" yazan yerdeki allaturka ismini kendi Fastcast kullanıcı adınızla değiştirin.
  

2. DJ Listesini Değiştirme / Yeni DJ Ekleme
Kodun içindeki id="html2" kısmını bulun. Her DJ bir <span class="dj-card"> bloğudur.

• Resim Değiştirme: src="resim_linki.jpg" kısmına DJ fotoğrafını yapıştırın.
  
• İsim & Saat: <b>DJ İSMİ</b> ve saat kısımlarını kendinize göre yazın.
  
• Yeni DJ Ekleme: Mevcut DJ satırlarından birini kopyalayıp hemen altına yapıştırarak listeyi uzatabilirsiniz.
  

3. Arka Plan Resmini Değiştirme (Tema Değişimi)
İndexin ana görselini veya chat arka planını değiştirmek isterseniz:

• Ana Arka Plan: id="image1" içindeki src="...78ajzt7o.jpg" linkini kendi arka plan resminizle değiştirin.
  
• Chat Arka Planı: #chat-frame-container stilindeki background-image: url("...") kısmını değiştirin.
  

4. Chatango Ayarı (Kendi Sohbetini Bağla)
id="html3" kısmındaki Chatango kodunda:

• "handle":"testschat" yazan yerdeki testschat yerine kendi Chatango oda adınızı yazın.
  

Farklı Sohbet Paneli Kullanacaklar İçin (Chameleon Chat / Catters.net)
Eğer Chatango yerine Chameleon Chat kullanıyorsanız, mevcut chat kodunu silip kendi kodunuzu şu şekilde eklemelisiniz:

1. Kodun içindeki id="html3" yazan bölümü bulun.
   
2. Oradaki <script>...</script> (Chatango kodlarını) tamamen silin.
   
3. Onun yerine Chameleon'dan aldığınız kodu şu şekilde div içine yerleştirin:
   

HTML
</button>

<div id="html3" style="position:absolute; overflow:hidden; left:32px; top:418px; width:1128px; height:702px; z-index:15">
<iframe src="BURAYA_CHAMELEON_CHAT_LINKI_GELECEK" width="1128" height="702" frameborder="0" scrolling="no"></iframe>
</div>

Önemli Not: * Genişlik ve Yükseklik: İndexin tasarımının bozulmaması için Chameleon kodundaki width değerini 1128, height değerini ise 702 olarak ayarladığınızdan emin olun.

• Şeffaflık: Chameleon chat yapı gereği Chatango gibi kolayca şeffaflaşmayabilir. Eğer arkadaki resmin görünmesini istiyorsanız, Chameleon kendi panel ayarlarından (varsa) arka planı "transparent" (şeffaf) veya "none" olarak seçmelisiniz.
  

Eğer Chameleon panelinde arka planı tamamen şeffaf yaparsanız, indexin içindeki şu stil komutu sayesinde arkadaki resim otomatik olarak görünecektir:
#chat-frame-container { background-image: url("...") !important; }
Bu eklemeyi de yaptığında, farklı chat sistemi kullanan dostların da indexi sorunsuz bir şekilde kendi zevklerine göre uyarlayabilirler.

Kendi Player'ınızı Nasıl Eklersiniz?
Eğer mevcut JV Player'ı kullanmak istemiyor, kendi radyo kodunuzu (Flatcast veya farklı bir hazır player) eklemek istiyorsanız şu adımları takip edin:
1. Mevcut Player Kodunu Silme:
Kodun içindeki id="html4" ve id="html5" yazan bölümleri (yani Player ve JavaScript kısımlarını) tamamen silin.
2. Kendi Kodunuzu Yerleştirme:
Sildiğiniz id="html4" alanının yerine kendi kodunuzu şu kalıbın içine yapıştırın:

HTML
</button>

<div id="html4" style="position:absolute; overflow:hidden; left:181px; top:1152px; width:840px; height:106px; z-index:16">
<iframe src="PLAYER_LINKINIZ" width="840" height="106" frameborder="0" scrolling="no"></iframe>
</div>

Önemli Ayarlar:

• Ölçülere Dikkat: Tasarımın kaymaması için kendi player kodunuzdaki genişliği (width) 840, yüksekliği (height) ise 106 olarak güncelleyin.
  
• Konumlandırma: Eğer player'ınız kutuya tam oturmazsa, left:181px (sağa-sola) ve top:1152px (yukarı-aşağı) değerleriyle oynayarak milimetrik ayar yapabilirsiniz.

Alternatif: Sadece Renk Değişimi
Eğer player'ın şeklini beğenip sadece rengini değiştirmek isterseniz; CSS kısmındaki .player-pro bölümünde bulunan background satırındaki renk kodlarını (#800000 gibi) kendi radyo temanızın rengine göre değiştirebilirsiniz.

Tasarım Notu: Kendi player'ınızı eklediğinizde şık durması için arka planının şeffaf (transparent) olduğundan emin olun, böylece indexin o güzel kırmızı/siyah geçişi kaybolmaz.

Blogspot’a İndex Kurulumu (Doğru Metot)
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.
   

Önemli: Dosyaların Silinmesini Önlemek İçin (Kendi Sunucunuza Yükleme)
Paylaştığım kodlardaki resimler ve player dosyaları şu an benim sunucumda/GitHub üzerindedir. Ancak indexin ömür boyu sorunsuz çalışması ve resimlerin ileride silinmemesi için şu yöntemi izlemenizi tavsiye ederim:

1. Resimleri İndirin: Kod içerisindeki tüm .jpg, .png ve .gif uzantılı resim linklerini tarayıcınızda açıp bilgisayarınıza kaydedin.
   
2. Kendi Sunucunuza Yükleyin: Bu resimleri kendi Blogspot medyanıza, Hızlıresim (üye girişi yaparak) veya kendi Hosting/Server alanınıza yükleyin.
   
3. Kodları Güncelleyin: Koddaki eski resim linklerini, kendi yüklediğiniz yeni linklerle değiştirin

Not: Özellikle ana arka plan (image1) ve buton görsellerini kendi sunucunuza almanız, sitenizin hızı ve güvenliği açısından çok daha sağlıklıdır.

Demo Önizleme: BURADAN BUYRUN

Not: Tüm İndexi Kodları ve Temayı Dilediginiz Gibi kesip Biçebilir Kafanıza Göre Takılabilirsiniz.

"İndexi kullanmak isterseniz radyo kurucularınıza düzenletebilir ya da forumdaki bilgili üstadlardan yardım isteyebilirsiniz."