Kumpulan Widget Donasi Keren Ala Hendraws untuk Websitemu

Dalam dunia digital yang semakin berkembang pesat, banyak kreator konten, pengembang open source, hingga komunitas online membutuhkan dukungan finansial dari audiens setianya. Salah satu cara yang populer digunakan untuk mendapatkan dukungan tersebut adalah melalui widget donasi . Selain memberikan kemudahan bagi pendukung untuk berdonasi, widget donasi juga bisa menjadi elemen visual yang menarik di sebuah situs web atau platform online.

Sebagai seorang developer dan desainer UI/UX, saya (Hendraws) sering membuat widget-widget kecil yang fungsional namun tetap estetis. Salah satu koleksi yang cukup populer adalah widget donasi ala saya , yang banyak digunakan oleh teman-teman kreator konten, pengembang open source, hingga komunitas online.

Saya mulai membuat widget donasi ini karena melihat banyaknya permintaan dari teman dan pengunjung website saya yang ingin mendukung konten dan proyek saya secara finansial. Dengan tampilan minimalis, responsif, dan mudah dipasang, widget ini bisa langsung digunakan tanpa perlu coding berat.

Apa Itu Widget Donasi?

Widget donasi adalah elemen antarmuka dalam bentuk kode HTML/CSS/JavaScript yang bisa ditambahkan ke sebuah situs web untuk mempermudah proses penerimaan dukungan finansial dari audiens. Widget ini biasanya terhubung dengan layanan seperti:

• Ko-fi
• Trakteer
• Saweria
• PayPal
• Dana, OVO, GoPay, dll (melalui QRIS atau link)

Tujuannya adalah agar pengunjung website bisa langsung memberikan dukungan secara finansial tanpa harus meninggalkan halaman. Dan inilah beberapa widget donasi yang saya ciptakan sendiri agar sesuai dengan prinsip saya: simple, ringkas, dan elegan

Kenapa Menggunakan Widget Donasi ala Hendraws?

Beberapa tahun lalu, saya menyadari bahwa banyak widget donasi yang tersedia di internet terlihat “memaksa” atau tidak selaras dengan desain website modern. Maka saya pun mulai membuat widget donasi yang:

1. Tampilan minimalis dan profesional
2. Mudah disesuaikan sesuai brand warna
3. Ringan dan tidak membebani loading website
4. Responsif di semua perangkat
5. Gratis dan open source

Semua widget ini saya buat dan bagikan secara cuma-cuma di www.hendraws.com kamu bebas menggunakannya, bahkan memodifikasinya sesuai kebutuhanmu.

Rekomendasi Widget Donasi Keren dari Hendraws

Berikut beberapa rekomendasi widget donasi ala hendraws dan bisa langsung kamu pasang di website kamu:

1. Widget Donasi Minimalis (Trakteer/Saweria/Ko-fi/Dana)

HTML

<style> .hendraws-sidebar { background: #fff; border-radius: 16px; padding: 20px 16px; font-family: 'Segoe UI', sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,0.05); text-align: center; margin-bottom: 30px; position: relative; overflow: hidden; } .hendraws-sidebar h3 { font-size: 1.2em; margin-bottom: 16px; color: #222; font-weight: 600; } .hendraws-sidebar .donasi-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-bottom: 12px; padding: 10px 0; border-radius: 12px; font-weight: 600; font-size: 0.95em; text-decoration: none; color: #fff; transition: all 0.2s ease-in-out; } .hendraws-sidebar .donasi-button img { height: 24px; width: auto; margin-bottom: 4px; border-radius: 4px; } .hendraws-sidebar .donasi-button:hover { opacity: 0.9; transform: scale(1.02); } .donasi-trakteer { background: #f06292; } .donasi-kofi { background: #29abe0; } .donasi-saweria { background: #ff9800; } .donasi-dana { background: #007aff; } .hendraws-sidebar .footer { font-size: 0.75em; margin-top: 20px; color: #666; } .hendraws-sidebar .footer a { color: #007aff; text-decoration: none; font-weight: 500; } </style> <div class="hendraws-sidebar"> <h3>☕ Dukung Kami di Platform Favoritmu</h3> <a href="https://trakteer.id/namauser" target="_blank" class="donasi-button donasi-trakteer"> ❤️ <span>Trakteer</span> </a> <a href="https://ko-fi.com/namauser" target="_blank" class="donasi-button donasi-kofi"> <img src="https://ko-fi.com/LandingPageAssets/img/logomarkLogo2024.png" alt="Ko-fi" /> <span>Ko-fi</span> </a> <a href="https://saweria.co/namauser" target="_blank" class="donasi-button donasi-saweria"> <img src="https://saweria.co/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcapy_happy.603c7293.svg&w=384&q=75" alt="Saweria" /> <span>Saweria</span> </a> <div class="donasi-button donasi-dana" style="cursor: default;"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEVHcEwQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjukQjumtPBrXAAAAEXRSTlMADCYyRRxspuT/ucTYg/aRWrlBKbEAAADRSURBVHgBjZIJCsMwDARX8n3J/v9rWxkqgh2gA4RjstImNv6E2HnvOOCGY8rlS67RnS62YvQBxRhiSknh4WY5qGYRLWfMn/O53ERsaJYXGkNxz2BuNTXdIgtK3PX1IW2sQAhrbyWb6mJKwzOw0VlNC4ekEiCC0XUWq2wqzZgUZxLvktK7zGyFbrkLYT12ko9jRs6/T4HT9wYDwY+aRYuK/QToXOmtdTXnuWj0wILAypcc90UwEpk7szK3M3wSc3XhgPyoXSS3uQJeCOwcB8J/fADipg8gfu91sQAAAABJRU5ErkJggg==" alt="DANA" /> <span>082251517550</span> </div> <div class="footer"> Dibuat oleh <a href="https://www.hendraws.com">www.hendraws.com</a> </div> </div>

2. Widget Donasi Crypto

HTML

<style> .crypto-donation-widget{max-width:380px;margin:auto;padding:25px;background:#1d3c34;border-radius:6px;font-family:Roboto,Arial,sans-serif;animation:fadeIn 0.6s ease-in-out;}@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.crypto-donation-widget h3{color:#fbe282;text-align:center;margin-bottom:10px;}.crypto-donation-widget p.description{color:#fff;font-size:14px;text-align:center;margin-bottom:20px;}.crypto-donation-widget label{display:block;text-align:center;font-weight:bold;margin-bottom:6px;margin-top:12px;color:#fff;}.crypto-donation-widget select{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;margin-bottom:12px;font-size:14px;}.wallet-display{background:#f7eecb;padding:12px;border-radius:8px;text-align:center;word-wrap:break-word;font-family:monospace;color:#333;margin-top:10px;display:none;}.wallet-display img.qr{background:#fff;padding:10px;width:100px;margin:auto;margin-top:5px;display:block;border-radius:8px;}.wallet-display img{width:24px;}.copy-btn{width:100%;padding:8px;background:#333;color:white;font-size:14px;border:none;border-radius:6px;cursor:pointer;transition:background 0.3s ease;}.copy-btn:hover{background:#009688;}.lang-toggle{text-align:right;font-size:13px;cursor:pointer;color:#00bfa6;}.payment-tag{background:#333;color:#ffffff;padding:10px;border-radius:6px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;font-family:monospace;display:none;}.payment-tag span{flex-grow:1;color:#fff;}.copy-icon{cursor:pointer;background:none;border:none;color:#00bfa6;font-weight:bold;margin-left:10px;}.credit{font-size:12px;text-align:center;margin-top:16px;color:#ccece7;}</style> <div class="crypto-donation-widget"> <div class="lang-toggle" onclick="toggleLang()">EN / ID</div> <h3 id="title">Dukung Kami Lewat Crypto</h3> <p class="description" id="desc">Jika Anda menyukai konten kami, bantu dengan donasi crypto agar kami bisa terus berkembang!</p> <label for="crypto" id="labelCrypto">Pilih Cryptocurrency</label> <select id="crypto" onchange="showWallet()"></select> <div id="wallet" class="wallet-display"></div> <div id="memo" class="payment-tag"> <span id="memoValue"></span> <button class="copy-icon" onclick="copyMemoTag()">📋</button> </div> <div class="credit">Terima kasih atas dukungan Anda!<br />© <a href="https://www.hendraws.com" target="_blank" style="color:inherit;text-decoration:none">www.hendraws.com</a></div> </div> <script> const langs = { id: { title: "Dukung Kami Lewat Crypto", desc: "Jika Anda menyukai konten kami, bantu dengan donasi crypto agar kami bisa terus berkembang!", labelCrypto: "Pilih Cryptocurrency" }, en: { title: "Support Us with Crypto", desc: "If you like our content, support us with a crypto donation to help us grow!", labelCrypto: "Choose Cryptocurrency" } }; let currentLang = 'id'; function toggleLang() { currentLang = currentLang === 'id' ? 'en' : 'id'; const text = langs[currentLang]; document.getElementById('title').innerText = text.title; document.getElementById('desc').innerText = text.desc; document.getElementById('labelCrypto').innerText = text.labelCrypto; } const wallets = { btc: { name: "Bitcoin (BTC)", address: "1GTKmGXGWtUaeVbRz9UBSese5uxWR3rShH", logo: "https://bestfaucetsites.com/assets/img/coins/bitcoin.svg" }, xrp: { name: "Ripple (XRP)", address: "rhi77L73jGvGN3zQf3AEbYnjWYZu7CSTe8", memo: "7408387", logo: "https://cdn.faucetpay.io/coins/xrp.png" }, usdt: { name: "Tether (USDT)", address: "TQxHjBCQ8tczanermjW8PLLZogrJxK2cM4", logo: "https://bestfaucetsites.com/assets/img/coins/tether.svg" }, xlm: { name: "Stellar (XLM)", address: "GDAEZBKKPVVEBPDFSY6WMQ7Y4C7FYCS6CYODNURRN4EZIGTMNKKROESG", memo: "7408387", logo: "https://cdn.faucetpay.io/coins/xlm.png" }, doge: { name: "Dogecoin (DOGE)", address: "DAqWtx8X1w5edoWjTiSouY6vhpwTreiz4p", logo: "https://bestfaucetsites.com/assets/img/coins/dogecoin.svg" } }; window.onload = () => { const cryptoSelect = document.getElementById('crypto'); cryptoSelect.innerHTML = '<option value="">-- Pilih --</option>'; for (let key in wallets) { let opt = document.createElement('option'); opt.value = key; opt.innerText = wallets[key].name; cryptoSelect.appendChild(opt); } } function showWallet() { const selected = document.getElementById('crypto').value; const walletBox = document.getElementById('wallet'); const memoBox = document.getElementById('memo'); if (wallets[selected]) { const qr = `https://api.qrserver.com/v1/create-qr-code/?data=${wallets[selected].address}&size=150x150`; walletBox.style.display = 'block'; walletBox.innerHTML = `<img src="${wallets[selected].logo}" alt="logo"> ${wallets[selected].address}` + `<img class='qr' src='${qr}' alt='QR Code'>` + `<br><button class='copy-btn' onclick='copyWallet()'>Salin Alamat Wallet</button>`; if (wallets[selected].memo) { memoBox.style.display = 'flex'; document.getElementById('memoValue').innerText = wallets[selected].memo; memoBox.querySelector('button').setAttribute('onclick', `copyMemo("${wallets[selected].memo}")`); } else { memoBox.style.display = 'none'; } } else { walletBox.style.display = 'none'; walletBox.innerHTML = ''; memoBox.style.display = 'none'; } } function copyWallet() { const selected = document.getElementById('crypto').value; if (wallets[selected]) { navigator.clipboard.writeText(wallets[selected].address); alert('Alamat wallet berhasil disalin!'); } else { alert('Silakan pilih cryptocurrency terlebih dahulu.'); } } function copyMemo(memo) { navigator.clipboard.writeText(memo); alert('Memo/Tag berhasil disalin!'); } </script>

Cara Memasang Widget Donasi di Website

1. Pilih widget yang sesuai dengan kebutuhan kamu.
2. Salin kode HTML/CSS/JS dari widget tersebut.
3. Tempelkan di bagian sidebar website kamu.
4. Ganti URL tujuan donasi sesuai dengan akun kamu.
5. Simpan dan cek tampilannya!

Tips Memilih Widget Donasi yang Baik

• Pastikan tampilannya selaras dengan tema website kamu.
• Gunakan font dan warna yang mudah dibaca.
• Jangan terlalu mencolok sehingga mengganggu pengalaman pengguna.
• Sertakan deskripsi singkat jika perlu, misalnya "Bantu saya tetap eksis dengan berdonasi."

Penutup

Itulah kumpulan widget donasi keren yang saya ciptakan sebagai Hendraws. Semoga widget-widget ini bisa membantu kamu, baik sebagai kreator konten, developer, maupun siapa pun yang ingin memberikan opsi donasi di website kamu.

Semoga artikel ini bermanfaat dan menginspirasi kamu untuk mulai menambahkan widget donasi yang keren di website kamu!