Merhaba dostlar,
Adım adım, bir radyo oynatıcı ve sohbet kutusunu nasıl sitenize entegre edebileceğinizi, zarif bir biçimde nasıl şekillendirebileceğinizi göstereceğim. Hazırsanız, kodun sıcacık yüzüyle tanışmaya başlayalım!
1.
HTML Yapısının İnceliği
Öncelikle, web sayfamızın iskeletini oluşturuyoruz. Bu bölüm, sayfanızın can damarı, temel taşı olacak. Sayfanın doğru bir biçimde işleyebilmesi için HTML yapınızı aşağıdaki gibi düzenlemelisiniz:
|
HTML
|
1
2
3
4
5
6
|
[<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>ALLATURKAA</title>
|
Neden önemli?
Meta etiketleri ve dil bilgisi, sitenizin tarayıcılarda doğru görüntülenmesi ve cihazlar arası uyumluluğu sağlar. Bu satırlar olmazsa, orkestrasız bir müzik gibi eksik bir siteyle karşı karşıya kalabilirsiniz!
2.
Estetiğin Adı: CSS ile Stil Düzenlemeleri
Sırada, sayfanızın dış görünüşünü tasarlama zamanı! Dinleyicilerinizin gözlerini kamaştıracak zarif bir radyo oynatıcı ve sohbet kutusu için gerekli olan stil düzenlemelerini yapacağız.
|
|
Cascading style sheet
|
1
2
3
4
5
6
7
8
9
|
#player-container {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.1);
color: white;
border-radius: 10px;
max-width: 400px;
margin: 0 auto;
}
|
Bu ne işe yarıyor?
Bu stil kodları, radyo oynatıcınızın merkezde zarif bir biçimde konumlanmasını sağlar. Şeffaf bir arka plan ve yuvarlatılmış kenarlarla şıklığı yakalayacaksınız. Adeta bir vitrinde sergilenen değerli bir mücevher gibi duracak!
3.
Radyo Oynatıcınızı Ekleme
Ve işte kalplerin ritmini hızlandıracak, sayfanızın asıl yıldızı: Radyo oynatıcı! Dinleyicileriniz, tek bir tıklamayla yayınıza bağlanabilecek.
|
|
HTML
|
1
2
3
4
|
<audio controls="" autoplay="" preload="metadata" style="width: 100%; margin-bottom: 15px;">
<source src="https://eu8.fastcast4u.com/proxy/SİZİNID?mp=/1" type="audio/mpeg">
Tarayıcınız bu ses oynatıcıyı desteklemiyor.
</audio>
|
Neden bu kod?
HTML5 <audio> etiketi sayesinde, tüm modern tarayıcılarda radyo yayınızı sorunsuzca dinletebilirsiniz. Tarayıcısı eski olan ziyaretçiler bile size kayıtsız kalamayacak!
4.
Sohbet Kutusu ile Etkileşim
Dinleyicilerinizle sıcak bir sohbet ortamı kurmak istiyorsanız, Chatango sohbet kutusunu sayfanıza ekleyerek dinleyicilerinizin anlık mesajlaşmalarla birbirleriyle ve sizinle bağlantıda kalmalarını sağlayabilirsiniz.
|
|
HTML
|
1
2
|
<script id="cid0020000389938334993" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 950px;height: 550px;">{"handle":"allaturkaasohbet","arch":"js","styles":
{"a":"000000","c":"FFFFFF","d":"FFFFFF","f":0,"g":"ffffff","i":0,"j":"ffffff","k":"000000","l":"000000","m":"CC0000","n":"FFFFFF","p":"11.16","q":"000000","t":0,"usricon":0.73,"surl":0,"allowpm":0,"cnrs":"0.69"}}</script>
|
Ne işe yarıyor?
Bu sihirli kod sayesinde, sohbet kutunuz sayfanıza yerleşecek ve herkesin bir araya gelip eğlenebileceği bir alan oluşturacaksınız. Stil ayarlarını dilediğiniz gibi değiştirerek tasarımınıza uyumlu hale getirebilirsiniz.
5.
DJ’lere Göre Arka Plan Değişimi
Sitenizi daha da özel kılmak ve ziyaretçilerinize DJ'lerinizi tanıtmanın şık bir yolunu arıyorsanız, arka planı DJ'e göre dinamik olarak değiştirmek harika bir fikir olabilir! İşte size bu özelliği nasıl uygulayacağınızı gösteren kod:
|
|
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const djBackgrounds = {
[size=10]'DJ ALLATURKAA'[/size][size=10]: [/size][size=10]'[size=10]https://example.com/allaturkaa.jpg[/size]'[/size][size=10], [/size][size=10]// DJ allaturkaa için arka plan resmi
[/size][size=10] 'DJ isminiz': 'https://example.com/isminiz.jpg'[/size]
// Daha fazla DJ ekleyebilirsiniz
};
function updateBackground() {
const streamInfoElement = document.querySelector('.cc_streaminfo');
if (streamInfoElement) {
const currentDJ = streamInfoElement.textContent.trim().toUpperCase();
let backgroundImage = defaultBackground;
for (let key in djBackgrounds) {
if (currentDJ.includes(key)) {
backgroundImage = djBackgrounds[key];
break;
}
}
document.getElementById('chatango-container').style.backgroundImage = `url('${backgroundImage}')`;
}
}
|
Ne yapıyor bu?
Bu JavaScript kodu, yayında olan DJ’in kimliğine göre arka planı dinamik olarak değiştiriyor. Ziyaretçileriniz, DJ'iniz değiştiğinde görsel bir şölene tanıklık edecekler. Her DJ’e özel bir dokunuş eklemek hiç bu kadar kolay olmamıştı!
Sonuç olarak, yukarıda sıraladığımız adımları izleyerek, sayfanızı hem işlevsel hem de estetik açıdan kusursuz hale getirebilirsiniz. Kodlarınızın sihrini hissetmek ve dinleyicilerinize benzersiz bir deneyim sunmak artık sizin elinizde.
-
Kodları doğrudan forumun metin alanına yapıştırmak yerine, daha güvenilir ve düzenli bir şekilde kullanabilmeniz için onları bir
.txt dosyası olarak ekliyorum. Bu dosyayı indirerek, dilediğiniz gibi üzerinde çalışabilir, düzenleyebilir ve kolayca kullanabilirsiniz.
Bu şekilde, olası formatlama hatalarının önüne geçebilir ve kodların bozulmadan, olması gerektiği gibi çalışmasını sağlayabilirsiniz.
Herkese kolay gelsin!
Forum Haberleri ve Duyurular »
Shoutcast Radio Kurlum
(13.10.2024, 04:27)
