Beranda
Blogger
CSS and HTML

Cara membuat halaman Donasi di Blogger 2025

Ruzdani El-Mino

📌 JUDUL HALAMAN

Donasi Premium – Dukung Kami Agar Terus Berkembang

✨ DESKRIPSI HALAMAN (Premium)

Halaman donasi profesional cocok untuk:

  • Blog edukasi
  • Website tutorial
  • Blog penghasil uang
  • Komunitas & personal branding

Tampil modern, rapi, dan responsif di HP maupun laptop.

🧩 KODE HTML HALAMAN DONASI PREMIUM (ADA TOMBOL SALIN)

🔔 Petunjuk
Blogger → Pages → New Page → klik Tampilan HTML → tempel semua kode di bawah ini

<style>
.donasi-wrapper{
  max-width:700px;
  margin:auto;
  background:#ffffff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  font-family:Arial,sans-serif;
}
.donasi-wrapper h1{
  text-align:center;
  color:#2c3e50;
}
.donasi-wrapper p{
  text-align:center;
  color:#555;
}
.donasi-box{
  background:#f7f9fc;
  padding:15px;
  border-radius:10px;
  margin-top:15px;
}
.donasi-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0;
  padding:10px;
  background:#fff;
  border-radius:8px;
  border:1px solid #e0e0e0;
}
.donasi-item span{
  font-weight:bold;
}
.copy-btn{
  background:#27ae60;
  color:#fff;
  border:none;
  padding:7px 12px;
  border-radius:6px;
  cursor:pointer;
}
.copy-btn:hover{
  background:#219150;
}
.qr-img{
  max-width:200px;
  display:block;
  margin:15px auto;
}
.footer-donasi{
  text-align:center;
  font-size:14px;
  margin-top:20px;
  color:#777;
}
</style>

<div class="donasi-wrapper">
<h1>💖 Donasi Premium</h1>
<p>Dukung kami agar terus menghadirkan konten bermanfaat, gratis, dan berkualitas.</p>

<div class="donasi-box">
<h3>🏦 Transfer Bank</h3>
<div class="donasi-item">
<span>BCA – 1234567890</span>
<button class="copy-btn" onclick="copyText('1234567890')">Salin</button>
</div>
<div class="donasi-item">
<span>BRI – 0987654321</span>
<button class="copy-btn" onclick="copyText('0987654321')">Salin</button>
</div>
</div>

<div class="donasi-box">
<h3>📱 E-Wallet</h3>
<div class="donasi-item">
<span>DANA – 081234567890</span>
<button class="copy-btn" onclick="copyText('081234567890')">Salin</button>
</div>
<div class="donasi-item">
<span>OVO – 081234567890</span>
<button class="copy-btn" onclick="copyText('081234567890')">Salin</button>
</div>
<div class="donasi-item">
<span>GOPAY – 081234567890</span>
<button class="copy-btn" onclick="copyText('081234567890')">Salin</button>
</div>
</div>

<div class="donasi-box">
<h3>📷 QRIS</h3>
<img class="qr-img" src="https://i.imgur.com/0KFBHTB.png" alt="QRIS Donasi">
<p style="font-size:14px;text-align:center;">Scan QRIS untuk pembayaran cepat</p>
</div>

<div class="donasi-box">
<h3>🌍 Cryptocurrency</h3>
<div class="donasi-item">
<span>USDT (TRC20)</span>
<button class="copy-btn" onclick="copyText('TKxxxxxxxxxxxxxxxx')">Salin</button>
</div>
<div class="donasi-item">
<span>BTC</span>
<button class="copy-btn" onclick="copyText('1Bxxxxxxxxxxxxxxxx')">Salin</button>
</div>
</div>

<div class="footer-donasi">
🙏 Terima kasih atas dukungan Anda. Semoga kebaikan ini dibalas berlipat ganda.
</div>
</div>

<script>
function copyText(text){
  navigator.clipboard.writeText(text);
  alert("Berhasil disalin: " + text);
}
</script>

✅ FITUR PREMIUM YANG SUDAH ADA

✔ Tampilan modern & profesional
✔ Responsif (HP & Desktop)
✔ Tombol Salin Otomatis
✔ Support Bank, E-Wallet, QRIS, Crypto
✔ Bisa langsung dipakai tanpa plugin

🔧 CARA MENGGANTI DATA DONASI

Cukup ubah bagian berikut:

  • Nomor rekening
  • Nomor e-wallet
  • Alamat crypto
  • Link gambar QRIS

Contoh:

<button class="copy-btn" onclick="copyText('NOMOR_KAMU')">Salin</button>

🎯 TIPS AGAR DONASI LEBIH BANYAK

  • Pasang link halaman donasi di menu utama
  • Tambahkan di akhir artikel
  • Gunakan kalimat ajakan yang sopan & jujur
  • Sertakan manfaat donasi

Posting Komentar