AllaTurkaa

Merhaba değerli forum üyeleri,

Bugün sizlerle kendi tasarımım olan Allaturkaa Radyo index çalışmasını ve bu çalışmayı nasıl özelleştirebileceğinizi adım adım paylaşmak istiyorum.
İster hazır yazılı halini kullanın, isterseniz boş şablon üzerine kendi logonuzu ekleyin; her iki durum için de detaylı bir anlatım hazırladım.

1. Yazılı İndexi Sitenize Ekleme
Eğer paylaştığım "Allaturkaa Radyo" yazılı hazır indexi kullanmak istiyorsanız:

• İndirdiğiniz HTML ve resim dosyalarını sitenizin FTP (veya Hosting panelindeki Dosya Yöneticisi) üzerinden ana dizine yüklemeniz yeterlidir.
  
• index.html dosyanızın resim yollarının, yüklediğiniz klasör yapısıyla uyumlu olduğundan emin olun.
  

2. Boş İndex Üzerine Yazı Yazma
Paylaştığım boş (logosuz) şablonu kullanarak kendi radyo isminizi eklemek isterseniz iki seçeneğiniz var:

• Grafik Programı Kullanarak: Photoshop, GIMP veya Paint.NET gibi programlarla boş index resmini açıp, üzerine istediğiniz fontla isminizi yazabilirsiniz.
  
• Kod Üzerinden Yazma: İndexin orta kısmındaki boş alanı bir div olarak belirleyip, CSS ile üzerine yazı (text) bindirebilirsiniz. Ancak görsel şıklık için "Cool Text" gibi sitelerden logo oluşturup eklemeniz daha profesyonel duracaktır.
  

3. Cool Text ile Şık Logolar Oluşturma
Paylaştığım ekran görüntülerindeki gibi (Site_1.png ve Site-0.jpg) profesyonel yazılar oluşturmak için:

1. CoolText.com sitesine gidin.
   
2. Size sunduğum onlarca farklı stilden (Gold Trim, Dragon, Burning vb.) birini seçin.
   
3. Logo Text kısmına radyo adınızı yazın.
   
4. Create Logo butonuna basın ve ardından Download (Görseli İndir) diyerek bilgisayarınıza kaydedin.
   
   • Not: Arka planın şeffaf (PNG) olmasına dikkat edin ki index üzerinde sırıtmasın.
     

4. İndirilen Logoyu İndexe Ekleme (Kod ve Görsel)
Bilgisayarınıza indirdiğiniz şeffaf logoyu indexe iki şekilde ekleyebilirsiniz:

• Resim Düzenleyici ile: Herhangi bir fotoğraf düzenleyicide boş indexi açın, indirdiğiniz logoyu üzerine "yeni katman" olarak yapıştırın ve tek bir resim olarak kaydedin.
  
• Kod (HTML/CSS) ile: Eğer logoyu ayrı bir dosya olarak tutmak isterseniz, HTML kodunuzda logonun geleceği kısma şu yapıyı kurabilirsiniz:
  

HTML
<div style="position: absolute; top: 405px; left: 145px; z-index: 999;">
<a href="https://allaturkaa.de/forum/index.php" target="_blank">
<img src="BUTON_RESMININ_ADI.png" alt="ALLATURKAA FORUM" border="0">
</a>
</div>

Ayarlar ve İpuçları:

• top: 405px;: Butonu yukarıdan aşağıya kaydırır. Sayıyı artırırsan buton aşağı iner.
  
• left: 145px;: Butonu soldan sağa kaydırır. Sayıyı artırırsan buton sağa gider.
  
• z-index: 999;: Bu çok önemlidir; butonun ana index resminin altında kalmamasını, her zaman en üstte (tıklanabilir durumda) olmasını sağlar.
  
• Sürükleme Kolaylığı: Bu div bloğunu index kodlarının en sonuna (</body> etiketinden hemen önce) eklersen, diğer kodları bozmadan yerini rahatça ayarlayabilirsin.
  

Önemli İpucu: Cool Text üzerinden aldığınız logoları PNG formatında indirdiğinizde, arka planı transparan olacağı için index üzerindeki metalik dokuyu bozmaz ve çok daha estetik durur.


Not: Kesip Parçalamak serbest.
Umarım bu paylaşım radyosuna yeni bir soluk getirmek isteyen arkadaşlara yardımcı olur. Tasarımla ilgili sorularınızı konu altından sorabilirsiniz!

Demo Site: Buradan Buyrun
Not. Allaturkaa chatango chat kodu ve tema değiştirilmiştir.

Sesin dalga dalga yayıldığı bir dünyada, görselin de bir o kadar güçlü olması gerekir. Allaturkaa ruhunu yansıtan bu tasarımı, mikrofon başında emek veren tüm dostlara armağan ediyorum.
Paylaşmak, birlikte büyümektir.

Allaturkaa chatango chat kodu ve tema değiştirilmiştir. Dj isimleri kodu Değiştirilmiştir.
ek Dosyalara İndex eklenmiştir. Kullananlara ve kullanacak olanlara duyurulur.