Membuat Widget Donasi Lengkap Semua Rekening Di Blogger

Updated: 27 Sept, 2024 • 0 • min read

Table of Contents

Membuat widget donasi di sebuah Blogger, merupakan cara ampuh supaya bisa mendapat tambahan penghasilan dari website/blog. Namun penghasilan yang didapat dari widget donasi yang dibuat para blogger tidak menentu, karena ini sifatnya sukarela yang diberikan oleh pengunjung blog anda.

Jika anda ingin membuat widget donasi ala carangeblog.com , anda bisa membaca artikel ini dari awal sampai akhir.

Cara Membuat Widget Donasi Lengkap di Blogger: Panduan Mudah dan Praktis

Blogger telah menjadi salah satu platform blogging paling populer di dunia, yang menawarkan kemudahan bagi para pengguna untuk membuat dan mengelola blog mereka. Sebagai seorang blogger, Anda mungkin pernah mempertimbangkan untuk menambahkan widget donasi di blog Anda, baik untuk mendukung biaya operasional atau mengajak pembaca berpartisipasi dalam kegiatan amal. Widget donasi di Blogger dapat menjadi solusi yang tepat untuk memudahkan pembaca memberikan dukungan finansial secara langsung.

Pada artikel ini, kami akan membahas cara membuat widget donasi lengkap di Blogger yang meliputi berbagai metode seperti Paypal, QRIS, dan transfer bank. Kami juga akan menjelaskan fungsi tombol donasi di Blogger, manfaat tombol donasi di Blogger, dan tentu saja, memberikan panduan lengkap tentang proses pembuatannya.

Mengapa Penting Memasang Widget Donasi di Blogger?

Sebelum memulai panduan, penting untuk memahami kenapa tombol donasi bisa menjadi bagian penting dari blog Anda. Berikut beberapa alasannya:

1. Mendukung Konten Berkualitas:

Sebagai seorang blogger, menghasilkan konten yang berkualitas membutuhkan waktu dan usaha. Dengan adanya donasi, pembaca dapat menunjukkan apresiasi dan mendukung Anda untuk terus menghasilkan konten yang bermanfaat.

2. Sumber Penghasilan Alternatif:

Selain iklan atau program afiliasi, widget donasi dapat menjadi sumber penghasilan alternatif. Hal ini sangat bermanfaat terutama bagi blogger yang tidak menginginkan banyak iklan di blognya.

3. Mendukung Kegiatan Amal:

Jika blog Anda berfokus pada kegiatan sosial atau amal, tombol donasi memungkinkan pengunjung untuk langsung berkontribusi dalam kegiatan yang Anda jalankan.

Fungsi Tombol Donasi di Blogger

Widget donasi di Blogger memiliki beberapa fungsi penting yang dapat mendukung berbagai kebutuhan blog Anda, antara lain:

1. Memudahkan Pembaca Berdonasi:

Dengan adanya tombol donasi, pembaca tidak perlu melakukan transfer manual. Mereka cukup klik tombol tersebut, lalu memilih metode pembayaran yang disediakan.

2. Meningkatkan Kredibilitas:

Blog yang memiliki widget donasi biasanya dinilai lebih profesional karena menunjukkan bahwa si penulis atau pemilik blog berinvestasi dalam pembuatan konten.

3. Menjaga Keterlibatan Pembaca:

Ketika pembaca merasa berkontribusi dalam mendukung blog favorit mereka, keterikatan emosional akan semakin kuat, yang pada gilirannya akan meningkatkan loyalitas pembaca.

Manfaat Tombol Donasi di Blogger

Selain fungsinya yang jelas, terdapat beberapa manfaat tombol donasi di Blogger yang dapat Anda rasakan, baik secara langsung maupun tidak langsung:

1. Pendapatan Tambahan:

Seiring bertambahnya pengunjung setia, peluang untuk mendapatkan donasi secara konsisten juga meningkat. Ini menjadi alternatif sumber pendapatan bagi blogger selain dari iklan atau program afiliasi.

2. Menghindari Penggunaan Iklan Berlebihan:

Tidak semua pembaca menyukai blog yang dipenuhi iklan. Dengan widget donasi, Anda bisa mengurangi jumlah iklan di blog tanpa mengorbankan pendapatan.

3. Kemandirian Finansial:

Dengan tombol donasi, Anda tidak harus bergantung sepenuhnya pada pihak ketiga seperti platform iklan atau sponsor. Anda bisa langsung mendapatkan dukungan dari pembaca yang benar-benar menghargai konten Anda.

4. Dukungan untuk Proyek Khusus:

Anda juga bisa menggunakan tombol donasi untuk mendukung proyek-proyek tertentu seperti penulisan buku, penelitian, atau pengembangan blog.

Panduan Lengkap Membuat Widget Donasi di Blogger

Sekarang, kita akan masuk ke bagian utama, yaitu *cara membuat widget donasi lengkap di Blogger*. Di sini, Anda akan mempelajari cara menambahkan berbagai metode pembayaran, seperti Paypal, QRIS, dan transfer bank.

1. Membuat Widget Donasi Paypal di Blogger

Paypal adalah salah satu platform pembayaran online yang paling populer dan aman di dunia. Berikut langkah-langkahnya:

1. Daftar Akun Paypal:

Jika belum memiliki akun Paypal, kunjungi situs resmi Paypal dan daftar akun baru. Pastikan akun Anda terverifikasi agar bisa menerima pembayaran.

2. Buat Tombol Donasi di Paypal:

- Login ke akun Paypal Anda.
- Pilih menu “Alat” lalu klik “Tombol Paypal.”
- Pilih jenis tombol sebagai “Donasi.”
- Sesuaikan pengaturan, seperti mata uang dan jumlah donasi, lalu salin url Paypal akun anda.

2. Membuat Widget Donasi dengan QRIS di Blogger

QRIS (Quick Response Code Indonesian Standard) memungkinkan pembayaran donasi dengan menggunakan dompet digital, sehingga sangat praktis bagi pengguna Indonesia.

1. Buat QRIS:

Untuk mendapatkan kode QRIS, Anda bisa mendaftarkan diri di penyedia layanan seperti GoPay, OVO, atau ShopeePay yang mendukung QRIS. Anda akan diberikan kode QR yang bisa digunakan untuk menerima donasi. Ubah gambar qris anda menjadi link.

<img src="LINK_GAMBAR_QRIS" alt="Donasi via QRIS">

Simpan, dan link gambar kode QRIS yang sudah anda buat.

3. Membuat Widget Donasi dengan Transfer Bank di Blogger

Untuk pembaca yang lebih suka metode transfer bank, Anda bisa menambahkan informasi rekening di blog.

1. Tambahkan Informasi Rekening:

Siapkan informasi seperti nama bank, nomor rekening, dan atas nama.
Buka menu "Layout" di Blogger.

Kode Widget Donasi Untuk Blogger

Berikut adalah kode widget donasi yang perlu anda pasang di blogger:

1. Pasang Kode CSS Di Template Blogger

Silahkan pasang kode CSS dibawah ini di pengaturan CSS template blogger anda.

.accordion {
background-color: white;
border-radius: 10px;
padding: 15px;
width: 100%;
margin: 20px auto;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion h2 {
color: #1a2a44;
font-size: 20px;
margin-bottom: 20px;
}

.accordion-item {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
}

.accordion-item-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 10px;
background-color: #f7f7f7;
border-radius: 8px;
transition: background-color 0.3s ease;
}

.accordion-item-header:hover {
background-color: #e0e0e0;
}

.accordion-item-header img {
width: 32px;
height: 32px;
margin-right: 10px;
}

.accordion-item-header span {
font-size: 16px;
color: #333;
display: flex;
align-items: center;
}

.accordion-item-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 10px;
}

.accordion-item-content p {
padding: 10px 0;
margin: 0;
color: #555;
}

.arrow {
transition: transform 0.3s ease;
}

input[type="checkbox"] {
display: none;
}

/* Ketinggian otomatis saat dicentang */
input[type="checkbox"]:checked ~ .accordion-item-content {
max-height: none; /* Menghilangkan batasan tinggi */
overflow: visible; /* Memastikan konten yang diperluas ditampilkan */
}

input[type="checkbox"]:checked ~ .accordion-item-header .arrow {
transform: rotate(90deg);
}

.copy-button {
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
}

.copy-button:hover {
background-color: #0056b3;
}

.bank-card {
display: flex;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
}

.logo-container {
margin-right: 15px;
}

.bank-logo {
width: 100px; /* Sesuaikan ukuran logo sesuai kebutuhan */
height: auto;
}

.info-container {
text-align: left;
}

2. Pasang Javascript Di Template Blogger

Selanjutnya anda pasang kode javascript dibawah ini sebelum kode </body> di pengaturan template blogger anda.

<script>
function copyAccountNumber(accountNumber) {
navigator.clipboard.writeText(accountNumber).then(() => {
alert('Nomor rekening telah disalin: ' + accountNumber);
}).catch(err => {
console.error('Gagal menyalin: ', err);
});
}
</script>

3. Pasang Kode Html Widget Donasi Di Tata Letak Blogger Anda

Selanjutnya memasang kode html yang menampilkan tombol donasi di blogger anda. Pasang saja di tata letak Blogger anda diposisi manapun yang diinginkan.

<div class="accordion">
<h2>Support CaraNgeblog.Com</h2>


<div class="accordion-item">
<input type="checkbox" id="item-1" />
<label class="accordion-item-header" for="item-1">
<span><img src="https://i.ibb.co/v1NsJJP/paypal.png" alt="PayPal" />Donasi Paypal</span>
<span class="arrow">▶</span>
</label>
<div class="accordion-item-content">
<p>Link donasi: <a href="https://www.paypal.com/paypalme/carangeblogdotcom">https://www.paypal.com/paypalme/carangeblogdotcom</a></p>
<a class="button-keren" href="https://www.paypal.com/paypalme/carangeblogdotcom">Klik Disini</a>
</div>
</div>

<div class="accordion-item">
<input type="checkbox" id="item-2" />
<label class="accordion-item-header" for="item-2">
<span><img src="https://i.ibb.co/17xwsxP/scanner.png" alt="QRIS" />Donasi via Qris</span>
<span class="arrow">▶</span>
</label>
<div class="accordion-item-content">
<p>Mohon maaf, QRIS Mimin belum punya</p>
</div>
</div>

<div class="accordion-item">
<input type="checkbox" id="item-3" />
<label class="accordion-item-header" for="item-3">
<span><img src="https://i.ibb.co/jkRZbwr/bank.png" alt="Donate via Bank" />Donate via Bank</span>
<span class="arrow">▶</span>
</label>
<div class="accordion-item-content">

<div class="bank-card">
<div class="logo-container">
<img src="https://i.ibb.co.com/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 class="bank-card">
<div class="logo-container">
<img src="https://i.ibb.co.com/FsJ7x6r/images.png" alt="Logo Bank" class="bank-logo" />
</div>
<div class="info-container">
<h2>Bank BCA Digital Blu</h2>
<p><strong>Nomor Rekening:</strong> 090115903020</p>
<p><strong>Nama Pemilik:</strong> MuslihUdin</p>
<button class="copy-button" onclick="copyAccountNumber('090115903020')">Copy Nomor Rekening</button>
</div>
</div>
<div class="bank-card">
<div class="logo-container">
<img src="https://i.ibb.co.com/Ms84k73/images-1.png" alt="Logo Bank" class="bank-logo" />
</div>
<div class="info-container">
<h2>Bank BSI</h2>
<p><strong>Nomor Rekening:</strong> 7285343407</p>
<p><strong>Nama Pemilik:</strong> MuslihUdin</p>
<button class="copy-button" onclick="copyAccountNumber('7285343407')">Copy Nomor Rekening</button>
</div>
</div>
</div>
</div>

<div class="accordion-item">
<input type="checkbox" id="item-4" />
<label class="accordion-item-header" for="item-4">
<span><img src="https://i.ibb.co.com/TrNxtYm/reward.png" alt="kopi" />About Donation</span>
<span class="arrow">▶</span>
</label>
<div class="accordion-item-content">
<p>jika artikel yang di publikasikan di blog CaraNgeblog.Com
Bermanfaat ,
Kamu Bisa Mendukung Dengan Berdonasi Seikhlasnya.
<br />
<br />
Jika Anda Berdonasi,
Saya Kedepannya Agar Lebih Semangat Lagi Menulis Artikel Yang Lebih Berkualitas Dan Bermanfaat.
<br />
<br />
Donasi Yang Anda Berikan Nantinya Akan Kami Menjadi Beberapa Bagian Seperti :
1. 20% Dari Total Donasi Yang Terkumpul Setiap Akhir Bulan
Akan Diberikan Kepada Yang Membutuhkan. Pemberian Berupa Makanan Gratis, Dll.
<br />
<br />
2. 30% Dana Donasi Yang Terkumpul Akan Diberikan Kepada Para Penulis Tamu CaraNgeblog.Com Yang Sudah Ambil Bagian Ikut Menyukseskan Dan Membagikan Tulisanya Yang Berkualitas Tinggi.
<br />
<br />
3. 50% Dana Donasi yang Terkumpul akan digunakan untuk perawatan blog CaraNgeblogDotCom seperti :
<br />
1. Biaya Tahunan Domain
2. Biaya Lainya Yang Berkepentingan Dengan CaraNgeblog.Com
</p>
</div>
</div>
</div>

Anda bisa menyesuaikan kodenya berdasarkan fungsi donasi yang anda inginkan.

Membuat widget donasi di Blogger adalah langkah yang tepat untuk mendapatkan dukungan finansial dari pembaca Anda. Dengan menyediakan berbagai metode seperti Paypal, QRIS, dan transfer bank, Anda memudahkan pengunjung dalam memberikan donasi sesuai dengan preferensi mereka. Selain memberikan manfaat finansial, widget donasi juga dapat meningkatkan keterikatan pembaca dengan blog Anda.

Dengan mengikuti panduan lengkap cara membuat widget tombol donasi di Blogger ini, Anda kini dapat dengan mudah menambahkan opsi donasi dan mulai merasakan manfaatnya. Jadi, tunggu apa lagi? Segera pasang tombol donasi di blog Anda dan dapatkan dukungan untuk terus berkarya!

Jika kamu ingin melihat demo dari kode widget donasi di blogger ala cara ngeblog kamu bisa melihat tombol donasi milik carangeblog.com di akhir artikel ini.

Cara Ngeblog