Cara Membuat Overlay Kustom

✨ Bikin Tampilan Spesial Overlay-mu, Yuk!

Overlay kustom adalah fitur yang memungkinkan kamu menampilkan HTML kreasimu sendiri ke dalam tampilan overlay. Ini sangat cocok untuk menampilkan pesan personal, efek animasi, atau elemen branding sesuai gaya kamu!

Tapi, sebelum kita mulai, ada beberapa hal kecil nih yang perlu kita tahu biar hasilnya nggak cuma keren tapi juga lancar jaya

💡 Apa Saja Jenis Overlay yang Biasanya Ada?

Selain Custom Overlay yang bisa kamu desain bebas, ada juga beberapa jenis overlay standar yang sering dipakai. Kamu bisa mengkustomisasi tampilan mereka juga:

Notifikasi Donasi (Alert): Ini pop-up yang muncul saat ada orang berdonasi. Biasanya isinya ucapan terima kasih, nama donatur, dan jumlah donasinya.
MediaShare: Fitur ini memungkinkan penonton berbagi konten media (gambar atau video) ke layar streamer.
Leaderboard: Papan peringkat yang menampilkan siapa saja top donatur atau top subscriber dalam periode tertentu.
QR Code: Menampilkan kode QR di layar agar penonton bisa langsung scan untuk tujuan tertentu (misal: link donasi, sosmed).
Timer: Menampilkan hitung mundur atau hitung maju waktu di layar. Berguna untuk countdown event atau durasi sesi.
Soundboard: Tombol-tombol suara yang bisa kamu klik untuk mengeluarkan efek suara tertentu di stream.
Milestone: Menampilkan target pencapaian (misal: target donasi, target subscriber) yang sedang kamu kejar.
Polling: Fitur untuk membuat voting atau jajak pendapat di layar yang bisa diikuti penonton.
Running Text: Teks berjalan yang menampilkan informasi penting atau pesan di bagian bawah layar.
Gacha: Fitur interaktif yang biasanya dipakai untuk undian berhadiah atau efek kejutan saat ada dukungan.

✍️ Tips Menulis Kode HTML yang Benar Biar Rapi

Biar custom overlay kamu tampil sempurna dan nggak bermasalah, ada beberapa panduan simpel yang perlu diperhatikan:

✅ Pakai kode HTML yang standar: Selalu mulai dengan <html>, <head>, dan <body> ya.
✅ Jangan pakai position: absolute di CSS: Ini penting\! Kode ini bisa bikin overlay kamu "terbang" ke mana-mana dan nggak pas di tempatnya, apalagi dia nggak bisa otomatis diatur ukurannya.
✅ Gunakan ukuran yang fleksibel (px, rem, em): Untuk ukuran tulisan atau kotak, pakai px (pixel) atau satuan lain yang fleksibel kayak rem/em. JANGAN pakai vh atau vw, karena ini bisa bikin tampilan jadi aneh di berbagai layar dan mengganggu pengaturan ukuran otomatisnya.
✅ Fokus pada desain visual: Custom overlay ini paling jago buat nampilin tulisan atau gambar. Dia nggak bisa menjalankan kode JavaScript yang rumit, jadi fokus aja ke desain visual yang menarik dan ringan.

📦 Informasi Apa Saja yang Bisa Kita Tampilkan?

Kamu bebas banget mau menampilkan teks, gambar, atau bahkan informasi yang sudah tersedia secara otomatis dari sistem. Jadi, nggak perlu ngetik manual setiap kali ada data baru\! Ini dia daftar "variabel" (data otomatis) yang bisa kamu gunakan:

Nama Variabel Otomatis	Contoh Informasi yang Akan Muncul
`{{amount}}`	Jumlah donasi dalam bentuk angka (misal: 15000)
`{{formattedAmount}}`	Jumlah donasi yang sudah rapi diformat (misal: Rp15.000)
`{{message}}`	Pesan dari si pemberi dukungan
`{{gifterName}}`	Nama dari orang yang memberi dukungan
`{{gifterPicture}}`	Link gambar profil si pemberi
`{{gifterBadges}}`	Daftar badge pemberi (dipisahkan koma)
`{{isGifterVerified}}`	Status verifikasi pemberi (`true` atau `false`)

Contoh penerapannya dalam kode HTML:

<p>Terima kasih banyak, {{gifterName}}! 🎉</p>
<p>Anda baru saja memberikan {{formattedAmount}}</p>
<p>"{{message}}"</p>

Dengan pakai variabel ini, informasinya bakal terisi otomatis, bikin overlay kamu jadi lebih dinamis tanpa perlu update manual\!

🌟 Tips Tambahan Biar Overlay Kamu Makin Kece!

🎨 Mainkan warna latar belakang: Pilih kombinasi warna yang kontras dengan tulisan biar gampang dibaca, tapi tetap enak dilihat.
🧼 Kasih padding: Beri sedikit "ruang napas" di dalam kotak overlay (misal: padding: 16px;). Ini bikin kontenmu nggak terlalu mepet ke pinggir dan terlihat lebih rapi.
🖼️ Sertakan gambar profil pemberi dukungan: Kalau bisa, tampilkan foto profil dari orang yang memberi dukungan. Ini akan menambah sentuhan personal yang hangat pada pesanmu.
✨ Manfaatkan emoji: Emoji bisa membuat pesanmu terasa lebih hidup, ekspresif, dan ceria\!

📝 Contoh Kode HTML Sederhana yang Bisa Langsung Dipakai

Ini dia contoh kode HTML yang bisa kamu jadikan inspirasi atau langsung kamu coba:

<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      color: white;
      background: none; /* Penting agar transparan */
    }
    .container {
      padding: 16px;
      background: #222; /* Latar belakang gelap */
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sedikit bayangan biar menonjol */
    }
    h2 {
      margin-top: 0;
      color: #FFD700; /* Warna highlight */
    }
    p {
      margin-bottom: 5px;
    }
    .message-text {
      font-style: italic;
      color: #CCCCCC; /* Warna sedikit abu-abu untuk pesan */
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>🎉 Terima kasih banyak, {{gifterName}}!</h2>
    <p>Anda baru saja memberikan {{formattedAmount}}</p>
    <p class="message-text">"{{message}}"</p>
  </div>
</body>
</html>

Kode ini akan menghasilkan sebuah kotak dengan latar belakang gelap, tulisan berwarna putih dan sedikit highlight, sudut yang membulat, dan semua teks akan terpusat. Pesan dari pemberi dukungan juga akan ditampilkan dengan gaya tulisan miring dan warna yang sedikit berbeda.

🚫 Hal-Hal Penting yang Sebaiknya Dihindari

🚫 Jangan pakai vh, vw, atau position: absolute: Ini bisa bikin tampilan rusak atau nggak bisa diatur ukurannya otomatis.
🚫 Jangan menyisipkan kode JavaScript yang rumit: Lingkungan ini lebih fokus ke HTML dan CSS, JavaScript yang terlalu kompleks nggak akan jalan.
🚫 Hindari desain yang terlalu besar atau berat: Jaga agar overlay tetap ringan supaya cepat muncul dan nggak bikin stream kamu jadi lemot.
🚫 Jangan sertakan tombol atau formulir: Custom overlay cuma buat nampilin informasi, bukan buat interaksi langsung.

ℹ️ Catatan Penting untuk Info Kamu

Kadang, overlay kamu mungkin muncul dengan label tambahan seperti ini. Ini normal kok, fitur dari sistemnya:

"⚠ Ini adalah pesan uji coba": Akan muncul kalau kamu lagi preview atau tes overlay.
"ℹ️ Pemutaran Ulang Hadiah": Akan muncul kalau kamu melihat kembali overlay dari riwayat dukungan.
"⛔ Dikirim oleh Admin": Akan muncul kalau pesan overlay itu dikirim dari admin platform.

Label-label ini muncul otomatis dan kamu nggak perlu melakukan apa-apa. Fokus aja pada desain utama overlay kamu.

✅ Siap Mencoba? Ini Dia Langkah-Langkahnya!

Prosesnya gampang banget kok. Ikuti langkah-langkah di bawah ini:

Buka Dashboard Kreator Anda: Pertama, silakan login ke dashboard atau platform tempat Anda biasa mengelola konten.
Pilih Menu "Overlays": Di bagian menu samping atau utama, cari dan klik opsi "Overlays".
Pilih Jenis Overlay yang Mau Dikustomisasi: Akan ada daftar pilihan jenis overlay (misalnya: Alert, Leaderboard, dll.). Klik pada jenis overlay yang ingin kamu ubah, contohnya "Alert" jika kamu ingin mengkustomisasi notifikasi donasi.
Ubah Tema Menjadi "Custom HTML": Setelah masuk ke halaman pengaturan overlay tersebut, kamu akan menemukan bagian "Tema". Klik dropdown yang ada, lalu pilih opsi "Custom HTML".
Tempel Kode HTML Anda: Sebuah area teks kosong akan muncul di bawah label "Custom HTML". Nah, di sinilah kamu menempelkan seluruh kode HTML yang sudah kamu siapkan.
Lihat Pratinjau Hasilnya!: Setelah menempelkan kode, kamu bisa scroll ke atas atau mencari tombol "Preview" untuk melihat langsung bagaimana overlay kamu akan terlihat. Ini kesempatanmu buat memastikan semuanya sudah sesuai keinginan.

🎉 Ingat, sentuhan yang simpel dan personal seringkali justru memberikan kesan yang paling mendalam. Selamat mencoba dan semoga berhasil dalam berkreasi! 💖

Diperbarui pada: 02/07/2025

Apakah artikel ini berguna?

Terima kasih!