Cara Mudah Membuat Tombol Donasi

Cara Mudah Membuat Tombol Donasi ala Gila Temax Di Blogger

October 11, 2023 - (Updated: October 11, 2023)

Calvin Trixzy

KUAMANGMEDIA.BIZ.ID - Sebelum Membuat tombol donasi ada baiknya anda membaca lebih seksama agar tugas anda menjadi mudah dengan langkah-langkah berikut:

Pertama anda harus memilih platform donasi yang akan Anda gunakan, seperti PayPal, GoFundMe, atau platform lokal. Buat akun atau masuk jika sudah memiliki.

Setelah masuk, cari opsi untuk membuat kampanye atau tombol donasi. Biasanya, ini akan ada di panel pengguna Anda.

Isi informasi tentang kampanye Anda, termasuk judul, deskripsi, tujuan dana, dan tenggat waktu. Pastikan informasi ini jelas dan meyakinkan.

Pilih tampilan tombol donasi. Anda bisa memilih tampilan tombol yang sesuai dengan gaya situs web atau media sosial Anda.

Cara Mudah Membuat Tombol Donasi

Tentukan nilai-nilai donasi yang akan ditawarkan kepada para donatur. Biasanya, ada pilihan nilai yang sudah ditentukan dan opsi "lainnya" untuk jumlah kustom.

Anda bisa menambahkan gambar yang relevan dengan kampanye Anda untuk membuatnya lebih menarik.

Pilih Opsi Pembayaran

Pilih opsi pembayaran yang akan Anda terima. Pastikan platform donasi Anda mendukung opsi pembayaran yang Anda inginkan.

Jika Anda ingin menampilkan tombol donasi di situs web Anda, platform donasi biasanya akan memberikan kode embed. Salin dan tempel kode ini ke situs web Anda.

Langkah-langkah Membuat Tombol Donasi

Berikut ini langkah-langkah yang bisa anda ikuti untuk membuat tombol donasi yang sesuai keinginan.

Setelah jadi Bagikan kampanye donasi Anda melalui media sosial, email, atau saluran lainnya untuk mencapai audiens yang lebih luas.

Pasang script HTML di postingan Blogger dalam mode Tampilan HTML.

<div class="gila_temax_donate">
  <!-- Buy Me A Coffee -->
  <div class="gila_temax_donate_item buy_me_a_coffee">
    <div class="gila_temax_donate_image"><img alt="Buy Me A Coffee" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOK_cwYM1dyV1Q5OviNC3BAKoOUUOC5yPlS-vs_A70PS3NBZlBrj0iwNid6-FaxxF6nqiV3Eq0tIOWEArxzHKlujTIBO-CFgowMljZVoQVegoptMy43kSxYmbASqI8WmOvWfMNSHyci4xZnOnYMeVH0w820-HfemayII_l0Y0nwy2f4O5K5RilZ7nj/w200/Buy%20Me%20A%20Coffe.ico"></div>
    <div class="gila_temax_donate_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Buy Me A Coffee</a></div>
  </div>

  <!-- Trakteer -->
  <div class="gila_temax_donate_item trakteer">
    <div class="gila_temax_donate_image"><img alt="Trakteer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg518anHj0JTlm4sWrkNM-AuREycZuGcX0MnVd311TiBiyXeNDCNKNdQJXnk0gdtNmVsBpPF8STv9XxMtPvUyQSLD8TVQ1o2e7_syIsVHeGygyL11tQIdWr7firNmGDFMWBoG8BqERrjj13GTAlqJfgJpDDHXzjselbOafpwClDc8RZ0hssSKv9-NUg5A/s1600/Trakteer-Logo.webp"></div>
    <div class="gila_temax_donate_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Trakteer</a></div>
  </div>

  <!-- Saweria -->
  <div class="gila_temax_donate_item saweria">
    <div class="gila_temax_donate_image"><img alt="Saweria" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvrbHs-QmDuriZa48nZJoxq7O8DsZOSRja8m_rojuc14O0Y-xUsPMtEBNtKKmw-OSA5aCEnW-LmR-v9MBwsrZiVBWYiDT-6rdeiYdpO3B0ZNKSclaVrlHl6drxDkiY_Q4u8b4bSmT1ovW09eLuot7nQzgpk94yu-RseHVrhauLf_4tiqYVmmzpVR8/w200/Saweria.ico"></div>
    <div class="gila_temax_donate_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">Saweria</a></div>
  </div>

  <!-- PayPal -->
  <div class="gila_temax_donate_item paypal">
    <div class="gila_temax_donate_image"><img alt="PayPal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRbZveqXc9tzoOPegOW0wGD2b_UIoV_Nz3uKgRrG2F-KTIPkphdYVmyGmu06Pbck85jaa4FQnugpw667kRU8IF-lN_7ihEy_kjX3oCAw1cRbuovl7uykm9mOj3V0aEPSRxZ12eHglkrsh4Ns38JueysJ7CX-YzUjnLql-3ST1VNc5ZQgWT3qI1Vin/w200/PayPal.png"></div>
    <div class="gila_temax_donate_link"><a href="LINK_DONASI" rel="nofollow noopener" target="_blank">PayPal</a></div>
  </div>
</div>

Pada bagian LINK_DONASI ganti dengan link donasi kalian.

Pasang script CSS untuk styling tampilannya. Tempelkan kodenya di atas tag </b:skin> atau </style>.

.gila_temax_donate_item {
  display:flex;
  align-items:center;
  background-color:#eee;
  border-radius:12px;
  padding:15px;
  position:relative;
  font-family:'Roboto', sans-serif;
}
.gila_temax_donate_item:not(:last-child) {
  margin-bottom:15px;
}
.gila_temax_donate_item:after {
  content:'';
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' fill='%233e3f43'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  width:24px;
  height:24px;
  margin-left:auto;
}
.gila_temax_donate_item:hover {
  box-shadow:inset 0 0 0 99999px rgb(0 0 0 / 15%);
}
.gila_temax_donate_image {
  flex:0 0 auto;
  line-height:0;
  margin-right:15px;
}
.gila_temax_donate_image img {
  width:35px;
  height:35px;
  border-radius:6px;
}
.gila_temax_donate_link {
  margin-right:15px;
}
.gila_temax_donate_link a {
  font-size:16px;
  font-weight:700;
  color:#202124;
  text-decoration:none;
}
.gila_temax_donate_link a:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1;
}

Selesai

Sekarang, Anda sudah memiliki tombol donasi yang mudah diakses oleh para donatur. Pastikan untuk menjelaskan tujuan dan nilai dari kampanye Anda dengan baik agar lebih banyak orang tertarik untuk mendukungnya.

Lihat Demo

Reference: https://blog.gilatemax.com/2023/03/cara-membuat-widget-tombol-donasi-ala.html