🔥 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.

Artikel Terkait


EmoticonEmoticon