🔥 Cara Membuat Halaman Donasi Borderless & Mobile-First Terbaru Support GA4

Cara Membuat Halaman Donasi Borderless & Mobile-First Terbaru Support GA4

🔥 HALAMAN DONASI – BORDERLESS & MOBILE-FIRST

👉 COPY–PASTE ke halaman Blogger (mode HTML)
(jangan dibungkus elemen lain) Jangan lupa gati warna merah dengan kode permintaan kiriman anda.

---

✅ HTML + CSS (FULL WIDTH, NO CARD)

<style>
/* reset area */
.donate-section{
  width:100%;
  margin:0;
  padding:24px 16px;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,sans-serif;
}

/* judul */
.donate-section h1{
  text-align:center;
  margin:0 0 8px;
}
.donate-section p{
  text-align:center;
  margin:0 0 24px;
  color:#555;
  font-size:1rem;
}

/* grid tombol */
.donate-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media(max-width:768px){
  .donate-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .donate-grid{
    grid-template-columns:1fr;
  }
}

/* tombol */
.donate-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 12px;
  min-height:64px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  font-size:1rem;
}

/* warna */
.dana{background:#0ea5e9;}
.shopeepay{background:#f97316;}
.saweria{background:#16a34a;}
.sociabuzz{background:#22c55e;}
.paypal{background:#1e3a8a;}
.special{background:#111827;}

/* footer note */
.donate-note{
  margin-top:26px;
  text-align:center;
  font-size:.9rem;
  color:#666;
}
</style>

<section class="donate-section">
  <h1>Support G-Expert160 ❤️</h1>
  <p>Konten gratis, server tetap hidup. Dukung kami lewat salah satu tombol di bawah.</p>

  <div class="donate-grid">

    <!-- DANA -->
    <a href="https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012019050588834794"
       class="donate-btn dana"
       data-donate="DANA"
       onclick="openDana(event)">
       Donate via DANA
    </a>

    <!-- ShopeePay -->
    <a href="https://app.u.shopeepay.co.id/u/w2xSvgPzazxYWgdkC3EgH?smtt=0.0.9"
       class="donate-btn shopeepay"
       data-donate="ShopeePay"
       onclick="openShopee(event)">
       Donate via ShopeePay
    </a>

    <!-- Saweria -->
    <a href="https://saweria.co/pisbon"
       class="donate-btn saweria"
       target="_blank"
       rel="noopener nofollow"
       data-donate="Saweria">
       Donasi via Saweria
    </a>

    <!-- Sociabuzz -->
    <a href="https://sociabuzz.com/pisbon/tribe"
       class="donate-btn sociabuzz"
       target="_blank"
       rel="noopener nofollow"
       data-donate="Sociabuzz">
       Support via Sociabuzz
    </a>

    <!-- PayPal -->
    <a href="https://www.paypal.com/ncp/payment/B9A35VDG4U77S"
       class="donate-btn paypal"
       target="_blank"
       rel="noopener nofollow"
       data-donate="PayPal">
       Donate via PayPal
    </a>

    <!-- PayPal Special -->
    <a href="https://www.paypal.com/ncp/payment/LQL75WDGUZ5ZW"
       class="donate-btn special"
       target="_blank"
       rel="noopener nofollow"
       data-donate="PayPal-100USD">
       Special $100 Support
    </a>

  </div>

  <div class="donate-note">
    🙏 Terima kasih sudah mendukung G-Expert160.
  </div>
</section>

---

✅ SCRIPT SMART MOBILE + GA4

Tempel di bawah kode di atas: </body> Jika ingin di tracking melamui Google Analytic

<script>
function isMobile(){
  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
}

function trackDonate(label){
  if(typeof gtag==="function"){
    gtag("event","donate_click",{
      event_category:"donation",
      event_label:label,
      value:1
    });
  }
}

function openDana(e){
  e.preventDefault();
  trackDonate("DANA");
  if(isMobile()){
    window.location.href="https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012019050588834794";
  }else{
    alert("Buka halaman ini lewat HP untuk donasi via DANA 📱");
  }
}

function openShopee(e){
  e.preventDefault();
  trackDonate("ShopeePay");
  if(isMobile()){
    window.location.href="https://app.u.shopeepay.co.id/u/w2xSvgPzazxYWgdkC3EgH?smtt=0.0.9";
  }else{
    alert("Buka halaman ini lewat HP untuk donasi via ShopeePay 📱");
  }
}
</script>

---

🎯 HASIL YANG KAMU DAPAT

• 📱 Mobile: full-width, tombol gede, nyaman ditekan

• 💻 Desktop: tetap rapi, tidak menciut

• 🔐 Nomor tidak pernah tampil

• 📊 GA4 mencatat semua klik

• 🤖 AI crawler tetap baca CTA & link

Ini layout paling aman buat Blogger + e-wallet Indonesia.