Şablon Galerisi

Şuna göz atın: tam görsel katman galerisiveya aşağıdaki özel şablonları ve içe aktarma seçeneklerini keşfedin.

Yayınınız için bir görünüm seçin

Sohbet, öne çıkan mesaj ve uyarı katmanlarını önizleyin, ardından favorinizi OBS veya Streamlabs'e ekleyin.

🧭 Katman türünüzü seçin

💬 Birleştirilmiş sohbet

Bağlı platformlarınızdan akan mesajlar. Sohbet şablonuyla veya şununla başlayın: panel.

⭐ Öne çıkan mesaj

Panelde seçtiğiniz tek mesaj. Röportajlar, soru-cevap veya selamlamalar için öne çıkan tasarım seçin.

🎉 Etkinlik uyarıları

Takipleri, üyelikleri ve bağışları kutlayın. Animasyonları ve sesi SSN'nin uyarı ayarlarında yapılandırın. Uyarı kılavuzu

Şablon kütüphanesi

Yayınınız için ideal şablonu bulun

🎨 Uyumlu tema paketleri

Üç tarayıcı kaynağında tek görünüm. Galeride şunu seçin: Uyumlu seti kullan, oturum ayrıntılarınızı girin, ardından OBS bağlantılarını kopyalayın. Hareket isteğe bağlıdır.

Uykulu üç renkli kedi, çilekli süt ve uçuk pembe kırtasiye

🐱 Çilek Kedisi

Uykulu üç renkli kedi, çilekli süt ve uçuk pembe kırtasiye. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Gök mavisi kartpostalda neşeli bir corgi

🐶 Good Company

Gök mavisi kartpostalda neşeli bir corgi. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Huzurlu bir ormanda masal kitabından bir kurbağa

🍄 Yosun ve Mantarlar

Huzurlu bir ormanda masal kitabından bir kurbağa. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Leylak rengi yıldız tozunda süzülen astronot tavşan

🌙 Ay Tavşanı

Leylak rengi yıldız tozunda süzülen astronot tavşan. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Işıltılı sihirli kristalle küçük bir ejderha

🐉 Kristal Muhafızı

Işıltılı sihirli kristalle küçük bir ejderha. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Nane ve mürdüm tonlarında kulaklıklı rakun ve plak

🎵 Gece Yarısı Karışık Kaset

Nane ve mürdüm tonlarında kulaklıklı rakun ve plak. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Sevimli hayalet, parlayan bal kabağı ve gece yarısı mürdümü

🎃 Hayaletli Bal Kabağı

Sevimli hayalet, parlayan bal kabağı ve gece yarısı mürdümü. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan
Atkılı ren geyiği ve şenlikli çam ağacı

🎄 Neşeli Küçük Ren Geyiği

Atkılı ren geyiği ve şenlikli çam ağacı. Uyumlu sohbet, öne çıkan mesaj ve uyarı stilleri içerir.

Paketi önizle ve kullan

Temalı paketler

Belgeler, örnek görseller ve kılavuzlarla tam temalı paketler

Deuk'un Teması
Tam paket

Deuk'un Teması

Özelleştirilebilir renkler ve akıcı geçişlerle gelişmiş, tamamen animasyonlu tema. Oyun yayınları için ideal.

Yeni
Windows 3.1 Teması
Retro tarz

Windows 3.1 Teması

Klasik pencere tasarımı ve piksel hassasiyetli ayrıntılarıyla nostaljik Windows 3.1 tarzı sohbet katmanı.

Neutron Teması
Modern tasarım

Neutron Teması

Akıcı animasyonlar ve mükemmel okunabilirlikle sade, modern tasarım. Özelleştirilebilir renk şemaları.

Kolayca eklenen basit şablonlar

Yalnızca oturum kimliğinizi gerektiren kullanıma hazır şablonlar

Örnek şablon
En az

Örnek şablon

Temel özelliklere sahip sade, hafif şablon. Özelleştirme için ideal başlangıç noktası.

Güzel Şablon
Animasyonlu

Güzel Şablon

Akıcı animasyonlar ve görsel efektlerle zarif tasarım. Dikkat çekici ama dikkat dağıtmaz.

t3nk3y'nin Teması
Oyun

t3nk3y'nin Teması

Hızlı içerikte bile mükemmel görünürlük sağlayan, oyun yayınları için tasarlanmış belirgin, yüksek kontrastlı tema.

LuckyLootTube Sıvı Cam Teması
Sıvı Cam

LuckyLootTube'un Teması

Akıcı animasyonlar ve hoş ifade gösterimiyle şık, animasyonlu sıvı cam tarzı sohbet katmanı.

YouTube CSS uyumlu şablonlar

YouTube CSS stilleriyle çalışan şablonlar

YouTube CSS şablonu
YouTube uyumlu

YouTube CSS şablonu

YouTube yapısındaki katman sayfamızla YouTube için tasarlanmış CSS kullanın. Septapus stilleriyle uyumludur.

Geliştirici şablonları

Kendi özel katmanlarınızı oluşturmak için başlangıç noktaları

Yalın şablon
Geliştirici

Yalın şablon

Kendi katmanınızı sıfırdan oluşturmak için gereken en az kod. Geliştiriciler ve LLM destekli kodlama için ideal.

Örnek Katman
Geliştirici

Örnek katman şablonu

Kendi özel katmanlarınızı oluşturmanıza yardımcı olacak yorumlar ve belgeler içeren daha kapsamlı başlangıç noktası.

Paylaşacak şablonunuz mu var?

Social Stream Ninja için harika bir şablon mu oluşturdunuz? GitHub depomuza pull request göndererek toplulukla paylaşın.

GitHub'da gönder

Social Stream Ninja ile StreamElements sohbet bileşeni kullanın

İçe aktarmada yeni misiniz? Tam sohbet teması kılavuzunu okuyun bileşen dosyalarını bulma, desteklenen biçimler, OBS kurulumu ve sorun giderme için.

Hem SSN Windows masaüstü uygulaması hem Chrome uzantısıyla çalışır; kod düzenleme gerekmez.

SSN'nin sohbet aldığını doğrulayın

SSN uygulamasında veya uzantısında platform kaynaklarınızı açın, ardından test mesajı gönderin. Yalnızca SSN panelinde göründükten sonra devam edin.

Orijinal bileşen dışa aktarımını alın

Bileşen tasarımcısının sağladığı ZIP'i, klasörü veya dosyaları kullanın. İşe yarar bir dışa aktarım normalde HTML, CSS, JavaScript, fields/data ve varlıklar içerir. Ekran görüntüsü veya StreamElements katman URL'si yeterli değildir.

İçe aktarıcıyı açın

İçe aktarıcıyı açıp ZIP'i, klasörü veya dosyaları seçin. Bileşen parçalarını algılar ve hemen demo önizleme gösterir.

Bileşen içe aktarıcısını aç

SSN oturum kimliğinizi ekleyin

İçe aktarıcıyı SSN açılır menüsünden açmak oturum kimliğini ve parolayı otomatik doldurur. Doğrudan açtıysanız şuradan kopyalayın: Oturum seçenekleri uygulamada veya uzantıda. Oturum kimliğini içe aktarıcıya bir kez girersiniz; indirilen dosyanın içine kaydedilir.

Mesaj geçmişini seçin

İçe aktarılan bileşen uyumlu ayarlar sağlıyorsa şunu kullanın: Mesaj geçmişi zamanlı kaldırmayı kapatmak veya ekranda kalan mesaj sayısını değiştirmek için. Bu, bileşen kodunu değil ayarlarını değiştirir.

İndirmeden önce test edin

Demo Önizleme tasarımı örnek mesajlarla kontrol eder. Canlı Önizleme çalışan SSN uygulaması veya uzantısından gelen gerçek sohbetle oturumu kontrol eder.

İndirip OBS'ye ekleyin

Tıklayın: OBS HTML'sini İndir. OBS'de Tarayıcı Kaynağı ekleyin ve şunu etkinleştirin: Yerel dosyave indirilen HTML dosyasını seçin. OBS'de oturum kimliğini eklemeyin veya URL'yi düzenlemeyin. Yayın sırasında SSN'yi çalışır durumda tutun; içe aktarıcı ve StreamElements kapatılabilir.

Demo boş

İçe aktarıcıda algılanan dosyaları gözden geçirin ve yanlış HTML, CSS veya JavaScript seçildiyse Gelişmiş dosya seçimi'ni kullanın.

Canlı Önizleme boş

Sohbetin SSN paneline ulaştığını ve oturum kimliği ile isteğe bağlı parolanın tam eşleştiğini doğrulayın.

OBS boş

İçe aktarıcı sayfası, orijinal ZIP veya StreamElements URL'si yerine indirilen HTML dosyasını kullanın, ardından OBS Tarayıcı Kaynağı'nı yenileyin.

Şablonları kullanma

Başlamak için bu basit adımları izleyin

Şablonunuzu seçin

Şablon kütüphanesine göz atın ve yayın tarzınıza uygun olanı seçin. Tasarımları karşılaştırmak için ekran görüntüsü galerisini kullanın; yerleşik şablonların çoğu indirme gerekmeden doğrudan URL ile çalışır.

Oturum kimliğinizi ekleyin

Değiştirin: YOURSESSIONID şablon URL'sinde, SSN uygulaması veya uzantısındaki Oturum Seçenekleri altında bulunan gerçek Social Stream Ninja oturum kimliğinizle. Oturumunuz kullanıyorsa isteğe bağlı parolayı da dahil edin.

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

OBS/Streamlabs'e ekleyin

Değiştirilmiş URL'yi yayın yazılımınıza Tarayıcı Kaynağı olarak ekleyin:

  1. OBS'de Kaynaklar altındaki + işaretine tıklayıp “Tarayıcı”yı seçin
  2. Kaynağınıza ad verip Tamam'a tıklayın
  3. Oturum kimliğiyle birlikte şablon URL'nizi yapıştırın
  4. Genişliği ve yüksekliği ayarlayın (önerilen: 1920×1080)
  5. Sahnenize eklemek için Tamam'a tıklayın

Şablonunuzu özelleştirin

Katmanınızı şu yollardan biriyle özel CSS kullanarak kişiselleştirin:

  • OBS Özel CSS: CSS'nizi Tarayıcı Kaynağı özelliklerine ekleyin
  • URL parametresi: Şunu ekleyin: &css=URL_TO_YOUR_CSS_FILE şablon URL'nize
  • Base64 CSS: Satır içi CSS için şunu kullanın: &b64css=YOUR_BASE64_ENCODED_CSS

🛠️ Kendi şablonunuzu yapın

Çalışan bir katmanla başlayın, ardından görünümünü değiştirin.

🎨 Görünümü değiştirin

OBS Tarayıcı Kaynağı kullanın Özel CSS renkler, aralıklar ve tipografi için. Orijinal SSN URL'sini ve bağlantısını koruyun.

📦 Bileşeninizi getirin

StreamElements sohbet bileşeni dışa aktarımınız mı var? StreamElements dönüştürücüsünü aç, önizleyin, ardından OBS HTML'sini indirin. Ekran görüntüsü veya katman URL'si yerine orijinal ZIP veya dosyaları kullanın. Aşağıdaki kuruluma bakın.

🧩 Davranışı değiştirin

Çalışan bir başlangıcı kopyalayın ve HTML, CSS ve JavaScript'ini düzenleyin. Hızlı başlangıç · Geliştirici kılavuzu · Etkinlik alanları

🔧 Dosyalar, yönlendirme ve test
  1. Kullanın: sampleoverlay.html birleştirilmiş sohbet için, featured-modern.html seçili mesajlar için veya multi-alerts.html etkinlikler için. Kaynağı ve gereken varlıkları şuradan indirin: beta deposu.
  2. Orijinal bağlantı kodunu koruyun. Sohbet ve öne çıkan katmanlar farklı akışlar alır; sohbet akışını biçimlendirmek onu seçili mesaj katmanı yapmaz.
  3. Başvurulan ortak betikleri, yazı tiplerini ve görselleri dosyanızın yanında aynı göreli yollarla tutun veya yapay zekânızdan kendi kendine yeterli dışa aktarım isteyin. Tek HTML dosyasını yeniden adlandırmak bağımlılıklarını paketlemez.
  4. Dosyalarınızı barındırın ve URL'lerini oturumunuz ve isteğe bağlı parolanızla kullanın. Kendi kendine yeterli yerel dışa aktarım için yapılandırma talimatlarını izleyin; OBS Yerel dosya seçeneğinde oturum parametreleri için URL alanı yoktur.
  5. Önce sahte verileri önizleyin, ardından kendi SSN oturumunuzla test edin. Seçili mesajları, temizlemeyi, uzun adları, görselleri ve şeffaf arka planları kontrol edin. Canlı kullanımda SSN'yi çalışır durumda tutun.

Tetikleyici tabanlı davranış için şununla başlayın: Etkinlik Akışı düzenleyicisi ve uyarı efekti kuralları yeni katman yazmadan önce.

✨ Yapay zekânız için istem kopyalayın

Bir başlangıç noktası seçin, istemi kopyalayın ve köşeli parantezli tasarım ayrıntılarını değiştirin. Yapay zekânız bağlantıları okuyamıyorsa kaynak dosyaları ekleyin. Özel oturum kimliğinizi ve parolanızı konuşmaya dahil etmeyin.

💬 Birleştirilmiş sohbet
⭐ Öne çıkan mesaj
🎉 Sesli uyarılar
🎨 Yalnızca CSS ile yeni görünüm

Daha karmaşık bir bileşen mi dönüştürüyorsunuz? Tam StreamElements / Streamlabs dönüştürme istemini kullanın.

Video eğitimi

Yapay zekâ yardımıyla özel sohbet katmanı oluşturmayı öğrenin

Videodan hızlı kılavuz

  1. Örnek katman şablonunu bulun (sampleoverlay.html)
  2. Şablon kodunu panonuza kopyalayın
  3. Özelleştirmeye yardımcı olması için Claude gibi bir yapay zekâ asistanı kullanın
  4. Yapay zekâdan CSS'yi tercih ettiğiniz stile göre değiştirmesini isteyin
  5. OBS'yi özelleştirilmiş şablonunuzu kullanacak şekilde yapılandırın
  6. Özel CSS'nizi OBS tarayıcı kaynağı ayarlarından uygulayın