Jika kamu memiliki kritik dan saran, hubungi kami melalui Kontak Kami
Beranda
Blogger

Cara Membuat Widget Kotak Donasi di Blogger


     Donasi adalah satu cara untuk menambahkan penghasilan secara sukarela dari para pengunjung. Maka itu, kotak donasi dibuat dengan sebagus mungkin agar para pengunjung tertarik untuk menysihkan sedikit pendapatan nya kepada kamu melalui kotak donasi yang sudah kamu buat. Adapun tujuan saya memasang kotak donasi ini adalah agar blog terlihat lebih lengkap sehingga dapat menarik para pengunjung untuk membaca artikel yang saya buat. Bagi saya sendiri pun, jika ada yang berdonasi saya ucapkan terimakasih banyak. Dan jika tidak memberikan donasi pun tidak masalah. Karena tujuan utama saya menuliskan berbagai artikel di blog ini adalah karena saya suka mengetik dan suka memberikan tutorial tutorial menarik. Sisanya adalah karena pendapatan melalui adsense.

Cara Pasang Widget Kotak Donasi di Blogger

Pertama, cari kode </style> dan tambahkan codingan CSS ini tepat diatas code </style>
.Donasi {
  --background: #f9f9f9;
  --backgroundHover: #f0f0f0;
  --color: #2f2f2f;
  --colorHover: #2f2f2f;
  --icon: #5c5c5c;
  --col: 2;
  margin-top: 2rem;
}
.Donasi path {
  fill: none;
  stroke: var(--icon);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.Donasi svg:first-child {
  height: 2rem;
  width: 35px;
}
.Donasi svg:last-child {
  height: 1rem;
  width: 1rem;
}
.Donasi-judul {
  font-weight: 700;
  margin-bottom: 1rem;
}
.Donasi img {
  width: 35px;
}
.Donasi-ikon {
  margin-right: 1rem;
}
.Donasi-isi {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--col), 1fr);
}
.Donasi-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;
}
.Donasi-isi a:hover {
  background-color: var(--backgroundHover);
  color: var(--colorHover);
  text-decoration: none;
}
.Donasi-isi .wallet {
  flex-direction: column;
}
.Donasi-isi .wallet i {
  display: block;
  font-size: 11px;
  font-style: normal;
  line-height: 13px;
}
.Donasi-isi a, .Donasi-isi a span {
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .Donasi-isi {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 568px) {
  .Donasi-isi {
    grid-template-columns: repeat(1, 1fr);
  }
}
Setelah menambahkan codingan CSS nya, sekarang saya akan mencoba membuat kotak donasi nya. Contohnya disini saya akan membuat 5 kotak donasi, diantaranya : Saweria, Trakteer, Buy Me a Coffee, Paypal dan Dompet Digital. Berikut ini codingan nya.
<div class='Donasi'>
  <div class='Donasi-judul'>Support Freeze Gans</div>
  <div class='Donasi-isi'>

    <!-- Saweria -->
    <a href='https://saweria.co/ID' rel='nofollow noopener' target='_blank' title='Donasi via Saweria'>
      <img alt='Saweria' src='https://raw.githubusercontent.com/Freeze-Gans/Freeze-Gans/master/img/saweria-freeze.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://raw.githubusercontent.com/Freeze-Gans/Freeze-Gans/master/img/trakteer-freeze.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://raw.githubusercontent.com/Freeze-Gans/Freeze-Gans/master/img/paypal-freeze.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://raw.githubusercontent.com/Freeze-Gans/Freeze-Gans/master/img/buy-coffee-freeze.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>087875736841</i>
      </div>
    </a>
  </div>
</div>

Kamu bisa mengubah tautan nya dari masing masing kotak donasi. Kecuali kotak donasi Dompet Digital yang menggunakan nomor telepon.

Artikel Menarik Lainnya :
Untuk penempatan kotak donasi nya, bisa disesuaikan dengan keinginan masing - masing. Contohnya saya menempatkan kotak donasi ini tepat dibawah nya code <data:post.body/>. Untuk contoh demo nya, bisa kamu lihat di bawah artikel ini. Kamu juga bisa menambahkan kotak donasi lainnya seperti Bank. Jika kamu ingin  menambahkan Bank, codingan nya seperti dibawah ini.
<!-- transfer bank -->
    <a href='#' onclick='return false;' title='Transfer Bank'>
      <svg class='line' viewBox='0 0 24 24'><path d='M2 8.50488H22' stroke-miterlimit='10'/><path d='M6 16.5049H8' stroke-miterlimit='10'/><path d='M10.5 16.5049H14.5' stroke-miterlimit='10'/><path d='M6.44 3.50488H17.55C21.11 3.50488 22 4.38488 22 7.89488V16.1049C22 19.6149 21.11 20.4949 17.56 20.4949H6.44C2.89 20.5049 2 19.6249 2 16.1149V7.89488C2 4.38488 2.89 3.50488 6.44 3.50488Z'/></svg>
      <div class='wallet'>
        <span>Nama Bank</span>
        <i>9018xxxxxxxx</i>
      </div>
    </a>
Kamu cukup mengubah nama bank dan no rekening nya saja.
Demo
Itulah caranya Membuat Widget Kotak Donasi di Blogger. Jika kamu masih belum memahaminya, silahkan bertanya di kolom komentar. Sekian dan Terimakasih.