Cara Membuat Widget Kotak Donasi Terbaru ala Igniel

Cara memasang widget kotak donasi (donate box) di Blogspot mirip seperti Igniel yang ada di bawah postingan. Widget bisa dipasang di WordPress juga.
Widget Donasi Blog Minimalis

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.

43
Cara Membuat Widget Kotak Donasi Terbaru ala Igniel
Cara Membuat Widget Kotak Donasi Terbaru ala Igniel
Cara memasang widget kotak donasi (donate box) di Blogspot mirip seperti Igniel yang ada di bawah postingan. Widget bisa dipasang di WordPress juga.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

43 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Arief Ghozaly
    15 April, 2024
    Profil: https://www.blogger.com/profile/17833529043191569411
    Thank you, mba. Sudah dipasang di blog saya: https://www.kage.my.id/
    Cuma memang ada beberapa kode yang mesti dihapus, salah satunya judul widget.
  • Prima Agus Setiyawan (Mas Prim)
    10 Februari, 2024
    Profil: https://www.blogger.com/profile/03785573382129352601
    Halo; kak; menarik juga, aku mau coba bikin widget-nya. Boleh nggak, kode tadi dipasang di halaman tersendiri? Aku punya web khusus siniar, mau tak pasang di halaman sendiri.
  • Perintis bukan Pewaris
    31 Desember, 2023
    Profil: https://www.blogger.com/profile/18298998549731576772
    sebelumnya terimakasih sudah sharing kk, kalau pasang link donasi di blog yang ada iklan adsense. Apakah ada penyelahgunaan kebijakan adsense terhadap pemasangan link donasi?
  • Mrchll
    27 Desember, 2023
    Profil: https://www.blogger.com/profile/02437236213195605422
    terimakasih kak tutorialnya.
    izin rewrite di blog saya kak
    https://www.mrchllstudio.biz.id
  • Admin
    03 September, 2023
    Profil: https://www.blogger.com/profile/06881528670430456620
    Itu di kode nya di tambahkan di widget tata letak atau di dalam kode html?
  • Riski Putra R
    22 Agustus, 2023
    Profil: https://www.blogger.com/profile/07881551327284958233
    Apa bisa disetel di wordpress om
  • CCN
    18 Agustus, 2023
    Profil: https://www.blogger.com/profile/10288871493948422241
    Mau tanya mbak, tampilan di desktop aman2 saja, tapi pas buka di HP kok ada yg rusak tampilannya mbak

    https://drive.google.com/file/d/1eMI9ZyMoHUgQLDD3P5bLCxCPi2_XaexK/view?usp=drivesdk
    • Igniel
      23 Agustus, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan untuk menyimpan CSS tidak dalam tag konsidional apapun.
  • MogiMogy
    27 Juli, 2023
    Profil: https://www.blogger.com/profile/15923159420617550287
    Nice bang
  • Kazue Kurosaki
    04 Juni, 2023
    Profil: https://www.blogger.com/profile/13889697874299399814
    Terima kasih kak tutorialnya
    Sangat bermanfaat
    Izin rewrite di blog saya kak
    https://kazuekuroshi.blogspot.com
  • Teuku.Net
    30 Mei, 2023
    Profil: https://www.blogger.com/profile/02049899818747226305
    Selamat siang bang... mau tanya nih sedikit,,, waktu saya masukkan kode CSS nya terus saya save kenapa bisa error ya bang? pdhal baru di CSS bang..

    "com.google.blogger.b2.layouts.framework.skin.InvalidVariableException: Invalid variable declaration in page skin: Variable is used but not defined. Input: endSide"

    maksud nya apa ini bang?
    • Igniel
      30 Mei, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti kode ini:
      margin-$endSide
      Jadi ini:
      margin-right
  • Aditya
    27 Mei, 2023
    Profil: https://www.blogger.com/profile/07949746856285208569
    Maaf mbak telat, tapi terima kasih atas tutorialnya
  • ADMIN
    27 Mei, 2023
    Profil: https://www.blogger.com/profile/02798750740196428876
    min untuk membuat tempat seperti naro codingan diatas itu jadi kotak ada tempat salin caranya gimana ya ?
    • Igniel
      28 Mei, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Namanya "syntax highlighter". Versi standarnya ada di sini:
      https://www.igniel.com/2018/08/syntax-highlighter-blog-css.html

      Yang pakai fungsi copy belum ada. Nanti dibikin dulu.
    • ADMIN
      28 Mei, 2023
      Profil: https://www.blogger.com/profile/02798750740196428876
      terimakasih banyak
  • Moch Alvinno Saputra
    07 Mei, 2023
    Profil: https://www.blogger.com/profile/00350415779210364615
    Terimakasih Kak berhasil sudah dicoba
  • PCNU LANDAK
    26 April, 2023
    Profil: https://www.blogger.com/profile/08754639297409746138
    Request donasi via bank
    • Igniel
      26 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang bagian e-wallet ganti aja pakai informasi bank.
  • Tulisan Guru
    19 April, 2023
    Profil: https://www.blogger.com/profile/12018773668249923918
    bagus kalau bisa di wp, saya coba coba gak bisa nih, hehehe
    • Igniel
      19 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa kak. Ini kodenya universal, gak ada yang khusus Blogspot.

      Simpan CSS & HTML di tempat yang seharusnya aja.
    • Tulisan Guru
      20 April, 2023
      Profil: https://www.blogger.com/profile/12018773668249923918
      Alhamdulillah bisa baru betul, kemarin ada salah pemasangan kak, terimakasih, yang belum solve ini yang iklan Parallax di tengah post nih, hehehe di WP gak bisa bisa
  • King Rockson
    17 April, 2023
    Profil: https://www.blogger.com/profile/13121884235152613877
    Can you create a tutorial for your text watermark?
    • Igniel
      19 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      We'll see about that.
    • King Rockson
      20 April, 2023
      Profil: https://www.blogger.com/profile/13121884235152613877
      Okay, I pray you do. I'll be waiting for it.
  • Bromin
    14 April, 2023
    Profil: https://www.blogger.com/profile/05977378971977605497
    Keren
  • Shireo
    12 April, 2023
    Profil: https://www.blogger.com/profile/12244152882230776550
    kurang darakmode nya :(
    • Shireo
      12 April, 2023
      Profil: https://www.blogger.com/profile/12244152882230776550
      caranya agar icon panah nya ikut drakmode gimna?
    • Igniel
      12 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tinggal tambahin CSSnya sendiri.
      .dark .ignielDonasi {
      --background: warna saat dark mode
      --backgroundHover: blabla sama juga
      ...
      ...
      }


      .dark = sesuai dengan nama class dari dark mode template masing-masing.
    • Shireo
      14 April, 2023
      Profil: https://www.blogger.com/profile/12244152882230776550
      udah aku biki css begini :/* CSS darkmode */
      .drK .ignielDonasi-isi a,.drK .ignielDonasi-isi a,.drK .ignielDonasi-isi a:hover,.drK .ignielDonasi-ikon,.drK .ignielDonasi svg,.drk.ignielDonasi svg{background-color:#2d2d30;color:#fefefe}

      Tapi ikon link/anak panahnya belum bisa minn
    • Igniel
      15 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya ada salah dikit di bagian CSS. Ganti kode ini:
      .ignielDonasi svg {
      Jadi ini:
      .ignielDonasi path {
    • Shireo
      16 April, 2023
      Profil: https://www.blogger.com/profile/12244152882230776550
      okai min makasih, udah bisa
  • Sprouvy
    12 April, 2023
    Profil: https://www.blogger.com/profile/04978866360479412763
    Mba igniel tutor biar breadcrumb nya gak sesuai alfabet dong. Jd urut berdasarkan mana yang diberi dulu
  • Xenoicy
    11 April, 2023
    Profil: https://www.blogger.com/profile/07123898444593098130
    Sedotttt
  • DaftarHPterbaik
    10 April, 2023
    Profil: https://www.blogger.com/profile/12689275011536783163
    Mba, blog saya daftarhpterbaik.blogspot.com di share ke Twitter ko ngga bisa ya, pake template fiksioner tolong sarannya gimana. Terima kasih...
  • Martdova
    10 April, 2023
    Profil: https://www.blogger.com/profile/11615250074607590475
    kode ke-2 itu kalo mau nerapin di template Igniplex taruh dmna ya? biar mirip spt diblog ini
    • Ehsaaan
      11 April, 2023
      Profil: https://www.blogger.com/profile/18301344476097593206
      naruhnya di bawah tag </article> atau sebelum kode Related Post
    • Igniel
      12 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Chat WhatsApp aja.