Cara Membuat Tombol Donasi Untuk Kreator Di Blog

Disini kita akan bahas cara membuat tombol donasi melalui website trakteer yaitu salasatu platform yang membantu kreator untuk memonetisasi karyanya.

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.

Pembelian

Cara Membuat Tombol Donasi Untuk Kreator Di Blog
Rp. 20rb / $2
*Pembelian dapat melalui Gopay, OVO dan lainnya detail info

Metode pembayaran

Bank Transfer Paypal
sudah membayar? konfirmasi di sini
IT Security, content creator, menulis di blogger sejak tiga tahun yang lalu.

6 komentar

  1. https://i.imgur.com/gF9xNZY.png
    Demo dari tombol donasinya kira-kira akan terlihat seperti ini guys
    1. https://i.imgur.com/ygwVOCl.pngDan ini adalah tampilan ketika tombol donasinya di klik, akan muncul pop-up untuk berdonasi.
  2. Bang cara bikin tabel judul deskripsi, features, download yang kotak itu dong
    1. Kalo masnya make tema median ui 1.5 juga boleh di coba download ini https://anonfiles.com/j4DcefGaxd/download-post_html
    2. Ini code CSS buat table boxnya.


      /* material design box */
      .zidan{background:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
      .zidan h2 {background:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
      .zidan.box-yellow h2{background:#e2c601}
      .zidan.box-blue h2{background:#1836b9}
      .zidan.box-red h2{background:#f74417}
      .Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
      .darkMode .zidan{background:#2d2d30;border:unset;}
  3. Unknown
    Komentar ini telah dihapus oleh administrator blog.
Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
© subangXploits. All rights reserved. Premium By Raushan Design