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.

Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

21 Komentar

  1. Gak punya saldo ndan , semangat ngeblog ndan

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

    ReplyDelete
    Replies
    1. Kenapa mesti nggak boleh?

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

      Delete
    3. Siplah. Makasih banyak untuk tutorialnya

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

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

    ReplyDelete
    Replies
    1. Animasinya hanya pakai CSS mas, jadi cepet-cepet aja kalau dipakai.

      Kalau mau dihapus gpp, oke juga.

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
    Replies
    1. You only need change the link PayTM for donation box

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

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

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

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

    ReplyDelete
  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.