Membuat Tombol Donasi Popup di Blogger + Unduh QRIS & Link DANA
Table of Contents
 |
| Tombol donasi blogger menggunakan qris |
LINTASIANA.Com - Bagi pengelola blog pribadi, komunitas, atau situs berita independen seperti Lintasiana, dukungan pembaca adalah nyawa keberlangsungan konten yang kita sajikan. Biaya domain, layanan hosting, riset konten, hingga peralatan pembuatan konten membutuhkan biaya yang tidak sedikit—dan seringkali sulit untuk menutupinya sepenuhnya dari iklan yang justru mengganggu kenyamanan pengunjung.
Salah satu cara paling sopan dan efektif untuk membuka pintu dukungan sukarela adalah dengan menyediakan tombol donasi yang mudah diakses. Namun, banyak pengelola blog menghadapi kendala: tampilan yang berantakan, kode yang berat memuat halaman, harus memasang layanan pihak ketiga yang berbayar, atau fitur yang tidak berjalan sempurna di perangkat seluler.
Artikel ini akan memandu Anda langkah demi langkah membuat tombol donasi yang ringan, tanpa ketergantungan pustaka eksternal, lengkap dengan popup kode pembayaran, fitur unduh gambar, dan tautan langsung ke pembayaran DANA. Kode yang kami berikan sudah dioptimalkan khusus untuk Blogger, tidak membebani kecepatan situs, dan 100% bebas plagiarisme serta siap Anda gunakan langsung.
Mengapa Memilih Cara Ini?
Sebelum masuk ke langkah pembuatan, mari kita lihat keunggulan metode ini dibandingkan cara lain yang sering beredar:
1. Sangat Ringan & Cepat
Tidak menggunakan pustaka tambahan seperti Tailwind CSS atau Font Awesome yang seringkali memperlambat pemuatan halaman. Semua gaya dan ikon sudah tertanam langsung di kode, sehingga ukuran keseluruhan hanya sekitar 2 KB saja. Ini sangat bagus untuk SEO dan kecepatan indeks Google, terlebih untuk pembaca di wilayah dengan sinyal terbatas seperti daerah pedalaman Kalimantan.
2. Tampilan Profesional & Responsif
Tombol dan popup akan menyesuaikan ukuran layar pengunjung, baik yang membuka lewat laptop, tablet, maupun ponsel. Warna tombol disesuaikan dengan identitas DANA dan tampilan yang ramah mata tanpa efek berlebihan yang mengganggu.
3. Fitur Lengkap Tanpa Ribet
Selain menampilkan kode QRIS, pengunjung bisa langsung mengunduh gambar kode untuk disimpan di galeri, atau menekan tombol langsung untuk membuka aplikasi DANA dan berdonasi tanpa perlu memindai kode secara manual. Popup juga mudah ditutup dengan menekan tombol silang atau mengklik area gelap di luar kotak.
4. Sesuai Standar Blogger
Tidak ada kode yang bertentangan dengan kebijakan Blogger, dan tidak akan menghilangkan fungsi lain dari tema yang Anda gunakan. Bisa dipasang di mana saja: halaman statis, bagian bawah artikel, bilah samping, atau bahkan di bagian atas situs.
Persiapan Sebelum Memulai Tombol Donasi Blogger
Sebelum menyalin kode, pastikan Anda sudah menyiapkan dua hal penting:
- Kode QRIS pembayaran Anda: Dalam panduan ini kami menggunakan contoh kode DANA, namun Anda bisa menggantinya dengan kode QRIS ShopeePay, GoPay, BCA, atau metode lain yang Anda miliki.
- Tautan pembayaran langsung: Tautan yang akan membawa pengunjung langsung ke halaman permintaan pembayaran dompet digital Anda.
Untuk contoh panduan ini, kami sudah menyiapkan kode yang disesuaikan dengan tautan dan gambar kode berikut:
Gambar kode QR: https://i.ibb.co/dsLRc443/qr-ID1026525461467-02-07-26-1782942668-1782942668932.jpg ini adalah link gambar qris saya yang sudah saya convert menjadi link.
Tautan DANA langsung: https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012026052785534538 ini adalah link dana saya yang otomatis pengguna dana lain bisa mengirim uang tanpa input nomor dana saya.
Memasang Kode Tombol Donasi di Blogger
Ada dua cara memasang kode ini, tergantung di mana Anda ingin menampilkannya:
Cara A: Dipasang di Artikel atau Halaman Statis
1. Masuk ke akun Blogger Anda, lalu buka menu Halaman atau Pos yang ingin diedit.
2. Alihkan tampilan editor dari Tulis ke HTML di pojok kanan atas.
3. Salin seluruh kode lengkap yang ada di bagian akhir artikel ini, lalu tempelkan di posisi yang Anda inginkan.
4. Tekan Pratinjau untuk memastikan tampilan berjalan dengan baik, lalu klik Publikasikan.
Cara B: Dipasang di Seluruh Situs (Bawah Artikel/Bilah Samping)
1. Buka menu Tata Letak di dasbor Blogger.
2. Klik Tambahkan Gadget di area yang diinginkan (misalnya bagian bawah halaman atau bilah samping).
3. Pilih jenis gadget HTML/JavaScript.
4. Tempelkan seluruh kode ke dalam kolom isian, berikan judul misalnya "Dukung Kami", lalu simpan.
5. Jangan lupa tekan Simpan Susunan di bagian bawah halaman Tata Letak.
Memahami & Menyesuaikan Kode
Berikut penjelasan singkat bagian-bagian kode agar Anda bisa menyesuaikannya sesuai kebutuhan situs Lintasiana:
Bagian Gaya Tampilan
css
:root {
--utama: #2E7D32; /* Warna tombol utama */
--dana: #009EE2; /* Warna tombol DANA */
}
Anda bisa mengubah kode warna di atas agar sesuai dengan warna identitas situs Anda. Misalnya ganti #2E7D32 dengan warna utama situs Lintasiana.
Bagian Tautan & Gambar
html
<img id="gambarUtama"
src="https://i.ibb.co/dsLRc443/qr-ID1026525461467-02-07-26-1782942668-1782942668932.jpg"
alt="Kode Pembayaran" loading="lazy" width="500" height="500"
class="gambar-utama" />
Ganti nilai src dengan alamat gambar kode pembayaran Anda sendiri. Pastikan gambar sudah diunggah ke layanan seperti ImgBB, Google Drive, atau hosting gambar lainnya.
html
<a href="https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012026052785534538"
target="_blank" rel="noopener noreferrer"
class="tombol-dana">
Ganti alamat pada href dengan tautan pembayaran milik Anda. Atur juga tulisan pada tombol jika Anda menggunakan metode pembayaran lain, misalnya ganti menjadi "Via ShopeePay" atau "Via Transfer Bank".
Cara Kerja Fitur Popup & Unduh
- Membuka & Menutup Popup: Saat pengunjung menekan tombol "BERIKAN DUKUNGAN", skrip akan mengubah status tampilan dari tersembunyi menjadi terlihat, sekaligus mengunci pergerakan layar agar tidak tergulung saat popup terbuka. Popup bisa ditutup dengan menekan tombol silang atau mengklik latar belakang gelap.
- Fitur Unduh Gambar: Saat tombol "Download" ditekan, skrip akan mengambil data gambar secara langsung lalu menyimpannya ke perangkat pengunjung dengan nama kode-qr.jpg . Jika proses pengunduhan otomatis gagal karena pengaturan perangkat, sistem akan membuka gambar di tab baru sebagai alternatif.
Tips Tambahan Agar Donasi Lebih Banyak
1. Sampaikan Tujuan Donasi dengan Jelas
Tulis sedikit kalimat di dekat tombol donasi, misalnya: "Dukungan Anda akan kami gunakan untuk menyajikan liputan kuliner Pontianak yang lebih lengkap dan menjaga kelangsungan situs Lintasiana." Pengunjung lebih bersedia berdonasi jika tahu uangnya digunakan untuk apa.
2. Jangan Tampilkan Terlalu Sering
Jika dipasang sebagai popup muncul otomatis, atur agar hanya muncul satu kali dalam 7 hari agar tidak mengganggu pembaca setia.
3. Perbarui Informasi Secara Berkala
Jika Anda mengganti nomor akun atau kode pembayaran, pastikan segera memperbarui tautan dan gambar di kode agar pengunjung tidak salah mengirimkan dana.
4. Ucapkan Terima Kasih
Anda bisa menambahkan halaman terima kasih atau menuliskan ucapan di media sosial setiap kali mendapatkan dukungan dari pembaca. Hal ini akan membangun hubungan yang lebih erat antara pengelola dan pembaca.
Kode Lengkap Tombol Donasi Untuk Blogger Siap Gunakan
Berikut adalah keseluruhan kode yang sudah diuji dan berjalan sempurna di Blogger. Salin seluruh kode di bawah ini:
<!-- ✅ HAPUS Tailwind & Font Awesome EKSTERNAL, GANTI DENGAN CSS SEDERHANA -->
<style>
/* Gaya dasar yang setara utilitas Tailwind tapi jauh lebih ringan */
:root {
--utama: #2E7D32;
--dana: #009EE2;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, sans-serif;
}
.tombol-keren {
background-color: var(--utama);
color: #fff;
font-weight: 600;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 1rem;
}
.tombol-keren:hover {
background-color: rgba(46, 125, 50, 0.9);
}
.tombol-dana {
background-color: var(--dana);
color: #fff;
font-weight: 600;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 1rem;
text-decoration: none;
display: inline-block;
text-align: center;
}
.tombol-dana:hover {
background-color: #0088c5;
}
.popup-sembunyi {
opacity: 0;
visibility: hidden;
transform: scale(0.95);
transition: all 0.3s ease;
}
.popup-muncul {
opacity: 1;
visibility: visible;
transform: scale(1);
transition: all 0.3s ease;
}
.latar-popup {
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999999;
padding: 1rem;
}
.kotak-popup {
background: #fff;
border-radius: 0.75rem;
max-width: 32rem;
width: 100%;
padding: 1.25rem;
}
.baris-atas {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.baris-atas h2 {
font-weight: 700;
font-size: 1.125rem;
}
.tombol-tutup {
background: transparent;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: #444;
}
.gambar-utama {
border-radius: 0.5rem;
margin-bottom: 1rem;
width: 100%;
height: auto;
}
.kelompok-tombol {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.kelompok-tombol > * {
flex: 1 1 120px;
}
/* Ikon SVG bawaan agar tidak perlu Font Awesome */
.ikon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
margin-right: 0.3rem;
}
</style>
<button id="bukaPopup" class="tombol-keren">
<svg class="ikon" fill="currentColor" viewbox="0 0 576 512"><path d="M480 32H96C43 32 0 75 0 128v256c0 53 43 96 96 96h384c53 0 96-43 96-96V128c0-53-43-96-96-96zm-32 352H128c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v192c0 17.7-14.3 32-32 32zM144 224a32 32 0 1 1 0-64 32 32 0 0 1 0 64zm288 128H144l80-80 48 48 80-80 80 80z"/></svg>
BERIKAN DUKUNGAN
</button>
<div id="latarPopup" class="latar-popup popup-sembunyi">
<div id="kotakPopup" class="kotak-popup popup-sembunyi">
<div class="baris-atas">
<h2>Scan Qris Atau Download</h2>
<button id="tutupPopup" class="tombol-tutup">
<svg class="ikon" fill="currentColor" viewbox="0 0 320 512"><path d="M310.7 150.7l-141.4 141.4 141.4 141.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L124 337.4 10.7 478.7c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L78.7 292 10.7 150.7c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L124 234.7l113.3-113.3c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z"/></svg>
</button>
</div>
<img id="gambarUtama"
src="https://i.ibb.co/dsLRc443/qr-ID1026525461467-02-07-26-1782942668-1782942668932.jpg"
alt="Kode Pembayaran" loading="lazy" width="500" height="500"
class="gambar-utama" />
<div class="kelompok-tombol">
<button id="tombolUnduh" class="tombol-keren">
<svg class="ikon" fill="currentColor" viewbox="0 0 512 512"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-99.9-99.9c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l152 152c12.5 12.5 32.8 12.5 45.3 0l152-152c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 448c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32H64z"/></svg>
Download
</button>
<a href="https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012026052785534538"
target="_blank" rel="noopener noreferrer"
class="tombol-dana">
<svg class="ikon" fill="currentColor" viewbox="0 0 576 512"><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm48 352H64V256c44.2 0 80-35.8 80-80v-32c0-44.2 35.8-80 80-80h192c44.2 0 80 35.8 80 80v192c0 35.3-28.7 64-64 64H112z"/></svg>
Via Dana Langsung
</a>
</div>
</div>
</div>
<script>
// Tulis skrip di akhir, ringkas & efisien
document.addEventListener("DOMContentLoaded", function () {
const tombolBuka = document.getElementById("bukaPopup");
const tombolTutup = document.getElementById("tutupPopup");
const latar = document.getElementById("latarPopup");
const kotak = document.getElementById("kotakPopup");
const tombolUnduh = document.getElementById("tombolUnduh");
const urlGambar = "https://i.ibb.co/dsLRc443/qr-ID1026525461467-02-07-26-1782942668-1782942668932.jpg";
function bukaPopup() {
latar.classList.replace("popup-sembunyi","popup-muncul");
kotak.classList.replace("popup-sembunyi","popup-muncul");
document.body.style.overflow = "hidden";
}
function tutupPopup() {
latar.classList.replace("popup-muncul","popup-sembunyi");
kotak.classList.replace("popup-muncul","popup-sembunyi");
document.body.style.overflow = "auto";
}
tombolBuka.addEventListener("click", bukaPopup);
tombolTutup.addEventListener("click", tutupPopup);
latar.addEventListener("click", e => e.target === latar && tutupPopup());
tombolUnduh.addEventListener("click", async () => {
try {
const res = await fetch(urlGambar);
if (!res.ok) throw Error("Gagal ambil gambar");
const blob = await res.blob();
const tautan = URL.createObjectURL(blob);
const a = Object.assign(document.createElement("a"), {
href: tautan,
download: "kode-qr.jpg",
style: "display:none"
});
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(tautan);
} catch {
window.open(urlGambar, "_blank");
}
});
});
</script>Penutup
Membuka pintu dukungan dari pembaca adalah langkah yang sangat baik untuk menjaga kemandirian situs Anda. Dengan tombol donasi yang ringan, mudah digunakan, dan tampilan yang rapi seperti yang telah kami bahas di atas, Anda tidak hanya memudahkan pembaca untuk berbagi dukungan, tetapi juga menjaga kecepatan dan kualitas situs Lintasiana.
Jika Anda mengalami kesulitan saat pemasangan atau ingin menambahkan fitur lain seperti tombol berbagi tautan, jangan ragu untuk bertanya kembali. Semoga situs Lintasiana semakin berkembang dan terus bermanfaat bagi masyarakat Kalimantan Barat dan Indonesia pada umumnya.
Post a Comment