Cara Membuat Widget QRIS di Blogger dapat Menambah Pemasukan

Daftar Isi

Tutorial membuat widget kontribusi dari pembaca dengan menambahkan QRIS yang akan dibuat di Blog Pribadi untuk menambah pundi-pundi penghasilan.

Dulu aku pernah membuat artikel mengenai widget donasi yang support trakteer atau saweria di blogger (Widget donasi di Blogger).

Apa itu QRIS? QRIS yaitu standar pembayaran berbasis QR code dan dikembangkan oleh Bank Indonesia (BI). Dengan QRIS, berbagai metode pembayaran digital meliputi GoPay, OVO, Dana, LinkAja, dan mobile banking dapat digunakan hanya dengan satu kode QR saja.

Kali ini aku share membuat QRIS pake nama blog pribadi yang cukup simple dalam pembuatannya.

Jadi ini tuh bagian dari ngejalanin thank you economy, yang digagas oleh Gary Vaynerchuk. Bisa juga disebut business modelnya Pay-What-You-Want (PWYW).

Kalau Bahasa sederhananya Uang Tip.

Meskipun bisnis yang model demikian jangan jadikan yang utama. Aku tetap menyarankan pake cara cara lain yang lebih menjanjikan dalam memonetize blog kamu.

Ada cara lain menempelkan kontribusi di blogger dengan produk google, seperti contoh artikel ini Kontribusi Reader Revenue Manager.

Bikin QRIS ini membuka peluang lain untuk menambah revenue dari blog. Ya, biar saling bermanfaat, kita bikin artikel yang berkualitas, bermanfaat, impactful dan solving.

Memberi kesempatan buat mereka yang ikut memberikan kontribusi. Makin banyak peluang yang kita ciptakan di blog, makin berpotensi memberikan pendapatan lebih banyak.

Yang penting fokus create value.

Cara Membuat Widget Kontribusi dengan QRIS di Blogger

1. Unduh GoPay Merchant di Playstore atau AppsStore.
   
   
   
   GoPay Merchant ini enaknya transaksi dibawah Rp.500rb, fee-nya 0%. Kalau diatas Rp.500rb, kena fee 0.3% umumnya itu 0.7%.
2. Setelah login gunakan nomor hp yang aktif. Selanjutnya verifikasi kode otp yang ada.
3. Isi informasi email kamu.
4. Lalu, foto e-ktp menggunakan kamera.
5. Pilih jenis pendaftaran pekerja individu.
6. Silahkan pilih jenis usaha (Digital dan Kreatif).
7. Untuk untuk nama usaha bisa kamu rubah dengan nama blog kamu, kalo aku pake bunghuda.id biar nanti dipasang diblog agar lebih kredibel.
8. Lokasi usaha, silahkan sesuaikan dengan lokasi di map kamu.
9. Detail Lokasi dan QRIS yang sudah dimiliki, kosongi saja.
10. Gak sampe 15 menit GoPay Merchant AKTIFFFF.

Hasilnya dari QRIS yang akan didownload akan seperti ini.

Untuk QRIS versi yang akan didownload tunggu sekitar 1-2 hari yang akan dikirim di Whatsapp dan email kamu.

Cara Memasang QRIS di Blogger

Silahkan upload dulu, gambar QRIS-nya di Postingan/Halaman blogger. Salin Url Gambar tersebut

Setelah selesai paste kode dibawah ini didalam template. Kamu dapat mencantumkan widget ini di bawah postingan setelah kode <data:post.body/></div> , untuk memunculkan setiap artikel yang akan kamu publish.

 <style>
    .btn-apresiasi {
        background-color: #e53935; /* Warna merah */
        color: white;
        padding: 14px 32px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        border-radius: 50px;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .btn-apresiasi:hover {
        background-color: #d32f2f;
        transform: scale(1.08);
    }

    #qrModal {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    #qrContent {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        position: relative;
    }

    #qrContent img {
        max-width: 250px;
        height: auto;
    }

    .closeQR {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 20px;
        cursor: pointer;
        color: red;
    }
</style>

<button class="btn-apresiasi" onclick="showQR()">Apresiasi Penulis</button>

<div id="qrModal">
    <div id="qrContent">
        <span class="closeQR" onclick="hideQR()">&times;</span>
        <p>Scan QRIS untuk apresiasi:</p>
        <img src="URL_GAMBAR_QRIS" alt="QRIS Apresiasi">
    </div>
</div>

<script>
    function showQR() {
        document.getElementById("qrModal").style.display = "flex";
    }

    function hideQR() {
        document.getElementById("qrModal").style.display = "none";
    }

    window.onclick = function(event) {
        var modal = document.getElementById("qrModal");
        if (event.target === modal) {
            hideQR();
        }
    };
</script>

Jangan lupa ubah URL_GAMBAR_QRIS nya dengan url gambar yang sudah diupload tadi.

Demo contohnya widget ini sebagai berikut.

dan Selesai,

Demikian cara membuat QRIS dan menempelkan di Blogger, semoga dari artikel ini dapat bermanfaat. Terima kasih telah berkunjung.