Cara custom overlay Alert SociaBuzz

Modified on Fri, 15 Aug at 8:08 PM

Anda bisa custom tampilan overlay Alert SociaBuzz sesuai keinginan, menggunakan HTML & CSS Anda sendiri, agar live stream Anda semakin menarik.

Cara custom tampilan overlay Alert SociaBuzz:

Login ke akun SociaBuzz Anda
Klik "Overlay Live Streaming" pada fitur TRIBE
Di halaman overlay "Alert", klik "Custom" (di sebelah kanan "Style 2")
Masukkan HTML & CSS Anda sendiri

HTML:

Di kolom HTML Anda bisa menentukan struktur HTML yang akan ditampilkan saat Alert muncul
Tersedia berbagai token yang akan otomatis terisi dengan data aktual saat Alert tampil

Token	Menampilkan Data	Contoh Data Aktual
{amount}	Uang yang diberikan pendukung	IDR100,000
{from_text}	Tulisan di antara jumlah uang & pendukung	dari
{supporter}	Nama pendukung	Budi Santoso
{message}	Pesan dari pendukung	Sukses selalu ya!
{media}	URL media Image/GIF	<img src="https://example.com/image.jpg" />

Contoh HTML:

<div class="alert">
  <img src="{media}" class="media" />
  <p class="template">
    <span class="wiggle">{amount}</span> <span class="from">{from_text}</span>
    <span class="wiggle">{supporter}</span>
  </p>
  <p class="message">{message}</p>
</div>

CSS:

Gunakan CSS untuk menyesuaikan tampilan sesuai keinginan. Anda bisa menyesuaikan font, warna, animasi, ukuran, dll.

Contoh CSS:

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap);
.alert {
    font-family: Open Sans !important;
    font-weight: 800;
    text-align: center;
    padding-top: 10px;
    text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000
}
.media {
    height: 100%;
    width: 100%;
 border-radius: 10px;
    margin-bottom: 14px
}

.template {
    font-size: 1.7rem !important
}

.wiggle {
    color: #0f0 !important;
    display: inline-block;
    animation: .5s infinite wiggle
}
.from {
    color: #eee !important
}
.message {
    line-height: 1.5;
    padding: 10px;
    font-weight: bolder !important;
    color: #ff0 !important;
    opacity: 1;
    font-size: 1.51rem !important
}



@keyframes wiggle {
    0%,
    100%,
    80% {
        transform: rotate(0)
    }
    85% {
        transform: rotate(5deg)
    }
    95% {
        transform: rotate(-5deg)
    }
}

Tips Penggunaan:

Gunakan token persis seperti di tabel (termasuk tanda kurung {})
Pastikan struktur HTML Anda valid
Gunakan animasi CSS untuk membuat tampilan lebih menarik
Lakukan "Test Alert" sebelum digunakan
Setelah update HTML & CSS, refresh cache di source Browser software streaming Anda