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.

Artikel Terkait

36 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Yare yare
    12/3/22
    Profil: https://www.blogger.com/profile/12983379812204079213
    kak, cara hapus animasinya bagaimana ya? saya coba hapus keyframenya malah error blog saya
  • Muhammad Alif
    12/1/22
    Profil: https://www.blogger.com/profile/04556623481896383672
    kalo untuk sweria dan sejenisnya gmn kak?
  • Karlina
    23/4/21
    Profil: https://www.blogger.com/profile/09112368890672057648
    Mau donasi lewat mani ya kak igniel? Saya banyak belajar dari blog ini
  • Ihsan Subhan
    31/1/21
    Profil: https://www.blogger.com/profile/08972290761911247595
    mantap. terima kasih tutorialnya. sangat jelas, dan membantu. lain kali saya kayanya akan sering baca-baca di blog ini.
  • Admin
    11/1/21
    Profil: https://www.blogger.com/profile/01898629167304355053
    Salam, Data post body yang mana kak, gak bisa
  • ▅ ▆ ▇ █ It's Saori █ ▇ ▆ ▅
    9/1/21
    Profil: https://www.blogger.com/profile/13195966083111692339
    Cara ganti ke ovo atau gopay gimana ya?
  • Nurul Huda
    8/7/20
    Profil: https://www.blogger.com/profile/15643881846047476166
    Salam kenal mbak igniel, ini blog saya
    https://www.nurulhuda.id/
  • Kestrel Automotriz
    21/6/20
    Profil: https://www.blogger.com/profile/07388508398314043334
    #comments {margin:0; padding:10px 15px}
  • Anonim
    Anonim 17/4/20
    Kak kalau mau merubah fontnha biar agak kecil an gitu gimana?
  • Admin HK
    17/12/19
    Profil: https://www.blogger.com/profile/08904098066166749775
    boleh saya tahu gimana mahu buat kotak seperti ini (dalam gambar). Ada tutorialnya?

    https://1.bp.blogspot.com/-KNLtWIuLZfo/Xfh1gtPo0kI/AAAAAAAAACY/vkNTCCV7A9Ihd1xG8MrPdgj_rMGcv8cRACLcBGAsYHQ/s1600/Capture.JPG
  • Kevin
    31/10/19
    Profil: https://www.blogger.com/profile/13970350836269516607
    Mantul mbak Igniel, izin buat ATM dan share.. https://idekevin.blogspot.com
  • Calon Seo
    14/10/19
    Profil: https://www.blogger.com/profile/11471850663943909561
    ka igniel ,kenapa ketika saya coba memasang scrip ini,tampilanya menjadi besar,mohon bimbingannya kak.
  • Mas Wisnu
    11/9/19
    Profil: https://www.blogger.com/profile/10816747632523906406
    Cara ganti ikon ke Ovo gimana kak
  • Nando Rifky
    30/6/19
    Profil: https://www.blogger.com/profile/12191756230874765486
    Mantap mbak igniel, langsung saya pasang hehe. cek https://renovasi-otak.blogspot.com
  • Admin
    27/6/19
    Profil: https://www.blogger.com/profile/18296305630197594280
    terima kasih kak tutorial nya , izin rewrite boleh ?
    • Igniel
      27/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Silakan. Cantumkan sumber ya.
  • Herli Azzahra
    20/6/19
    Profil: https://www.blogger.com/profile/01239077038847221063
    Makasih Artikelnya Mbak Igniel! :) tapi cara ganti warna nya biar nyambung sama blog gimana ya mbak? Makasih Sebelumnya :)
    • Igniel
      27/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Disana udah ada petunjuk buat ganti warna background ya.
      Semua warna diawali dengan tanda pagar '#'
      Ganti aja angkanya.
  • Suraj
    15/6/19
    Profil: https://www.blogger.com/profile/17843227917363683384
    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
    • GoSEO.id
      17/6/19
      Profil: https://www.blogger.com/profile/06140662608829657385
      You only need change the link PayTM for donation box
  • Kanjeng Mariyadi Ngawi
    8/6/19
    Profil: https://www.blogger.com/profile/04856905821293514049
    tolong dipandu kalo donasi via OVO gimana mbak igniel?
    • ⠀
      1/5/21
      Profil: https://www.blogger.com/profile/14861092182195724906
      tinggal ganti saja nama paypal jadi ovo dan link nya ke link ovo
    • ⠀
      1/5/21
      Profil: https://www.blogger.com/profile/14861092182195724906
      Link Ovo Anda Sendiri
  • Unknown
    7/6/19
    Profil: https://www.blogger.com/profile/05243891741540194763
    Izin membuat tutorial seperti ini kembali ya mbak ^_^
  • Andriyansyah Yusuf
    3/6/19
    Profil: https://www.blogger.com/profile/16049572179487529826
    jadinya malah gede banget mba, frame nya ngga ada, ada solusinya ngga mba ? :(
    • Andriyansyah Yusuf
      3/6/19
      Profil: https://www.blogger.com/profile/16049572179487529826
      sudah jadi mba, pertama kode css saya letakan di atas kode pertama style, terus saya pindah ke kode b:skin
  • Sahrul Parawie
    3/6/19
    Profil: https://www.blogger.com/profile/02077545965300180060
    Mantab...langsung praktek mbak igniel thanks udah berbagi
  • Mas Dedy
    3/6/19
    Profil: https://www.blogger.com/profile/10358771741783502449
    Klo saya mlh tak hapus keyframenya mbak biar Wusshh Hehe
    • Igniel
      3/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Animasinya hanya pakai CSS mas, jadi cepet-cepet aja kalau dipakai.

      Kalau mau dihapus gpp, oke juga.
  • Abdul Majid
    2/6/19
    Profil: https://www.blogger.com/profile/01897242004163215503
    Makasih Mbak udah lama menunggu tutorial ini. Mohon ijin nyontek Mbak
  • La Sidin
    2/6/19
    Profil: https://www.blogger.com/profile/13465444834119799778
    Mbak mau nanya. Apakah tombol donasi tidak boleh dipasang di blog gratisan seperti blogspot??
    • Igniel
      2/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kenapa mesti nggak boleh?
    • La Sidin
      2/6/19
      Profil: https://www.blogger.com/profile/13465444834119799778
      Ada yang pernah ngomong gitu di grup Blogger Indonesia mbak
    • Igniel
      2/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Boleh-boleh aja.
    • La Sidin
      2/6/19
      Profil: https://www.blogger.com/profile/13465444834119799778
      Siplah. Makasih banyak untuk tutorialnya
  • kangkur
    2/6/19
    Profil: https://www.blogger.com/profile/14754141361862654484
    Gak punya saldo ndan , semangat ngeblog ndan