Tombol Donasi Canggih, Responsif di Semua Perangkat & SEO
Konten Premium Warkasa1919
Akses Lifetime • Script Eksklusif • Tutorial Langka • Fiksi
Premium Lifetime Access dengan fitur rutin update.
Cara Pembayaranπ Per Artikel — Rp25.000 (Satu artikel)
Di era konten digital, memberikan opsi tombol donasi merupakan fitur penting untuk mendukung kreator, penulis, atau layanan premium di website. Di Warkasa1919.com, tombol donasi tidak hanya berfungsi sebagai dukungan, tetapi juga sebagai akses premium, berlangganan, dan dukungan komunitas.
Artikel ini membahas cara memasang tombol donasi yang canggih, responsif, cepat, dan SEO-ready, khusus untuk website Warkasa1919.com dan platform Blogger.
Keunggulan Tombol Donasi Ini
-
✅ Responsif di semua perangkat
-
✅ SEO Friendly (menggunakan link berkualitas & CTA kuat)
-
✅ Ringan & cepat (tanpa library tambahan)
-
✅ Animasi modern
-
✅ Cocok untuk pembayaran:
-
Bank transfer
-
E-Wallet (DANA, OVO, GoPay, ShopeePay)
-
QRIS
-
PayPal
-
Masukkan password untuk melanjutkan.
Kode Tombol Donasi Premium Elegan
Tampilan Emas Mewah (Gold Premium Button)
Tinggal paste ke Blogger → Tema → Edit HTML → di dalam
<body>
<style>
.donate-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, #000000, #a67c00);
color: #fff;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(166, 124, 0, 0.5);
transition: .3s ease;
}
.donate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 14px rgba(255, 215, 0, 0.7);
}
.donate-btn svg {
width: 18px;
height: 18px;
}
</style>
<a href="https://wa.me/628xxxxx?text=Halo%20saya%20ingin%20donasi%20untuk%20Warkasa1919"
class="donate-btn"
title="Dukung Website Ini">
<svg fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1..."/></svg>
Dukung Kami
</a>
π Ubah nomor WhatsApp sesuai format Warkasa1919
Contoh CTA SEO-Friendly
Gunakan kalimat ajakan yang tepat:
Dukung Warkasa1919 untuk terus menghadirkan konten premium, tutorial teknik, dan teknologi yang bermanfaat.
Klik tombol donasi untuk berkontribusi & buka akses konten eksklusif.
Integrasi ke Rekening & QRIS
Rekomendasi link tombol donasi:
| Metode | Tautan |
|---|---|
| QRIS | https://link.qris.id/anda |
| DANA | https://link.dana.id/minta |
| PayPal | https://paypal.me/username |
| WA Order | https://wa.me/62xxxxxx?t=Donasi%20Warkasa1919 |
Versi Floating Button (Melayang)
Ingin tombol selalu muncul?
<style>
#donate-float {
position: fixed;
bottom: 18px;
right: 18px;
z-index: 9999;
}
</style>
<div id="donate-float">
<a class="donate-btn" href="https://wa.me/628xxxxx?text=Donasi%20Warkasa1919">
π Donasi
</a>
</div>
Tips SEO untuk Tombol Donasi
| Teknik | Penjelasan |
|---|---|
| Gunakan title & alt | memperkuat keyword dukungan situs |
| Sisipkan CTA natural | “Dukung kami” “Support konten ini” |
| Tempatkan di artikel penting | Home, Premium, Footer |
| Gunakan warna kontras | agar CTR tinggi |
| Optimasi kecepatan | tombol ringan → ranking naik |
Berikut versi popup premium tombol donasi — elegan, ringan, responsif & cocok untuk Blogger.
Tema: Black–Gold Luxury Pop-Up
✅ Tidak berat
✅ Animasi halus
✅ Siap paste ke Blogger
✅ Tombol + Popup + QR/WA form
Kode Lengkap Popup Donasi Premium
Paste ke Blogger → Tema → Edit HTML → sebelum
</body>
<!-- POPUP DONASI PREMIUM WARKASA1919 -->
<style>
#donatePopupOverlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,.7); display: none; justify-content:center; align-items:center;
z-index: 99999;
}
#donatePopupBox {
background: #000; border: 2px solid #d4a017; border-radius:18px;
padding: 25px; width:90%; max-width:380px; text-align:center;
color:#fff; animation:fadeIn .3s ease;
}
@keyframes fadeIn {from {opacity:0; transform: scale(.9);} to {opacity:1; transform:scale(1);} }
.donate-btn-gold {
background: linear-gradient(135deg,#000,#c89b3c);
color:#fff; border-radius:40px; padding: 13px 20px; font-weight:700;
display:inline-flex; align-items:center; gap:7px; cursor:pointer;
transition:.3s; text-transform:uppercase;
box-shadow:0 4px 8px rgba(200,155,60,.5);
}
.donate-btn-gold:hover {transform:translateY(-3px); box-shadow:0 6px 14px rgba(255,215,0,.8);}
.close-donate {
background:#c89b3c; padding:8px 18px; border-radius:30px; margin-top:12px; cursor:pointer;
}
.pay-method-box a {
display:block; margin:8px 0; padding:12px; border:1px solid #c89b3c;
color:#ffd77b; border-radius:10px; font-weight:600;
transition:.3s;
}
.pay-method-box a:hover {
background:#c89b3c; color:#000; transform:scale(1.03);
}
</style>
<!-- Trigger Button -->
<div style="text-align:center;margin:20px 0;">
<button class="donate-btn-gold" onclick="document.getElementById('donatePopupOverlay').style.display='flex'">
π Donasi Premium
</button>
</div>
<!-- Popup -->
<div id="donatePopupOverlay">
<div id="donatePopupBox">
<h3 style="font-size:20px;margin-bottom:8px;">Dukung Warkasa1919</h3>
<p style="font-size:14px;color:#ffd77b;margin-bottom:18px;">
Bantu kami terus menghadirkan artikel premium, fitur canggih & projek digital berkualitas.
</p>
<div class="pay-method-box">
<a href="https://wa.me/628xxxxxx?text=Donasi%20Warkasa1919">π¬ Donasi via WhatsApp</a>
<a href="https://link.qris/anda" target="_blank">π± QRIS Semua Bank</a>
<a href="https://paypal.me/username" target="_blank">π PayPal Support</a>
<a href="https://link.dana.id/minta" target="_blank">π DANA</a>
</div>
<div class="close-donate" onclick="document.getElementById('donatePopupOverlay').style.display='none'">Tutup</div>
</div>
</div>
✅ Tinggal ubah link WhatsApp, QRIS, PayPal, DANA
✅ Sudah termasuk animasi + UI premium
Preview Tampilan
-
Tombol elegan hitam-gold
-
Klik → muncul popup luxury
-
Pilihan pembayaran lengkap
-
Bisa jadi CTA untuk akses konten premium / membership
Tips SEO & UX Donasi
| Teknik | Tujuan |
|---|---|
Tambah title="Donasi" |
Sinyal SEO + aksesibilitas |
| Letakkan di bawah artikel | CTR tinggi |
| Gabung dengan kalimat ajakan | Emosi → konversi |
| Landing page donasi opsional | Ranking lebih kuat |
Contoh CTA:
Dukung pengembangan fitur premium Warkasa1919 — dengan donasi Anda, kami terus berkembang.
Bonus: Auto-Popup (opsional)
Kalau ingin popup muncul otomatis setelah 8 detik:
setTimeout(()=> {
document.getElementById('donatePopupOverlay').style.display='flex';
},8000);
Selanjutnya Kita akan buat Tombol Donasi + Sistem Premium (kunci konten) untuk blogger — versi:
-
π Konten terkunci & terbuka setelah verifikasi
-
π UI Black–Gold mewah khas Warkasa1919
-
π² WhatsApp verifikasi otomatis
-
πͺ Donasi / akses premium
-
⚡ Siap-paste ke Blogger
-
π§ Aman & ringan tanpa database (Token Manual)
Mekanisme:
Pembaca klik → bayar → kirim bukti via WhatsApp → Anda kirim kode akses premium → mereka input → konten tampil.
Kode Premium Lock + Tombol Donasi
π Paste di Blogger → Tema → Edit HTML → sebelum </body>
Langsung bekerja untuk semua artikel (lock bagian tertentu)
<!-- PREMIUM LOCK WARKASA1919 -->
<style>
.premium-box {
border:2px solid #d4a017; background:rgba(0,0,0,.9); padding:20px;
border-radius:18px; color:#ffd77b; text-align:center;
font-family:inherit; margin:20px 0;
}
.btn-premium {
padding:12px 20px; background:linear-gradient(135deg,#000,#c89b3c);
color:#fff; border-radius:50px; font-weight:700; cursor:pointer;
display:inline-block; transition:.3s; box-shadow:0 4px 10px rgba(200,155,60,.4);
}
.btn-premium:hover {transform:translateY(-3px); box-shadow:0 6px 14px rgba(255,215,0,.7); }
#premiumContent{display:none;}
.input-premium {padding:12px; width:100%; border-radius:12px; margin-top:12px;}
</style>
<div class="premium-box" id="premiumLock">
<h3>Akses Premium Warkasa1919 π</h3>
<p>Konten ini khusus pendukung & member premium.</p>
<button class="btn-premium" onclick="openPremium()">π Buka Akses</button>
</div>
<div id="premiumForm" style="display:none;" class="premium-box">
<p>Masukkan Kode Akses Premium</p>
<input id="premiumKey" class="input-premium" placeholder="Masukkan kode akses...">
<button class="btn-premium" onclick="checkKey()">✅ Verifikasi</button>
<p style="margin-top:8px;">Belum punya akses? <br>
<a class="btn-premium" style="margin-top:10px;display:inline-block;"
href="https://wa.me/628xxxxxx?text=Halo,%20saya%20ingin%20akses%20konten%20premium%20Warkasa1919">π¬ Donasi & Dapatkan Kode</a>
</p>
</div>
<div id="premiumContent">
<!-- ✅ Konten Premium Anda Mulai di Sini -->
π Paste teks konten premium Anda setelah kode ini
Dan tambahkan penutup berikut setelah konten premium:
<!-- ✅ Tutup bagan premium -->
</div>
<script>
const premiumKeyReal = "WARKASA1919VIP"; // π Ganti token premium Anda
function openPremium() {
document.getElementById("premiumLock").style.display="none";
document.getElementById("premiumForm").style.display="block";
}
function checkKey() {
let input = document.getElementById("premiumKey").value.trim();
if(input === premiumKeyReal){
document.getElementById("premiumForm").style.display="none";
document.getElementById("premiumContent").style.display="block";
localStorage.setItem("warkasaVIP","yes");
} else {
alert("Kode salah atau belum valid ❌");
}
}
if(localStorage.getItem("warkasaVIP") === "yes"){
document.getElementById("premiumLock").style.display="none";
document.getElementById("premiumForm").style.display="none";
document.getElementById("premiumContent").style.display="block";
}
</script>
Cara Pakai
| Langkah | Penjelasan |
|---|---|
| Ganti nomor WhatsApp | format 628xxxxxx |
Ganti token WARKASA1919VIP |
token akses premium Anda |
| Sisipkan konten premium | di tengah kode tadi |
| Member bayar → kirim bukti | via WA |
| Kirim token akses | manual atau script otomatis (bisa dibuat) |
Saran Premium Flow
Contoh alur:
1️⃣ Pengunjung klik tombol premium
2️⃣ Bayar via WA / QRIS
3️⃣ Admin kirim kode akses
4️⃣ User input → konten terbuka
Bisa dibuat juga versi auto-generate token + auto-verify
Bonus Optimasi SEO
-
Gunakan teks CTA humanis
-
Letakkan tombol di bawah paragraf ke-2
-
Tambah FAQ soal premium
-
Tambah schema:
Paywall / Subscription
Berikutnya adalah tombol donasi QRIS auto-scan versi premium hitam-emas ala Warkasa1919 — begitu diklik, langsung buka QRIS untuk scan dan otomatis copy pesan dukungan ✅
Ringan, responsif, siap paste ke Blogger / HTML mana pun
Tombol Donasi QRIS Auto-Scan
Paste di Blogger → Tema → Edit HTML atau mode HTML postingan
Ganti link QRIS kamu di bagian
qrisUrl
<style>
.qris-btn-warkasa {
background:linear-gradient(135deg,#000,#d4a017);
color:#fff; padding:14px 20px; border-radius:50px;
font-weight:700; display:inline-flex; gap:8px; align-items:center;
cursor:pointer; border:none; font-size:15px;
box-shadow:0 5px 12px rgba(212,160,23,.4);
transition:.3s;
}
.qris-btn-warkasa:hover {
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(255,215,0,.7);
}
.qris-btn-warkasa svg { width:20px; height:20px; }
</style>
<button class="qris-btn-warkasa" onclick="payQRIS()">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h4V2H2v6h2V4zm14 0h2v2h2V2h-6v2zm2 14h-2v2h-2v2h6v-6h-2v2zM4 18H2v6h6v-2H4v-2H2v-2zm5-9h6v2H9zm0 6h6v2H9z"/></svg>
π Donasi via QRIS
</button>
<script>
function payQRIS(){
const qrisUrl = "https://link.qris.anda"; // π Ganti link QRIS kamu
const msg = "Terima kasih telah mendukung konten Warkasa1919 π";
// Buka QRIS (auto scan di mobile apps)
window.open(qrisUrl, "_blank");
// Auto copy salam dukungan
navigator.clipboard.writeText(msg);
alert("QRIS terbuka ✅\nPesan dukungan otomatis disalin π");
}
</script>
Cara kerja
| Aksi | Otomatis |
|---|---|
| Klik tombol | ✅ Buka QRIS langsung scan |
| Copy ucapan support | ✅ Otomatis |
| Responsif semua device | ✅ |
| Tema Warkasa gold-black | ✅ |
Preview UX
π Tombol elegan
π² Klik → scan QRIS langsung
π Pesan dukungan tersalin otomatis
Meningkatkan konversi donasi & kesan profesional
Tips Optimasi CTA
Gunakan kalimat ajakan sebelum tombol:
Terima kasih telah mendukung konten premium dan edukasi digital Warkasa1919.
Donasi Anda membantu pengembangan fitur, tutorial, dan akses pengetahuan. π
Opsi Upgrade
Balas dengan salah satu untuk dibuatkan:
| Fitur | Kode |
|---|---|
| QRIS popup | Buat popup QRIS |
| QRIS + bukti upload | Form bukti transaksi |
| QRIS + auto generate kode premium | Auto kode premium |
| QRIS + membership login | Sistem member |
| QRIS floating button | Floating QRIS |
Popup Donasi QRIS Premium
Ganti link QRIS dan gambar QR kamu
<!-- POPUP QRIS PREMIUM WARKASA1919 -->
<style>
#qrisOverlay {
position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(0,0,0,.8); display:none; justify-content:center; align-items:center;
z-index:99999;
}
#qrisBox {
background:#000; border:2px solid #d4a017; padding:25px; border-radius:20px;
text-align:center; width:90%; max-width:380px; color:#ffd77b; animation:fadeIn .25s;
}
@keyframes fadeIn {from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
.btn-donate-gold {
background:linear-gradient(135deg,#000,#c89b3c); color:#fff; padding:14px 24px; border-radius:50px;
font-weight:700; cursor:pointer; display:inline-flex; gap:6px; align-items:center;
transition:.3s; border:none; font-size:15px; box-shadow:0 4px 10px rgba(200,155,60,.5);
}
.btn-donate-gold:hover{transform:translateY(-3px); box-shadow:0 6px 14px rgba(255,215,0,.7);}
.qris-img{width:200px; border-radius:12px; margin:15px auto; display:block;}
.closeQrisBtn{
margin-top:10px; background:#d4a017; border:none; padding:10px 24px; border-radius:40px;
font-weight:700; color:#000; cursor:pointer;
}
</style>
<!-- BUTTON TRIGGER -->
<div style="text-align:center;margin:20px 0">
<button class="btn-donate-gold" onclick="openQRIS()">π Donasi via QRIS</button>
</div>
<!-- POPUP -->
<div id="qrisOverlay">
<div id="qrisBox">
<h3 style="margin-bottom:10px;font-size:20px;">Dukung Warkasa1919 π</h3>
<p style="font-size:14px;">Scan QRIS di bawah untuk support konten premium</p>
<!-- π₯ Masukkan link gambar QRIS kamu -->
<img src="https://YOUR-QRIS-IMAGE.jpg" class="qris-img" alt="QRIS Donasi Warkasa1919">
<button class="btn-donate-gold" onclick="openQrisLink()">π± Klik untuk Scan Otomatis</button>
<button class="closeQrisBtn" onclick="closeQRIS()">Tutup</button>
</div>
</div>
<script>
const qrisLink = "https://YOUR-QRIS-LINK"; // π Ganti link QRIS kamu
const thanksMsg = "Terima kasih telah mendukung Warkasa1919 ππ₯";
function openQRIS(){
document.getElementById("qrisOverlay").style.display="flex";
navigator.clipboard.writeText(thanksMsg);
}
function closeQRIS(){
document.getElementById("qrisOverlay").style.display="none";
}
function openQrisLink(){
window.open(qrisLink,"_blank");
alert("QRIS terbuka ✅\nPesan dukungan tersalin π");
}
</script>
Fitur
| Fitur | Status |
|---|---|
| Popup premium glass gold | ✅ |
| Auto-copy ucapan support | ✅ |
| Auto open QRIS link | ✅ |
| QR Image display | ✅ |
| Responsif semua device | ✅ |
| Blogspot ready | ✅ |
Cara Pakai
-
Upload QRIS kamu (bisa pakai Google Drive / Imgur / Blogger media)
-
Ganti bagian ini:
https://YOUR-QRIS-IMAGE.jpg
https://YOUR-QRIS-LINK
-
Selesai — popup aktif!
Tips Konversi Tinggi
Letakkan tombol di:
✅ Di bawah paragraf ke-2 artikel
✅ Di halaman Premium
✅ Di footer blog
✅ Di menu navbar “Support”
Tambahkan CTA di artikel:
Dukungan Anda membantu Warkasa1919 terus membagikan teknologi dan fitur premium π₯
Kita akan integrasikan tombol donasi + popup QRIS + sistem premium ke dalam lonceng notifikasi premium ala Warkasa1919
Target hasil
-
π Lonceng premium -> menampilkan notifikasi spesial
-
π Tombol donasi QRIS di panel lonceng
-
π³ Popup QRIS auto-scan
-
π Arahkan ke konten premium / dukungan
-
π Tema hitam-emas mewah
Desain UX seperti platform membership modern.
Kode Lonceng Premium + Donasi QRIS
Paste di
<body>paling bawah Blogger (sebelum</body>)
<!-- π PREMIUM NOTIFICATION BELL + QRIS POPUP -->
<style>
#bellPremium {
position:fixed; bottom:20px; right:20px;
background:linear-gradient(135deg,#000,#d4a017);
width:60px; height:60px; border-radius:50%;
display:flex; justify-content:center; align-items:center;
color:#fff; font-size:24px; cursor:pointer;
box-shadow:0 6px 18px rgba(212,160,23,.5);
z-index:99998; transition:.3s;
}
#bellPremium:hover{transform:scale(1.07);}
#panelPremium {
position:fixed; bottom:95px; right:20px;
width:300px; background:#000; border:2px solid #d4a017;
border-radius:20px; display:none; padding:18px; color:#ffd77b;
z-index:99998; box-shadow:0 6px 18px rgba(212,160,23,.5);
animation:fadePanel .25s ease;
}
@keyframes fadePanel {from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.panel-btn {
display:block; margin:10px 0; padding:12px;
background:linear-gradient(135deg,#000,#d4a017);
border:none; border-radius:12px; color:#fff; font-weight:700;
text-align:center; cursor:pointer; transition:.3s;
}
.panel-btn:hover{transform:translateY(-3px); box-shadow:0 6px 18px rgba(212,160,23,.7);}
</style>
<div id="bellPremium">π</div>
<div id="panelPremium">
<h4 style="margin-bottom:8px;">Notifikasi Premium π</h4>
<div id="premiumNews" style="font-size:14px;margin-bottom:12px;">
✅ Update fitur premium terbaru siap dicoba
</div>
<button class="panel-btn" onclick="openPremiumQRIS()">π Donasi & Dukung</button>
<button class="panel-btn" onclick="window.location.href='/p/premium.html'">π Akses Premium</button>
</div>
<script>
document.getElementById("bellPremium").onclick = () => {
let p = document.getElementById("panelPremium");
p.style.display = p.style.display === "block" ? "none" : "block";
};
</script>
Popup QRIS Premium (terhubung lonceng)
Tambahkan kode berikut setelah kode di atas
<style>
#qrisOverlay {
position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(0,0,0,.8); display:none; justify-content:center; align-items:center;
z-index:99999;
}
#qrisBox {
background:#000; border:2px solid #d4a017; padding:25px; border-radius:20px;
text-align:center; width:90%; max-width:380px; color:#ffd77b;
animation:fadeIn .25s;
}
.qris-img{width:200px; margin:15px auto; border-radius:12px;}
.closeQBtn{
background:#d4a017; border:none; padding:10px 22px; border-radius:40px;
margin-top:10px; font-weight:700; cursor:pointer;
}
</style>
<div id="qrisOverlay">
<div id="qrisBox">
<h3>π Dukung Warkasa1919</h3>
<p>Scan QRIS untuk support konten premium</p>
<!-- ✅ Ganti gambar QRIS kamu -->
<img src="https://YOUR-QRIS-IMAGE.jpg" class="qris-img">
<button class="panel-btn" onclick="openQRLink()">π± Scan Otomatis</button>
<button class="closeQBtn" onclick="closeQRIS()">Tutup</button>
</div>
</div>
<script>
const qrisLink = "https://YOUR-QRIS-LINK";
function openPremiumQRIS(){
document.getElementById("qrisOverlay").style.display="flex";
navigator.clipboard.writeText("Terima kasih mendukung Warkasa1919 ππ");
}
function closeQRIS(){
document.getElementById("qrisOverlay").style.display="none";
}
function openQRLink(){
window.open(qrisLink,"_blank");
alert("QRIS terbuka ✅ Pesan dukungan tersalin ✨");
}
</script>
Cara Kerja
| Komponen | Fungsi |
|---|---|
| π Lonceng | akses panel premium |
| π Tombol donasi | buka popup QRIS mewah |
| π± QRIS scan | langsung ke aplikasi pembayaran |
| π Akses premium | link halaman konten berbayar |
Bonus UI Enhancements
Mau ditambah:
| Upgrade | Balas |
|---|---|
| π¨ Animasi gold glow | FX Glow |
| π Notifikasi slider (marquee) | Marquee Premium |
| πͺ Notif masuk realtime (fake live indicator) | Live Pulse |
| π€ Auto-kirim kode akses via WA | WA Auto Token |
| π³ Sistem QRIS + Member Login | Premium Membership System |
Penutup
Dengan tombol donasi yang elegan & responsif ini, blog Anda akan memiliki:
Desain profesional
Fitur monetisasi premium
Pengalaman pengguna lebih baik
Nilai SEO meningkat






.jpg)