Cara Membuat Tombol Donasi PayPal di Blog

Membuat Tombol Donasi di Blog, Banyak blogger yang telah memanfaatkan tombol donasi sebagai salah satu sumber pendapatan mereka. Artikel ini akan membahas cara membuat tombol donasi yang menarik dan efektif di platform Blogger. Kami akan memandu Anda langkah demi langkah, mulai dari memilih platform donasi, mendapatkan kode tombol, hingga menambahkan dan mendesain tombol tersebut di blog Anda.

Ada beberapa platform donasi yang dapat Anda gunakan untuk membuat tombol donasi di blog Anda:

PayPal: Platform ini sangat populer dan banyak digunakan karena kemudahannya. PayPal menawarkan opsi untuk membuat tombol donasi dengan berbagai desain yang bisa disesuaikan.

Ko-fi: Ideal untuk kreator konten, Ko-fi memungkinkan pembaca untuk “membeli kopi” atau memberikan donasi kecil secara mudah. Platform ini juga menawarkan fitur tambahan seperti goal setting dan subscription.

Patreon: Untuk blog dengan pengikut yang setia, Patreon bisa menjadi pilihan terbaik. Dengan Patreon, pembaca dapat berlangganan dan memberikan donasi bulanan sebagai imbalan untuk konten eksklusif.

Cara Membuat Tombol Donasi PayPal di Blog

Persiapan:

1. Membuat Akun di Platform Donasi Pilihan:

   - Daftar di platform donasi yang Anda pilih (PayPal, Ko-fi, Patreon).

   - Verifikasi akun Anda sesuai instruksi dari platform tersebut.

2. Silahkan kalian tambahkan Kode CSS ini DI ATAS </style> atau ]]></b:skin>

/*
- Widget Donasi ala Igniel
- Source code: https://www.igniel.com/2023/04/widget-donasi-blog.html
*/
.ignielDonasi {
 --background: #f9f9f9;
 --backgroundHover: #f0f0f0;
 --color: #2f2f2f;
 --colorHover: #2f2f2f;
 --icon: #5c5c5c;
 --col: 2;
 margin-top: 2rem;
}
.ignielDonasi path {
 fill: none;
 stroke: var(--icon);
 stroke-width: 1.5px;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-miterlimit: 10;
}
.ignielDonasi svg:first-child {
 height: 2rem;
 width: 35px;
}
.ignielDonasi svg:last-child {
 height: 1rem;
 width: 1rem;
}
.ignielDonasi-judul {
 font-weight: 700;
 margin-bottom: 1rem;
}
 .ignielDonasi img {
 width: 35px;
}
.ignielDonasi-ikon {
 margin-right: 1rem;
}
.ignielDonasi-isi {
 display: grid;
 gap: 1rem;
 grid-template-columns: repeat(var(--col), 1fr);
}
.ignielDonasi-isi a {
 align-items: center;
 background-color: var(--background);
 border-radius: 7px;
 color: var(--color);
 display: flex;
 gap: 1rem;
 padding: .75rem 1.25rem;
 text-decoration: none;
 transition: all .3s;
}
.ignielDonasi-isi a:hover {
 background-color: var(--backgroundHover);
 color: var(--colorHover);
 text-decoration: none;
}
 .ignielDonasi-isi .wallet {
 flex-direction: column;
}
.ignielDonasi-isi .wallet i {
 display: block;
 font-size: 11px;
 font-style: normal;
 line-height: 13px;
}
.ignielDonasi-isi a, .ignielDonasi-isi a span {
flex-grow: 1;
}
@media screen and (max-width: 768px) {
.ignielDonasi-isi {
grid-template-columns: repeat(2, 1fr);
 }
}
@media screen and (max-width: 568px) {
.ignielDonasi-isi {
grid-template-columns: repeat(1, 1fr);
 }
}

3. Silahkan Kalian Tambahkan Kode Widget Tombol Donasi Blogger di bawah ini, silahkan kalian mau tambahkan dimana saja terserah kalian. 

<!--
- Widget Donasi ala Igniel
- Source code: https://www.igniel.com/2023/04/widget-donasi-blog.html
-->
<div class='ignielDonasi'>
<div class='ignielDonasi-judul'>Support Me!</div>
<div class='ignielDonasi-isi'>
<!-- Saweria -->
<a href='https://saweria.co/ID' rel='nofollow noopener' target='_blank' title='Donasi via Saweria'>
<img alt='Saweria' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmwjOYbtIh-peG5_26BFtFgRCBDPsoahSni6qPXWG43SRR04BBCMerSyUX8FCQp1upj4RuziDAwy19L_toRpnQaI61tzPKokNB8ixuyb06Ron2eK6qUXzwbmYQs4UcmYNp311k2-hkxO4lBZB6jBsyzno3xqQK5lxWF1itFn9oSgvsKPpWMdLVKgLhg/s0/saweria-igniel.png' title='Saweria'/>
<span>Donasi via Saweria</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<!-- Trakteer -->
<a href='https://trakteer.id/ID/tip' rel='nofollow noopener' target='_blank' title='Donasi via Trakteer'>
<img alt='Trakteer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieH10_JoSMU6bR0eymYzdd72g0uFT1CccEli9AytGV94ybITvbRlRfB4xQwAtvht6vNvrl5OU80ocHiHYj36pvxdxdJHtPsh1bBujNTW0SrzlyxqCkIzHjTU1Ofvnlxu2QPnEPtd1aGNwgbDeU8AAkFk5kqatpTf1QxysTl_k-Y8P7EQN-Abo3L-cNww/s0/trakteer-igniel.png' title='Trakteer'/>
<span>Donasi via Trakteer</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<!-- PayPal -->
<a href='https://paypal.me/ID' rel='nofollow noopener' target='_blank' title='PayPal'>
<img alt='PayPal' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNIOXLJCc6D1GehU8N254ogghPzS8IqveB06Jnf-Bd4iGBOdEsBna59Yhjz4ROsOXZyuZDX7eHtSfCJtHL8GF9X3A2OgCRosEvHSglei048KzAvgKykqELWtg8SbVqjHURZZ6BjLl5dMU-rscVoJkDfe8Rfo0U8pLjaUETvlDauwQn6LfHV2Mbhd-7g/s0/paypal-igniel.png' title='PayPal'/>
<span>Donasi via PayPal</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<!-- Buy Me A Coffee -->
<a href='https://www.buymeacoffee.com/ID' rel='nofollow noopener' target='_blank' title='Buy Me A Coffee'>
<img alt='Buy Me A Coffee' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOtz7jVrpYsRfjwZ8qbqeD-w0DPoW-lMuHEUkHx3M1_KtvKizO3DGRh32Ns2fc1TiwNTj8GSUp1Z8ABMu2A2iQtpRmxWyrlUQ9sMriF8i3RoCXKwUULop6QyS-bMNQ3QMtsG9INwzCqqpXr_1FDShUR9xO1ATJv0lnPbTe3qfwyWzjSaFyLYv7NjVS8g/s0/bmac-igniel.png' title='Buy Me A Coffee'/>
<span>Buy Me A Coffee</span>
<svg viewBox='0 0 24 24'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>
</a>
<!-- e-Wallet -->
<a href='#' onclick='return false;' title='Dana / OVO / GoPay'>
<svg viewBox='0 0 24 24'><path d='M18.04 13.55C17.62 13.96 17.38 14.55 17.44 15.18C17.53 16.26 18.52 17.05 19.6 17.05H21.5V18.24C21.5 20.31 19.81 22 17.74 22H6.26C4.19 22 2.5 20.31 2.5 18.24V11.51C2.5 9.44001 4.19 7.75 6.26 7.75H17.74C19.81 7.75 21.5 9.44001 21.5 11.51V12.95H19.48C18.92 12.95 18.41 13.17 18.04 13.55Z'/><path d='M2.5 12.4101V7.8401C2.5 6.6501 3.23 5.59006 4.34 5.17006L12.28 2.17006C13.52 1.70006 14.85 2.62009 14.85 3.95009V7.75008'/><path d='M22.5588 13.9702V16.0302C22.5588 16.5802 22.1188 17.0302 21.5588 17.0502H19.5988C18.5188 17.0502 17.5288 16.2602 17.4388 15.1802C17.3788 14.5502 17.6188 13.9602 18.0388 13.5502C18.4088 13.1702 18.9188 12.9502 19.4788 12.9502H21.5588C22.1188 12.9702 22.5588 13.4202 22.5588 13.9702Z'/><path d='M7 12H14'/></svg>
<div class='wallet'>
<span>Dana / OVO / GoPay</span>
<i>08******73981</i>
</div>
</a>
</div>
</div>

4. Silahkan kalian ganti ID dengan username milik kalian masing masing, dan nomor E-WALLET nya silahkan kalian ubah dengan milik kalian sendiri.

Menambahkan tombol donasi di blog Anda bisa menjadi langkah besar untuk mendukung biaya operasional dan membangun komunitas yang lebih kuat. Dengan mengikuti panduan di atas, Anda bisa membuat tombol donasi yang tidak hanya fungsional tetapi juga menarik bagi pembaca. Jangan ragu untuk segera menerapkan langkah-langkah ini dan lihat bagaimana kontribusi dari pembaca bisa membantu mengembangkan blog Anda lebih jauh lagi.