About

Tingkatkan pengalaman donasi Anda dengan Saweria Custom Overlay Donation Alert! Ubah tampilan dan pesan donasi secara kreatif, sampaikan apresiasi secara real-time, dan buat pengalaman donasi yang tak terlupakan. Coba sekarang dan berikan sentuhan khusus pada setiap donasi yang masuk!

Need Support ? Join Our Server

Documentation

• Setup
  • Saweria
  • Tema
  • OBS
• List Tema
• Configuration
  • Background Images
  • Custom Mascot
  • Custom Text
  • Custom Color
• Miscellaneous
  • Theme Requests
  • Commission
  • Feature Requests
  • Contributing

Installation

Berikut merupakan cara menggunakan Custom Overlay Saweria

Video : Tonton Video Tutorial Di Youtube

Setup Custom Overlay Saweria

[+] Saweria

1. Cara akses Custom Overlay Saweria

Buka halaman pengaturan overlay saweria pada tabs "Alert" Cari dan klik custom pada ujung kanan atas dialog Tampilan seperti gambar diatas

[+] Tema

2. Pilih tema Custom Saweria Overlay pada Theme Preview
3. Klik pada nama tema yang akan digunakan

4. Klik File index.html Dan Copy / Salin seluruhnya atau mulai dari <div> sampai </div>

Kemudian Paste / Tempel pada kolom HTML di halaman pengaturan overlay saweria ( Jika kolom HTML tidak kosong , Harap kosongi terlebih dahulu / Replace saja dengan yang telah anda Copy / Salin )

5. Klik File style.css Copy / Salin seluruhnya kemudian Paste / Tempel pada kolom CSS di halaman pengaturan overlay saweria
6. Pada kolom Durasi Notifikasi (ms) isikan minimal 10000 ( 10 detik)
7. Klik Simpan Tampilan & Custom Saweria Overlay anda siap digunakan

[-] Tambahan ( Animasi )

1. Buka Folder Animation
2. Pilih Tipe Animasi
   • Container ( Keseluruhan Overlay )
   • Text ( Hanya Text nya Saja )
3. Klik File Model Animasi Yang Di Inginkan
4. Copy / Salin Seluruhnya Kemudian Paste / Tempel pada kolom CSS di halaman pengaturan overlay saweria ( Paste / Tempel dibawah CSS tema [ Jangan di Replace ] )

[+] Setup OBS / SL OBS ( WAJIB )

MINIMUM - Source Properties [ Width - 1000 px ] & [ Height - 600 px ]
RECOMMENDED - Source Properties [ Width - 1920 px ] & [ Height - 1080 px ]

Setelah merubah tampilan overlay , single click pada browser source Overlay Saweria di OBS dan tekan Refresh atau double click dan tekan Refresh cache of current page .

Jika tidak tampil, pastikan OBS telah terupdate ke versi terbaru (v28).

Theme Preview

Anya Peeking | GIF

Anya Waku | GIF

Azusa

Emilia

Gojo | GIF

JDM

Mio

Mugi

Nezuko | GIF

Osakana | GIF

Rem

Ritsu

Sakura

Yui

Submit Your's

Configuration

Background Images

Anda dapat mengubah background Overlay anda

1. Cari bagian berikut pada file index.html

    <div class="container">
        <img alt="Background Image" src="https://domain.com/image.jpg" class="background-img">

        <!-- code -->
    </div>

2. Silahkan Replace url pada bagian src=" Taruh URL Gambar Background Anda Disini "

Custom Mascot

1. Cari bagian berikut pada file index.html

    <div class="container">
        <!-- code  -->

            <div class="mascot">
                <img src="https://domain.com/image.jpg">
            </div>
        
        <!-- code -->
    </div>

2. Silahkan Replace url pada bagian src=" Taruh URL Gambar Mascot Anda Disini "

Custom Text

1. Cari bagian berikut pada file index.html

    <div class="container">
        <!-- code -->

            <div class="text">
                <p>
                    <span class="amount">{amount}</span>
                    Dari 
                    <span class="donator">{donator}</span>
                </p>
                <p>
                    <span class="message">
                        {message}
                    </span>
                </p>

        <!-- code -->
    </div>

2. Anda dapat merubah teks yg tidak berada di dalam <span> - </span> sesuai dengan keinginan anda .

Note* berikut beberapa token yang disediakan oleh Saweria untuk teks yang berada di dalam <span> - </span>

• {media}
• {message}
• {donator}
• {amount}

Custom Color

1. Cari bagian berikut pada file style.css

    :root {
        --amount: rgb(223, 168, 102);
        --donator: rgb(223, 168, 102);
        --text: #ffffff;
    }

2. Ubah dengan warna yang sesuai dengan keinginan anda. Gunakan Color Conversion jika anda tidak mengetahui code warna. Anda dapat menggunakan semua konversi yang ada pada web tersebut. ( disarankan menggunakan HEX Color )

Miscellaneous

Soon

Commission

Ingin memiliki tema pribadi yang sesuai dengan keinginan anda ? Silahkan untuk submit commission request.

Theme Requests

Tidak menemukan overlay dengan tema keinginan anda ? Silahkan untuk submit theme request anda di

• Discord
• Github

Feature Requests

Anda memiliki saran fitur untuk Repository ini ? Silahkan untuk submit feature request.

Contributing

Repository ini dibuka untuk umum , Anda dapat berkontribusi juga pada Repository ini.
Informasi lebih lanjut bisa ditanyakan via Discord