Cara memasang widget kotak donasi (donate box) di Blogspot mirip seperti Igniel yang ada di bawah postingan. Widget bisa dipasang di WordPress juga.
Donasi adalah salah satu cara untuk mendapatkan pendanaan secara sukarela dari pengunjung. Maka dari itu, kotak atau widget donasi harus dibuat sebagus mungkin agar pengunjung tertarik untuk menyisihkan sedikit pendapatannya untuk kamu. Inilah cara untuk membuat kotak donasi minimalis yang menarik ala Igniel.
Kotak donasi di Blogger (Blogspot) yang saya pasang lebih berfungsi sebagai dekorasi sih sebenarnya. Ini karena saya baru mendapatkan 2 kali donasi sejak awal blog Igniel dibuka ulang di tahun 2016. Tidak masalah, saya tetap bersyukur. Sumber pendapatan utama blog Igniel memang bukan dari donasi.
Nampaknya ada yang ikut tertarik untuk memasang kotak donasi seperti Igniel. Sudah beberapa kali ada pengunjung yang berkomentar untuk dibuatkan tutorialnya, bahkan ada juga yang memasangnya di template premium segala. Jadi inilah tutorial membuat widget donasi (donate box) di Blogger mirip Igniel. Widget donasi ini bisa dipasang di WordPress juga.
Cara Pasang Widget Donasi di Blogger
Oya, sebelumnya, saya sudah membuat kotak donasi PayPal pada tahun 2019. Silakan dicoba juga kalau dirasa masih relevan.
Tampilan mungkin tidak akan langsung mirip seperti contoh akibat dari kode CSS bawaan template masing-masing. Silakan sesuaikan lagi.
Pertama-tama, 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);
}
}| Value | Keterangan |
|---|---|
--background |
Warna background. |
--backgroundHover |
Warna background saat kotak disorot. |
--color |
Warna teks. |
--colorHover |
Warna teks saat kotak disorot. |
--icon |
Warna border dari ikon SVG. |
--col |
Jumlah kolom dari kotak donasi. |
Kedua, simpan kode HTML widget donasi ini dimanapun kamu menginginkannya untuk muncul. Saya contohkan menggunakan 4 penyedia, yaitu Saweria, Trakteer, Buy Me a Coffee, dan Dompet Digital. Silakan tambah, hapus, atau modifikasi sesuai keinginan.
<!--
- Widget Donasi ala Igniel
- Source code: https://www.igniel.com/2023/04/widget-donasi-blog.html
-->
<div class='ignielDonasi'>
<div class='ignielDonasi-judul'>Support Igniel</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>081234567890</i>
</div>
</a>
</div>
</div>Ganti ID dengan username masing-masing, lalu ganti 081234567890 dengan nomor dari dompet digital yang dimiliki.
Untuk melihat hasilnya, kamu bisa cek langsung di blog ini di atas kolom komentar, halaman donasi, atau melalui Codepen saya.
Sekian tutorial singkat untuk memasang widget donasi (donate box) di Blogger dan WordPress versi terbaru ala Igniel. Semoga bermanfaat.