 |
| Tampilan widget tombol kotak donasi ala sayaindonesia.com |
Dalam era digital saat ini, kreativitas dalam mengelola website menjadi salah satu kunci kesuksesan. Salah satu fitur penting yang sering dipasang oleh pemilik blog atau website adalah widget donasi. Di antara banyak situs yang menginspirasi, Website Saya Indonesia merupakan contoh nyata bagaimana widget donasi dapat diintegrasikan dengan rapi, menarik, dan efektif.
Dalam artikel ini, kita akan membahas cara membuat widget donasi di Blogger, mulai dari konsep, desain, hingga implementasi menggunakan kode HTML, CSS, dan JavaScript sederhana. Tujuannya adalah menciptakan widget donasi profesional seperti yang digunakan pada Website Saya Indonesia.
Mari kita mulai.
Artinya Widget Donasi?
Widget donasi adalah sebuah elemen di dalam website atau blog yang memungkinkan pengunjung untuk memberikan dukungan finansial kepada pemilik situs. Dukungan ini bisa dalam bentuk transfer bank, pembayaran e-wallet, atau menggunakan metode QRIS.
Di era konten kreator saat ini, widget semacam ini bukan lagi sekadar tambahan, tetapi telah menjadi bagian penting untuk mendukung operasional blog, membeli perangkat baru, atau sekadar membayar domain dan hosting.
Mengapa Blogger Memerlukan Widget Donasi?
Ada banyak alasan mengapa kamu harus mempertimbangkan memasang widget donasi di blog kamu, di antaranya:
Mendukung pengembangan konten: Donasi bisa digunakan untuk meningkatkan kualitas tulisan atau membeli lisensi tools premium.
Membangun komunitas: Pengunjung merasa lebih terhubung jika mereka bisa langsung mendukung kreator favorit mereka.
Meningkatkan kredibilitas: Adanya widget donasi membuat blog terlihat lebih profesional.
Alternatif monetisasi: Selain iklan, donasi menjadi sumber pendapatan lain yang efektif.
Bagi kamu yang menggunakan Blogger, memasang widget donasi adalah langkah cerdas untuk meningkatkan peluang mendapatkan apresiasi dari audiens.
Widget Donasi Blogger Ala SayaIndonesia.Com
Jika kamu pernah mengunjungi Website Saya Indonesia, kamu akan melihat bagaimana widget donasi mereka dirancang sangat rapi, simpel, namun tetap profesional.
Ciri khas widget donasi mereka adalah:
Menggunakan accordion untuk menampilkan pilihan rekening.
Menyediakan tombol salin yang praktis.
Menampilkan QRIS dalam tampilan pop-up untuk pembayaran cepat.
Desain yang minimalis dan ringan sehingga cepat dimuat.
Tujuan kita dalam artikel ini adalah membuat widget serupa, tetapi diimplementasikan di platform Blogger.
Tools dan Bahan Membuat Widget Donasi Di Blog Yang Dibutuhkan
Sebelum memulai, pastikan kamu telah menyiapkan:
Akses ke Blogger (tentunya).
Nomor rekening atau akun e-wallet yang aktif.
QRIS gambar (bisa didapat dari merchant provider).
Sedikit pengetahuan HTML, CSS, dan JavaScript (sangat dasar, akan dijelaskan lengkap).
Konsep Widget Donasi Blogger yang Akan Dibuat
Widget donasi kita akan terdiri dari beberapa bagian:
Accordion tombol untuk membuka pilihan bank atau e-wallet.
Nomor rekening tampil bersama tombol salin di sebelah kanan.
Tombol QRIS sebagai salah satu pilihan donasi cepat.
Pop-up Modal yang muncul saat tombol QRIS diklik, menampilkan gambar QRIS.
Semua elemen ini akan dirancang responif, ringan, dan SEO-friendly.
Langkah-Langkah Membuat Widget Donasi di Blogger
1. Masuk ke Dashboard Blogger
Login ke akun Blogger kamu, pilih blog yang ingin dipasang widget donasi, lalu:
Buka menu Tata Letak.
Klik Tambahkan Gadget di bagian sidebar atau footer (sesuai keinginan).
Pilih HTML/Javascript.
Di sinilah kita akan memasukkan kode widget donasi.
2. Menulis Struktur HTML Widget Donasi
Masukkan kode HTML berikut:
<div class="accordion-container">
<div class="accordion">
<button class="accordion-button">BRI</button>
<div class="accordion-content">
<div class="rekening-row">
<span class="rekening-number" id="bri">813201005292502</span>
<button class="copy-button" onclick="copyText('bri')">Salin</button>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-button">SeaBank</button>
<div class="accordion-content">
<div class="rekening-row">
<span class="rekening-number" id="seabank">901353934119</span>
<button class="copy-button" onclick="copyText('seabank')">Salin</button>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-button">Gopay</button>
<div class="accordion-content">
<div class="rekening-row">
<span class="rekening-number" id="gopay">085176719312</span>
<button class="copy-button" onclick="copyText('gopay')">Salin</button>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-button">ShopeePay</button>
<div class="accordion-content">
<div class="rekening-row">
<span class="rekening-number" id="shopeepay">085176719312</span>
<button class="copy-button" onclick="copyText('shopeepay')">Salin</button>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-button" onclick="openModal()">QRIS</button>
</div>
</div>
<div id="qrisModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h3>Scan QRIS Berikut</h3>
<img src="https://via.placeholder.com/300x300.png?text=QRIS" alt="QRIS" class="qris-image">
</div>
</div>
3. Menambahkan CSS Untuk Styling
Tambahkan kode CSS berikut di dalam <style>:
<style>
/* CSS lengkap seperti pada kode sebelumnya */
</style>
CSS ini membuat tombol accordion tampil menarik, tombol salin elegan, dan modal pop-up QRIS terlihat rapi.
4. Menambahkan JavaScript Untuk Interaktivitas
Masukkan kode berikut untuk menjalankan fungsi tombol:
<script>
/* JS lengkap seperti pada kode sebelumnya */
</script>
Tips Membuat Widget Donasi Di Blog Lebih Menarik
Agar widget donasi kamu benar-benar maksimal:
Gunakan ikon kecil di sebelah nama bank untuk visual lebih bagus.
Tambahkan notifikasi mini saat salin berhasil ("Tersalin!").
Pastikan QRIS kamu beresolusi tinggi agar mudah dipindai.
Sesuaikan warna background widget dengan warna tema blog.
Apakah Widget Donasi Di Blog Aman?
Tentu saja!
Karena:
Tidak menggunakan API eksternal yang berbahaya.
Data rekening ditampilkan secara publik.
Tidak ada transaksi online langsung dari blog.
Tetapi tetap disarankan untuk:
Tidak mencantumkan informasi pribadi berlebihan.
Mengganti QRIS jika ada perubahan akun penerima.
Kesimpulan
Memasang widget donasi di Blogger bukanlah hal yang sulit, bahkan bisa dilakukan dalam hitungan menit jika kamu mengikuti panduan ini. Dengan widget yang menarik seperti Website Saya Indonesia, peluang mendapatkan dukungan nyata dari pengunjung akan semakin besar.
Widget donasi bukan hanya sekadar fitur tambahan, tetapi merupakan bentuk apresiasi dua arah antara kreator dan audiens.
Mulailah dari sekarang, percantik blog kamu dengan widget donasi profesional, dan rasakan bagaimana perubahan kecil ini dapat membawa dampak besar bagi perkembangan blog kamu.
FAQ Tentang Widget Donasi Blogger
Q: Apakah widget ini bisa dipasang di platform lain selain Blogger?
A: Bisa, karena berbasis HTML/CSS/JS murni.
Q: Apakah perlu domain berbayar untuk memasang widget ini?
A: Tidak perlu. Blogspot gratis pun bisa.
Q: Bagaimana jika saya ingin menambahkan metode pembayaran lain?
A: Tinggal duplikasi blok accordion dan ganti isinya sesuai metode yang baru.
Q: Apakah ada risiko penipuan?
A: Pastikan nomor rekening benar dan QRIS aktif. Umumnya aman.
Rate This Article
Thanks for reading: Widget Kotak Donasi Blog Elegan, Sorry, my English is bad:)
