Widget Donasi Di Blogger Dan Blogspot, Demo Dan Cara Membuat Widget Donasi Di Blogspot, Demo Widget Donasi Pakai Blogspot/Blogger, Widget Donasi Di Blogger Semua Pembayaran.
Demo Dan Cara Membuat Widget Donasi di Blogger / Blogspot Lengkap dengan Semua Bank Menggunakan Accordion
Memiliki widget donasi di blog dapat membantu Anda mendapatkan dukungan finansial dari pengunjung. Widget ini bisa diintegrasikan ke platform Blogger dengan mudah menggunakan format HTML, CSS, dan JavaScript. Artikel ini akan memberikan panduan langkah demi langkah untuk membuat widget donasi yang menarik dengan fitur accordion, lengkap dengan informasi rekening dari berbagai bank. Simak selengkapnya!
Mengapa Menggunakan Widget Donasi di Blog?
- Mendukung Kreator Konten: Widget donasi memungkinkan pembaca berkontribusi langsung pada konten yang Anda buat.
- Mempermudah Pengunjung: Dengan tampilan yang rapi dan informatif, widget ini memberikan kenyamanan kepada pengunjung untuk memilih metode donasi.
- Fleksibel dan Personal: Anda dapat menambahkan berbagai opsi bank, e-wallet, atau bahkan metode pembayaran modern seperti QRIS.
Fitur Widget Donasi dengan Accordion
Widget ini dilengkapi dengan:
- Desain Accordion: Memungkinkan tampilan ringkas yang interaktif.
- Opsi Bank Beragam: Menampilkan beberapa bank besar dan e-wallet untuk fleksibilitas pembayaran.
- Fitur Salin Nomor Rekening: Pengunjung dapat menyalin nomor rekening hanya dengan satu klik.
- Responsif: Desain yang ramah untuk perangkat desktop maupun seluler.
Langkah Membuat Widget Donasi Di Blogger Lengkap Semua Metode Pembayaran
Bank Seabank Indonesia
Nomor Rekening: 901353934119
Nama Pemilik: MuslihUdin
Bank DIGITAL BCA
Nomor Rekening: 007596829387
Nama Pemilik: MuslihUdin
.jpeg)
Bank Syariah Indonesia
Nomor Rekening: Mohon Maaf Rekening Ini Sedang Limit
Nama Pemilik: MuslihUdin
Gopay
Nomor: 0895405964539
.png)
QRIS
Scan QR di aplikasi pembayaran untuk berdonasi.
1. Menambahkan Kode HTML
Kode HTML berikut adalah struktur utama widget. Anda bisa langsung menyalinnya ke bagian HTML Blogger Anda.
<div class="accordion">
<!-- Seabank -->
<div class="accordion-item">
<div class="accordion-header">
<span>Bank Seabank Indonesia</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M10 6l6 6-6 6"/></path></svg>
</div>
<div class="accordion-content">
<div class="bank-card">
<div class="logo-container">
<img src="https://i.ibb.co/xsgDPFz/images.jpg" alt="Logo Bank" class="bank-logo" />
</div>
<div class="info-container">
<h2>Bank Seabank Indonesia</h2>
<p><strong>Nomor Rekening:</strong> 901353934119</p>
<p><strong>Nama Pemilik:</strong> MuslihUdin</p>
<button class="copy-button" onclick="copyAccountNumber('901353934119')">Copy Nomor Rekening</button>
</div>
</div>
</div>
</div>
<!-- Tambahkan bank atau metode lainnya di sini -->
</div>
Struktur di atas dapat disesuaikan dengan nama bank atau metode pembayaran yang Anda miliki.
2. Menambahkan Gaya dengan CSS
Agar widget terlihat menarik, tambahkan kode CSS berikut ke blog Anda:
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 20px;
}
.accordion {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-header {
background-color: white;
padding: 15px;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.accordion-header:hover {
background-color: #f0f0f0;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #f9f9f9;
padding: 0 15px;
}
.copy-button {
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.copy-button:hover {
background-color: #0056b3;
}
</style>
CSS di atas memberikan tampilan profesional dengan efek transisi yang halus untuk setiap item accordion.
3. Menambahkan Fungsi Interaktif dengan JavaScript
Fungsi JavaScript berikut akan menambahkan interaktivitas pada accordion dan tombol salin nomor rekening:
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
const isActive = header.classList.contains('active');
document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('active'));
document.querySelectorAll('.accordion-content').forEach(c => c.style.maxHeight = null);
if (!isActive) {
header.classList.add('active');
content.style.maxHeight = content.scrollHeight + 'px';
}
});
});
function copyAccountNumber(accountNumber) {
navigator.clipboard.writeText(accountNumber).then(() => {
alert('Berhasil menyalin: ' + accountNumber);
}).catch(err => {
console.error('Gagal menyalin teks', err);
});
}
</script>
Script ini memastikan bahwa hanya satu accordion yang terbuka dalam satu waktu, serta mengaktifkan fitur salin teks.
Menambahkan Widget ke Blogger
- Buka Blogger: Login ke akun Anda di Blogger.
- Tambahkan Gadget HTML:
- Masuk ke Tata Letak > Tambahkan Gadget > HTML/Javascript.
- Salin kode HTML, CSS, dan JavaScript di atas ke dalam kolom.
- Simpan Perubahan: Simpan gadget dan pastikan untuk menempatkannya di lokasi yang diinginkan pada blog Anda.
Tips untuk Mengoptimalkan Widget
- Tambahkan Bank Lain: Jika Anda memiliki rekening di bank lain, tambahkan informasi tersebut ke widget.
- Gunakan Gambar yang Jelas: Pastikan logo bank memiliki resolusi tinggi agar terlihat profesional.
- Cek Responsivitas: Gunakan perangkat berbeda untuk memastikan widget terlihat sempurna di semua layar.
- Tambahkan QRIS: Jika memungkinkan, tambahkan metode pembayaran menggunakan QRIS untuk mempermudah donasi.
Manfaat Menggunakan Widget Donasi di Blogger
Selain mempermudah pengunjung untuk berdonasi, widget donasi memiliki berbagai manfaat yang signifikan, baik untuk Anda sebagai pemilik blog maupun untuk pengunjung. Berikut adalah beberapa manfaat utama:
1. Mendukung Monetisasi Blog
Widget donasi memberikan alternatif penghasilan pasif di luar iklan atau program afiliasi. Hal ini sangat membantu jika Anda ingin menjaga blog tetap bebas iklan atau lebih fokus pada konten.
2. Meningkatkan Interaksi dengan Pembaca
Dengan adanya fitur donasi, pengunjung merasa lebih terlibat dalam mendukung blog. Hal ini dapat menciptakan hubungan yang lebih kuat antara Anda dan audiens.
3. Fleksibilitas Metode Pembayaran
Widget ini memungkinkan Anda menawarkan berbagai opsi pembayaran, termasuk bank tradisional, dompet digital seperti Gopay, hingga metode modern seperti QRIS. Hal ini memudahkan berbagai kalangan untuk berdonasi.
4. Tampilan Profesional
Desain widget dengan fitur accordion membuat blog terlihat lebih modern dan terorganisasi. Pengunjung akan merasa nyaman menggunakan widget ini tanpa kebingungan.
5. Efisiensi dan Kemudahan Penggunaan
Fitur salin nomor rekening memudahkan pengunjung untuk menyalin informasi pembayaran tanpa risiko kesalahan. Hal ini meningkatkan peluang pengunjung benar-benar menyelesaikan transaksi donasi.
6. Menarik Donatur Potensial
Widget yang dirancang dengan baik dapat memberikan kesan profesional sehingga meningkatkan kepercayaan donatur potensial. Mereka akan lebih percaya untuk mendukung Anda secara finansial.
7. Meningkatkan Kredibilitas Blog
Dengan menampilkan informasi rekening yang lengkap dan terstruktur, blog Anda akan terlihat lebih terpercaya. Hal ini sangat penting untuk membangun reputasi di dunia digital.
8. Meningkatkan Kesempatan Dukungan Jangka Panjang
Pengunjung yang merasa mudah berdonasi akan lebih mungkin mendukung Anda di masa depan. Ini bisa menjadi salah satu cara untuk membangun komunitas pendukung setia.
9. Solusi untuk Kebutuhan Nonprofit
Jika blog Anda berfokus pada kegiatan sosial atau kampanye tertentu, widget donasi dapat menjadi alat efektif untuk menggalang dana dari pembaca.
10. Meningkatkan Loyalitas Pengunjung
Dengan memberikan opsi donasi, Anda menunjukkan transparansi kepada audiens. Hal ini bisa membangun rasa kepemilikan pengunjung terhadap blog Anda, sehingga mereka lebih loyal dan sering kembali.
Kesimpulan
Dengan menambahkan widget donasi ini, Anda tidak hanya mempermudah pengunjung untuk mendukung Anda, tetapi juga memberikan pengalaman yang lebih baik bagi mereka. Widget yang fungsional, informatif, dan profesional adalah investasi yang berharga untuk perkembangan blog Anda di masa depan.
Membuat widget donasi di Blogger menggunakan accordion adalah cara yang efektif untuk memberikan kemudahan kepada pengunjung dalam mendukung blog Anda. Dengan panduan ini, Anda dapat membuat widget yang menarik, fungsional, dan mudah digunakan. Jangan ragu untuk menyesuaikan desain agar sesuai dengan tema blog Anda. Selamat mencoba!
.jpeg)
.png)