Hallo, kali ini admin Mrchll Studio akan membagikan tutorial Cara membuat widget donasi ala igniel
Donasi adalah salah satu cara mendapatkan dana sukarela dari pengunjung. Widget ini dapat membantu anda untuk mendapatkan dukungan dari pengunjung blog anda!
Sebenarnya, ini karena saya telah mengunjungi blog www.igniel.com dan melihat di semua postingan terdapat widget Donasi tersebut, jadi saya akan membagikan tutorial Cara membuat widget donasi ala igniel.
Oh iya, widget ini bisa digunakan di semua website seperti blogger, wordpress, dan lain lain.
Untuk tampilan widget mungkin tidak akan langsung mirip dengan contoh, akibat CSS bawaan template. Silahkan cocokkan lagi!
Ingin melihat tampilan widget donasi? silahkan klik tombol dibawah ini.
Cara membuat widget donasi ala igniel di blogger
Disarankan untuk mencadangkan template agar tidak terjadinya hal hal yang tidak diinginkan
Step 1: pergi ke halaman blogger
Step 2: klik tema
Step 3: pilih edit html
Step 4: salin kode dibawah ini, lalu taruh di atas kode </style> atau ]]></b:skin>.
* Widget Donasi ala Igniel */
.mrchllDonasi{--background:#f9f9f9;--backgroundHover:#f0f0f0;--color:#2f2f2f;--colorHover:#2f2f2f;--icon:#5c5c5c;--col:2;margin-top:2rem}
.mrchllDonasi path{fill:none;stroke:var(--icon);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
.mrchllDonasi svg:first-child{height:2rem;width:35px}
.mrchllDonasi svg:last-child{height:1rem;width:1rem}
.mrchllDonasi-judul{font-weight:700;margin-bottom:1rem}
.mrchllDonasi img{width:35px}
.mrchllDonasi-ikon{margin-right:1rem}
.mrchllDonasi-isi{display:grid;gap:1rem;grid-template-columns:repeat(var(--col),1fr)}
.mrchllDonasi-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}
.mrchllDonasi-isi a:hover{background-color:var(--backgroundHover);color:var(--colorHover);text-decoration:none}
.mrchllDonasi-isi .wallet{flex-direction:column}
.mrchllDonasi-isi .wallet i{display:block;font-size:11px;font-style:normal;line-height:13px}
.mrchllDonasi-isi a,.mrchllDonasi-isi a span{flex-grow:1}
@media screen and (max-width:768px){.mrchllDonasi-isi{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:568px){.mrchllDonasi-isi{grid-template-columns:repeat(1,1fr)}}
Step 5: lalu simpan kode dibawah ini, lalu taruh dimanapun sesuai selera kalian, saya contohkan 4 penyedia, yaitu saweria, trakteer, buy me a coffe, dan dompet digital, silahkan tambah & hapus atau modifikasi sesuai keinginan kalian.
<!-- Widget Donasi ala Igniel -->
<div class='mrchllDonasi'>
<div class='mrchllDonasi-judul'>Support Mrchll</div>
<div class='mrchllDonasi-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' 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>08XXXXXXXXXX</i>
</div>
</a>
</div>
</div>
Bagian yang saya beri tanda ID ganti dengan username kalian masing - masing, lalu bagian yang saya beri tanda 08XXXXXXXXXX ganti dengan nomor dompet digital kalian masing - masing
Sekian, tutorial cara membuat widget donasi ala igniel di blogger atau wordpress ini, semoga bermanfaat!
Referensi:
https://www.igniel.com/2023/04/widget-donasi-blog.html
Posting Komentar