Widget Kotak Donasi Blog

---

Hallo guys, Kali ini admin Mrchllaja akan membagikan artikel Widget Kotak Donasi.

Apa itu donasi?

Donasi adalah salah satu cara untuk mendapatkan keuangan/perdanaan secara suka rela dari pengunjung. Oleh karena itu, saya memberikan tutorial kotak donasi untuk kalian, agar pengunjung dapat menyisihkan pendapatannya untuk kalian.

Sebenarnya kotak donasi ini dibuat oleh Igniel dari website www.igniel.com. Saya hanya mengubah bagian - bagian dan memperbaikinya. Ingin tutorial cara memasangnya? yuk liat dibawah ini...

---

Cara Memasang Kotak Donasi

Langkah 1: tambahkan css dibawah ini diatas kode </style> atau ]]></b:skin>

/*
- Kotak Donasi
- Created By : https://www.igniel.com
- Redesign By : https://mrchllaja.blogspot.com
*/
.mDonasi {
  --background: #f9f9f9;
  --backgroundHover: #f0f0f0;
  --color: #2f2f2f;
  --colorHover: #2f2f2f;
  --icon: #5c5c5c;
  --iconDRK: #f9f9f9;
  --colorDRK: #f9f9f9:
  --col: 2;
  --darkMode: rgba(50, 50, 50, 0.8);
  margin-top: 2rem;
}
.mDonasi path {
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.mDonasi svg:first-child {
  height: 2rem;
  width: 35px;
}
.mDonasi svg:last-child {
  height: 1rem;
  width: 1rem;
}
.mDonasi-judul {
  font-weight: 700;
  margin-bottom: 1rem;
}
.mDonasi img {
  width: 35px;
}
.mDonasi-ikon {
  margin-right: 1rem;
}
.mDonasi-isi {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--col), 1fr);
}
.mDonasi-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;
}
.mDonasi-isi a:hover {
  background-color: var(--backgroundHover);
  color: var(--colorHover);
  text-decoration: none;
}
.mDonasi-isi .wallet {
  flex-direction: column;
}
.mDonasi-isi .wallet i {
  display: block;
  font-size: 11px;
  font-style: normal;
  line-height: 13px;
}
.mDonasi-isi a, .mDonasi-isi a span {
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .mDonasi-isi {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 568px) {
  .mDonasi-isi {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* CSS Darkmode Sesuaikan (.drk) Dengan Template Kalian, Jika berbeda hapus css dibawah ini */
.drK .mDonasi path{stroke:var(--iconDRK)}
.drK .mDonasi a{background-color:var(--darkMode);color:var(--colorDRK)}
.drK .mDonasi-isi a:hover{background-color:var(--darkMode);color:var(--colorDRK)}

Keterangan

Value	Keterangan
--background	Warna background.
--backgroundHover	Warna background saat kotak disorot.
--color	Warna teks.
--colorDRK	Warna teks saat Dark mode.
--darkMode	Warna background saat Dark mode.
--colorHover	Warna teks saat kotak disorot.
--icon	Warna border dari ikon SVG.
--col	Jumlah kolom dari kotak donasi.

---

Langkah 2: simpan kode HTML dimanapun sesuai keinginan kalian.Saya contohkan menggunakan 4 penyedia yaitu Saweria, Trakteer, Buy Me a Coffe, dan Dompet digital. Silahkan tambah, hapus, atau modifikasi sesuai keinginan kalian.

<!--
- Kotak Donasi
- Created By: https://www.igniel.com
- Redesign By : https://mrchllaja.blogspot.com
-->
<div class='mDonasi'>
  <div class='mDonasi-judul'>Kotak Donasi</div>
  <div class='mDonasi-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 dompet digital kalian

---

Jika kalian ingin melihat tampilan kotak donasinya, anda bisa melihatnya melalui demo dibawah ini.

DEMO

Sekian, tutorial Widget Kotak Donasi ini, semoga bermanfaat bagi kalian :)

---

Referensi:
https://www.igniel.com/2023/04/widget-donasi-blog.html

Apa Reaksimu Setelah Membaca Artikel Ini?