Cara Mudah Pasang Widget Kotak Donasi di Blogspot

Panduan mudah memasang widget kotak donasi di Blogspot agar pengunjung dapat berdonasi dengan praktis dan tampilan blog tetap rapi.
Ishar Yulian Satriani
Ishar Yulian Satriani
Tutorial ini kompatibel dengan semua template Blogger.
Table of Contents

Menambahkan kode HTML

Tambahkan kode HTML ke dalam postingan di mode Tampilan HTML, atau letakkan di widget HTML melalui menu Tata Letak.

<div class="donation_widget">
  <div class="donation_widget__container">
    <div class="donation_widget__title">Support Us</div>
    
    <div class="donation_widget__list">

      <!-- Paste the HTML code here -->


      

    </div>
  </div>
</div>

Kode HTML Donasi via BANK BCA

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BANK BCA" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUoU_7JfewNihkC6M5mbAb0GGDT7kR9sLaqBjroUvh7GiqGoySCzuteapyg0gTffV8xsV4abJtNtXmbXU4k7OYp6STG9HSKsLz1W__Wzrjh3TDycxb-r7sQFtPmCsTbcAwe2ZhOk_Nfv0iZFRWtCe9cxQ4Pa3PWMnKgQXhz1Sf5jXNxpJk1mqhRw0iL98/s1600/bca.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BANK BCA</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">843271932754</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via BANK BRI

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BANK BRI" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXMYOYi79BtXtqJY3mB7LRc4jHiFGMtGdIavS2FMO1lNOmuwvmFCoFYaK6mL0L9EfQwsVHAxdMz4x3Vz_qWe-E8q1NiFNOU8X3omVErAFIo1h0GD2uWeLr6t4_R2VRk1EdxfKh3MkgJF4rlQUNCNGbpfOGDEaz8ZL22W17U6-0lvL6bSDN0y5PrXp_P4/s1600/bri.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BANK BRI</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">948325614341124</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via BANK BNI

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BANK BNI" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLF2RV1rcyrzpXdzVo1fYf1q_zR29JsL0-qfwiVgmihqLw8llbi3UZusng1GXPHyywD6RPLooHWdsFCN0p1X9VKShy6ZMSOmnjLsuYIiaidZrDGNSIMSDPOG-nsu3VxZBQhOumHZpHtqqyIer0GU6syYB4PBCJrsccGnMUxN0C8829EcswJZT7hxrcIk/s1600/bni.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BANK BNI</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">3123963472359</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via BANK BSI

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BANK BSI" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCy6N_Kl1KUXYbTJUPHfyTz55KqVh6f6pBDGQqo67XG4csUIIwiCn45mC8cCQTUAZwYJ2WzHPz-uQlo7yKC7SWZ1HdjXrGcEhrNQvBbqvB5Ohmy1Z8v2vgkC0Nv_cpueG_XDYrV4NeS7pCqC9MikirlMW76l9p6BwZhLPIZRQDZMcSBNfNE01EZYwxTYk/s1600/bsi.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BANK BSI</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">292147832468</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via BANK Danamon

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BANK Danamon" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pVTPN5MD8cvqO7KutBeuUkA2Pj1E1c3meaDbQAbC6po5ACOrSxxCrqp6zRfUJndzQX5J4_4105kX1N1IdRTy2jdnzNA8cAisyN7_Hn-NVHpN-CKa4Jjj2Y0v9Jwc2BstVFj_T5zPid6x7d0g7io5w00H92P9iXyHUclW_fiGhVRdZpCfahg3O1oSaB4/s1600/danamon.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BANK Danamon</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">7934186482531</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via DANA

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="DANA" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmns3LPgdZeJ0KcPH7wedBYYqTbPkQKk2s-zzKpWClRZF7D3I3N_aQVzgg_44gGsaLWXpqU03uV7lv-kem-MQzVthf9sM16N0z7tP7nJPpsKp6rTg99Qx9foAgnabuuVTvwAOZ48viHbggL-xRI1x8TTK6eT7RsKjUZxY2KgGe7EpUyPy0PsLxkJbK15E/s1600/dana.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via DANA</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">0812324364753</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via GoPay

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="GoPay" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbXtIn9zthO6O8IWdZRDV3rhtsIFICi5RrON6hb-1fvAS2f6QN84YGGySbLLf85A-3gNw6XL1s9Lb3RLZU6E5Nix5k9CXK-wpcwm-lYiAPZ3FhSwqEoAWmMdPlroiCBxrcuImLdFPsUMLdWDXS1Pn_rbemAVgHvqdvhqNQdOm0gC4RAtX4MfjPI44cJpU/s1600/gopay.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via GoPay</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">0895821381213</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via OVO

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="OVO" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh61zJixmc1FVWFqwK-70w2k9_H0Ca_N0zQ3mx69NxIeS9O4HlUa19QRjDqvaw2UQ_VxylSoHv9Kg49nSdHnm4WPiZ8ex4OKpcBA0cYr-9zH0UOV5p1cWPQvQuiYw64ZDbN7OarxoLLMWFLLf9p1GztWoTTOx2XVykrdlgD2u66pCijbHiGR7CpZkSvFQk/s1600/ovo-2.webp" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via OVO</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">0895717845183</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via PayPal

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="PayPal" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxTDSdOV5DqGLVbXmsWDR3VUETIv82oa6V-TCnJ0srOoDyqMeobhrRrQAJx7GwGcjv-b-H5xBu0uLyFIQEMmRmS4cFwY2tTsgq2RgUYWju_tRUZS4JSnX11t52QZ_eCtgE4pFV-DqwOrjOQwmhtAzPoBEsi9CVTcFWB6Eg96L07CdhibQte7ZypIa8TI/s1600/PAYPAL.png" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via PayPal</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">youremail@gmail.com</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Kode HTML Donasi via BINANCE

<!--[ Start: Item ]-->
      <div class="donation_widget__item">
        <div class="donation_widget__icon">
          <img alt="BINANCE" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6dSH-Ccme5ynKCBVkUejdFsOdYHMApCJhlKoeFgso9iDPW1QaphQfo36e9eTYvb8-swM39F2DCPNQGZeXET5xME5gBlMiyGs3wdmzTTP6RUOTpo1uC6WKWYB4o_0jCtySwQG538spY01kFyRDZT8Vfv3o4hQY_NiiinXau7B9jDIjmGbSpCgvFYT-DeA/s1600/BINANCE.png" width="60"/>
        </div>
        <div class="donation_widget__info">
          <div class="donation_widget__info_title">Donasi via BINANCE</div>
          <div class="donation_widget__account">
            <div class="donation_widget__account_number">youremail@gmail.com</div>
            <div class="donation_widget__account_holder">a/n Alex</div>
          </div>
        </div>
        <div class="donation_widget__actions">
          <button aria-label="Copy Account Number" class="donation_widget__copy_button" type="button"><svg fill="currentColor" viewBox="0 -960 960 960"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></button>
        </div>
      </div>
      <!--[ End: Item ]-->

Menambahkan kode CSS

Tambahkan kode CSS di atas tag ]]></b:skin> di dalam template.

*, *::before, *::after {
  box-sizing:border-box;
}
  
/* --- Donation Box Widget --- */
.donation_widget {
  font-size:14px;
  color:#0a0a0a;
  line-height:1.5;
}
.donation_widget__item {
  display:flex;
  align-items:center;
  gap:16px;
  background-color:#fff;
  border:1px solid;
  border-color:#dadce0;
  border-radius:16px;
  padding:16px;
}
.donation_widget__item:not(:last-child) {
  margin-bottom:16px;
}
.donation_widget__icon {
  flex:none;
}
.donation_widget__title {
  font-size:20px;
  font-weight:700;
  margin-bottom:16px;
}
.donation_widget__info_title {
  font-size:16px;
  font-weight:700;
}
.donation_widget__actions {
  margin-left:auto;
}
.donation_widget__actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  width:40px;
  height:40px;
  padding:0;
}
.donation_widget__actions button svg {
  width:24px;
  height:24px;
}

Menambahkan kode JavaScript

Tambahkan kode JavaScript di atas tag </body> di dalam template.

<script>
//<![CDATA[
// Donation Box Widget
document.addEventListener("DOMContentLoaded", function () {
  const copyButtons = document.querySelectorAll(".donation_widget__copy_button");

  copyButtons.forEach(function (btn) {
    btn.addEventListener("click", function () {
      const donationItem = btn.closest(".donation_widget__item");
      const accountNumber = donationItem.querySelector(".donation_widget__account_number").textContent.trim();

      if (!accountNumber) return;

      // Copy ke clipboard
      navigator.clipboard.writeText(accountNumber).then(function () {
        alert("Nomor rekening berhasil disalin.");
      }).catch(function () {
        alert("Gagal menyalin nomor rekening, silakan salin manual.");
      });
    });
  });
});
//]]>
</script>

Terima kasih telah mengikuti tutorial Cara Mudah Pasang Widget Kotak Donasi di Blogspot. Semoga panduan ini membantu Anda memasang widget donasi dengan mudah sehingga pengunjung dapat berdonasi dengan lebih praktis dan tampilan blog tetap optimal.

Jangan lupa untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan, saran, atau ingin berbagi pengalaman setelah mencoba tutorial ini.

Interactive Demo

Support Us
BANK BCA
Donasi via BANK BCA
BANK BRI
Donasi via BANK BRI
BANK BNI
Donasi via BANK BNI
BANK BSI
Donasi via BANK BSI
BANK Danamon
Donasi via BANK Danamon
DANA
Donasi via DANA
GoPay
Donasi via GoPay
OVO
Donasi via OVO
PayPal
Donasi via PayPal
BINANCE
Donasi via BINANCE
Ishar Yulian Satriani
Ishar Yulian Satriani
Front-end web developer at Gila Temax.
Follow me on: Instagram
Postingan Terkait
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
  • Cara Mudah Pasang Widget Kotak Donasi di Blogspot
2 komentar
Admin berhak menghapus komentar Anda apabila mengandung kata-kata yang tidak pantas, mohon untuk berkomentar dengan bijak.
Batal
Comment Author Avatar
Redaksi
min, coba buat widget join channel WhatsApp min, yang support semua template gilatemax
Comment Author Avatar
Ishar Yulian Satriani
oke kak siappp, saya akan coba
Balas