Kotak Donasi Paypal di Bawah Postingan Blogger ala Igniel

Kotak Donasi Paypal Igniel

Cukup banyak yang meminta dibuatkan tutorial sederhana ini. Tidak jarang juga saya melihat beberapa blog memakai kotak donasi PayPal tersebut, sangat persis, karena mereka mengambil langsung kodenya dari blog ini. Buat kamu yang mau juga pakai kotak donasi seperti blog Igniel, ikuti tutorialnya sampai selesai.

Pertama, kamu perlu membuat username PayPal.Me terlebih dulu. Silakan masuk ke situs resminya yang beralamat di:

https://www.paypal.me
Ikuti semua langkahnya. Harap diingat, kamu harus punya akun PayPal dulu ya (paypal.com). Nanti link donasi ke akun paypal.com tersebut akan dipendekkan oleh PayPal.Me, begitu lho.


Kotak Donasi PayPal dengan Efek Memantul (Bounce)

Setelah membuat username di PayPal.Me, buka dashboard akun Blogger dan buka pengaturan template. Simpan kode CSS berikut DI ATAS </style> atau ]]></b:skin>.

/* Paypal Donation Box Bounce by igniel.com */
.ignielDonasi {background:#bde0b9; /* warna background */
  color:#000;
  display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:center; margin:20px 0px; display:flex; padding:15px; overflow:hidden; transition:all .3s ease; border-radius:7px;}
.ignielDonasi .ikon a {background-color:#008c5f; /* warna ikon */
  color:#fff;
  text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:ignielBounce 1s linear 1s infinite normal; animation:ignielBounce 1s linear 1s infinite normal}
.ignielDonasi svg {width:50px; height:50px}
.ignielDonasi svg path {fill:#bde0b9}
.ignielDonasi .ikon {margin-right:15px}
.ignielDonasi .deskripsi {line-height:1.5em;} 
.ignielDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}

@keyframes ignielBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes ignielBounce{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}

Lalu simpan kode HTML berikut tepat DI BAWAH <data:post.body/>.

<!-- Paypal Donation Box Bounce by igniel.com -->
<div class='ignielDonasi'>
  <div class='ikon'>
    <a href='https://www.paypal.me/xxxx' onclick='window.open(this.href,"toolbar=0,status=0,width=800,height=600");return false;' title='Klik Untuk Donasi via Paypal'>
      <svg viewbox='0 0 24 24'><path d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/></svg>
      <span>KLIK</span>
    </a>
  </div>
  <div class='deskripsi'>
    <span class='judul'>DONASI VIA PAYPAL</span>
    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain <b><i>www.igniel.com</i></b>. Terima kasih.
  </div>
</div>


Jangan lupa untuk mengganti URL PayPal.Me dan ubah tulisannya sesuai dengan keinginan masing-masing.

Kotak donasi ini sangat ringan karena efek memantulnya dibuat oleh CSS saja. Kalau tidak mau pake PayPal bisa diganti dengan link donasi via Bitcoin, pulsa, atau lainnya.

SHARE Pin Share
Artikel Terkait
24 komentar
  1. Gak punya saldo ndan , semangat ngeblog ndan

    BalasHapus
  2. Mbak mau nanya. Apakah tombol donasi tidak boleh dipasang di blog gratisan seperti blogspot??

    BalasHapus
    Balasan
    1. Kenapa mesti nggak boleh?

      Hapus
    2. Ada yang pernah ngomong gitu di grup Blogger Indonesia mbak

      Hapus
    3. Boleh-boleh aja.

      Hapus
    4. Siplah. Makasih banyak untuk tutorialnya

      Hapus
  3. Makasih Mbak udah lama menunggu tutorial ini. Mohon ijin nyontek Mbak

    BalasHapus
  4. Klo saya mlh tak hapus keyframenya mbak biar Wusshh Hehe

    BalasHapus
    Balasan
    1. Animasinya hanya pakai CSS mas, jadi cepet-cepet aja kalau dipakai.

      Kalau mau dihapus gpp, oke juga.

      Hapus
  5. Mantab...langsung praktek mbak igniel thanks udah berbagi

    BalasHapus
  6. jadinya malah gede banget mba, frame nya ngga ada, ada solusinya ngga mba ? :(

    BalasHapus
    Balasan
    1. sudah jadi mba, pertama kode css saya letakan di atas kode pertama style, terus saya pindah ke kode b:skin

      Hapus
  7. Izin membuat tutorial seperti ini kembali ya mbak ^_^

    BalasHapus
  8. tolong dipandu kalo donasi via OVO gimana mbak igniel?

    BalasHapus
  9. Hello friend... How are you... Hope fine... Friend i am from india.. i just found your bolo at Google.. its a helpful blog you mantain. i need some help.. can you make a PayTM donation box... Because many of indian user not use PayPal. Thats why... Please respond me as soon as possible... Thank you

    BalasHapus
    Balasan
    1. You only need change the link PayTM for donation box

      Hapus
  10. Makasih Artikelnya Mbak Igniel! :) tapi cara ganti warna nya biar nyambung sama blog gimana ya mbak? Makasih Sebelumnya :)

    BalasHapus
    Balasan
    1. Disana udah ada petunjuk buat ganti warna background ya.
      Semua warna diawali dengan tanda pagar '#'
      Ganti aja angkanya.

      Hapus
  11. terima kasih kak tutorial nya , izin rewrite boleh ?

    BalasHapus
  12. Mantap mbak igniel, langsung saya pasang hehe. cek https://renovasi-otak.blogspot.com

    BalasHapus
  13. Cara ganti ikon ke Ovo gimana kak

    BalasHapus
  14. ka igniel ,kenapa ketika saya coba memasang scrip ini,tampilanya menjadi besar,mohon bimbingannya kak.

    BalasHapus
  15. Mantul mbak Igniel, izin buat ATM dan share.. https://idekevin.blogspot.com

    BalasHapus

Posting Komentar