Cara Membuat Tombol Donasi Untuk Kreator Di Blog

Tombol donasi adalah widget tambahan untuk menumpulkan uang dari hasil donasi para pembaca, hal ini di tujukan untuk para pembaca yang ingin berdonasi pada kreator sebagai bentuk dukungan agar terus membuat konten bermanfaat lainnya.

Beberapa content creator lainnya juga memanfaatkan kotak donasi sebagai penghasilan tambahan dari setiap karya yang dibuatnya. Ini sangat penting menurut saya, tidak hanya sebagai penghasilan tambahan tapi juga berguna sebagai hiasan pada website.

Mungkin saja ada orang yang ingin berdonasi karna artikel yang kita tulis sangat bermanfaat bagi pembaca, namun orang tsb bingung harus melalui apa mendonasikannya. Dengan widget ini pembaca bisa dengan mudah melakukan donasi melalui website Trakteer.

Cara Membuat Widget Tombol Donasi Melalui Trakteer

Disini kita akan membuat tombol donasi melalui website trakteer yaitu salasatu platform yang membantu kreator untuk memonetisasi karya dan menerima donasi sebagai bentuk apresiasi dari penikmat karyanya.

Untuk membuat widget donasi ini silahkan registrasi terlebih dahulu di website Trakteer, kemudian lengkapi semua formulir yang disediakan oleh Trakteer. Seperti nama, link sosmed, username, dll. Hal ini agar kita dapat mengguakan layanan Trakteer.

Contoh halaman trakter punya saya: https://trakteer.id/zidansec

Jika halaman Trakteer sudah jadi, dan dapat diakses oleh publik. Sekarang kita buat tombol donasinya, klik tombol menu yang bertulisan "Website Embeds" kemudian seting konfigurasinya persis seperti pada gambar dibawah ini, atau juga bisa kalian seting sesuka kalian.

Jika konfigurasi sudah selesai diseting, selanjutnya salin code yang ada pada kolom "HTML Code" yang ada di bawah dan pasangkan pada widget blogger. Klik menu "Tata Letak" > "Tambahkan Widget", pada bagian ini setiap template pasti memiliki tampilan yang berbeda. Jadi sesuaikan saja untuk posisi pemasangan tombolnya.

Klik "Simpan", sekarang kita cek pada blog kita apakah sudah terpasang dengan benar atau tidak tombolnya. Untuk demo pasa blog saya bisa kalian lihat pada bagian samping sebelah kanan jika dilihat melalui mode Desktop di komputer/pc, jika pada tampilan mobile akan terlihat di bagian bawah.

Cara Memasang Stream Overlay Trakteer Di Blog

Jika pemasangan widget tombol donasi sudah selesai, sekarang tinggal kita memasang Push Notifnya. Apa fungsinya? hal ini di tujukan untuk menampilkan para donasi melalui notifikasi pada website kita sebagai ucapan terimakasih.

Pada tutorial ini, kita akan sedikit memodifikasi template blog dengan menambahkan beberapa code CSS dan JS di bawah ini, Jadi sebelum melakukan modifikasi sebaiknya kalian Backup dulu template blog untuk menghindari kesalahan dalam memodifikasi sehingga template akan menjadi berantakan.

Salin code di bawah ini, lalu letakan code tsb tepat di bawah code <head> pada template kalian.

<link rel="stylesheet" type="text/css" href="https://cdn.trakteer.id/css/awnotify.min.css">

Salin juga code CSS di bawah ini, kemudian tempelkan tepat di bagian code ]]></b:skin> 


/* AWN - Awesome Notification By Zidansec */

/* Tip Wrapper */

@font-face {
    font-family: 'kingthings';
    src: url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.eot');
    src: url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.eot?#iefix') format('embedded-opentype'), url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.svg#kingthings') format('svg'), url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.woff2') format('woff2'), url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.woff') format('woff'), url('https://trakteer.id/fonts/kingthings_clarity1.1-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.text-primary {
    color: #be1e2d;
}

.awn-toast-tip .awn-toast-wrapper {
    font-family: var(--fontFamily), 'sans-serif';
}

#awn-toast-container {
    pointer-events: none !important;
    z-index: 9 !important;
}

.awn-toast {
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.07);
}

.awn-toast-tip .awn-toast-label {
    color: #be1e2d !important;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.awn-toast-tip .awn-toast-progress-bar:after {
    background: #be1e2d !important;
}

.awn-toast-tip .awn-toast-wrapper {
    border: 2px solid #be1e2d !important;
    color: #000;
    background: #fff;
    padding-right: 16px;
}

.awn-toast-content {
    margin-right: 55px;
    line-height: 1.5em;
}

#awn-toast-container.awn-top-left .awn-toast:first-child,
#awn-toast-container.awn-top-right .awn-toast:first-child {
    margin-top: 0px !important;
}

/*.awn-toast-icon { display: none; }*/

Kemudian kembali lagi ke halaman dashboard Trakteer.id dan pada bagian menu klik tombol "Stream Overlay" setelah itu masuk ke bagian "Setting" dan akan terdapat "Stream Key", key ini nanti akan kita gunakan pada code JS yg sudah saya sediakan.

Selanjutnya salin juga code Java Script di bawah ini, sebelumnya ganti dulu bagian yg saya tandai pada code di bawah ini dengan "Key Stream" milik kalian. Lalu letakan code tsb tepat di atas code </body> pada template kalian. 


<script src="https://trakteer.id/js/trakteer-stream.js"></script>
<script src="https://cdn.trakteer.id/js/awnotify.min.js"></script>
<script src="https://assets.trakteer.id/js/webfont.js"></script>
<script>
    var setTheme = function (prop, value) {
        document.documentElement.style.setProperty(prop, value);
    };
    setTheme('--fontFamily', 'kingthings');
    var tipCounter = 0;
    var audioAlert = new Audio('https://cdn.trakteer.id/audio/alert.mp3');
    var delayDuration = 1000;
    var showDuration = 7000;
    window.notifier = new AWN({
        position: "bottom-right",
        maxNotifications: 1,
        durations: {
            global: showDuration
        },
        icons: {
            prefix: "<span class='icon icon-lg icon-",
            suffix: "'></span>",
            info: "info-large bg-secondary",
            success: "tick bg-success",
            warning: "warning bg-warning",
            alert: "warning",
            async: "cog-outline",
            confirm: "warning"
        }
    });
    var tipsQueue = [];
    var isAnimating = false;

    function escapeHtml(text) {
        return text.replace(/</g, "&lt;").replace(/>/g, "&gt;")
    };

    function getAudioAlertDuration() {
        return audioAlert.duration * 1000;
    }

    function playAudioAlert() {
        audioAlert.play();
        if (getAudioAlertDuration() > showDuration) {
            setTimeout(function () {
                audioAlert.pause();
                audioAlert.currentTime = 0;
            }, showDuration);
        }
    }

    function spawnNotifier(data) {
        var messageBody = 'Baru saja mentraktir <span class="text-primary">' + data['quantity'] + ' ' + escapeHtml(
            data['unit']) + '</span> senilai <span class="text-primary">' + data['price'] + '</span>';
        window.notifier.tip(messageBody, {
            labels: {
                tip: '<img src="' + data['supporter_avatar'] +
                    '" width="30px" style="min-width: 30px; margin-right: 10px; border-radius: 9999px" /> ' +
                    escapeHtml(data['supporter_name'])
            },
            icons: {
                prefix: "<img width='50px' src='" + data['unit_icon'] + "'",
                suffix: "/>"
            }
        });
        playAudioAlert();
        tipCounter++;
        setTimeout(function () {
            isAnimating = false;
            if (tipsQueue[0]) {
                isAnimating = true;
                showNotification();
            }
        }, showDuration + delayDuration);
    };

    function showNotification() {
        spawnNotifier(tipsQueue[0]);
        tipsQueue.splice(0, 1);
    }; /****************/ /* PREVIEW MODE */ /****************/ /***********/ /* Init JS */ /***********/
    var hasInitialized = false;
    var init = function () {
        hasInitialized = true;
        window.Echo.channel('creator-stream.n8rx3lmdanb4wamg.trstream-xxxxxxxxxxxxxxxxxxxx').notification(
            function (data) {
                if (data.type === 'new-tip-success' || data.type === 'new-tip-replay') {
                    tipsQueue.push(data);
                    if (!isAnimating) {
                        isAnimating = true;
                        showNotification();
                    }
                }
            });
        window.Echo.channel('creator-stream-test.n8rx3lmdanb4wamg.trstream-xxxxxxxxxxxxxxxxxxxx').notification(
            function (data) {
                if (data.type === 'new-tip-simulation') {
                    tipsQueue.push(data);
                    if (!isAnimating) {
                        isAnimating = true;
                        showNotification();
                    }
                }
            });
    };
    audioAlert.addEventListener("loadedmetadata", function () {
        if (!hasInitialized) {
            init();
        }
    });
    audioAlert.addEventListener("error", function () {
        if (!hasInitialized) {
            init();
        }
    });
</script>

Sekarang tinggal kita coba apakah Stream Overlay berfungsi dengan baik atau tidak, kembali lagi ke halaman dashboard tadi pada bagian "Stream Overlay" klik tombol "Notifikasi" dan akan terdapat tombol dengan tulisan "Sand Test Message" klik tombol tsb. Kemudian cek blog kamu, apakah muncil notifikasi atau tidak? jika muncul berarti pemasangannya sudah benar.

Contoh Notifikasi

Itulah tadi, tutorial cara membuat tombol donasi dan membuat stream overlay atau push notif di blog. notifikasi ini akan muncul secara otomatis ketika ada seseorang yang melakukan donasi saja, berarti notif ini tidak akan muncul jika tidak ada orang yang berdonasi. Sehingga tidak begitu mengganggu pengunjung blog kalian.

Cara Membuat Tombol Donasi Untuk Kreator Di Blog