Kotak Donasi Paypal di Bawah Postingan Blogger ala Igniel

Cara membuat kotak donasi Paypal seperti blog Igniel dengan efek memantul (bounce) hanya dengan CSS. Ringan dan responsif.
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-color:#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.

48
Kotak Donasi Paypal di Bawah Postingan Blogger ala Igniel
Kotak Donasi Paypal di Bawah Postingan Blogger ala Igniel
Cara membuat kotak donasi Paypal seperti blog Igniel dengan efek memantul (bounce) hanya dengan CSS. Ringan dan responsif.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

48 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Kazue Kurosaki
    04 Juni, 2023
    Profil: https://www.blogger.com/profile/13889697874299399814
    Terima kasih kak sangat bermanfaat izin rewrite di blog saya kak
    https://kazuekuroshi.blogspot.com
  • Blogvanda
    02 April, 2023
    Profil: https://www.blogger.com/profile/10371743622034203072
    Link PayPal nya biar tag no follow gimana
    • Igniel
      09 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pada tag <a> tambahkan rel="nofollow". Contoh:
      <a rel="nofollow">
  • Saluran Info
    06 Januari, 2023
    Profil: https://www.blogger.com/profile/01386894917359701986
    terimakasih banyak kak, sangat bermanfaat izin rewrite di blog aku ya kak. www.sahrilku.com
  • Esa Adecsa
    29 November, 2022
    Profil: https://www.blogger.com/profile/11788710647379474810
    Tutor kotak donasi yg terbaru yg lagi pake 😁
    • Igniel
      09 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2023/04/widget-donasi-blog.html
  • Virtuside Corporation
    21 September, 2022
    Profil: https://www.blogger.com/profile/10638607855910264967
    Mau dikecilin kotaknya gimana ya kak ? Yang mana yang dirubah ? Hehe 😊
  • Max Ikhsan
    05 Juli, 2022
    Profil: https://www.blogger.com/profile/05188570730581861786
    Sudah dipasang di blog saya, dan hasilnya mantaps. terima kasih banyak tutorialnya mbak. Izin rewrite di blog saya ya mbak, www.maxikhsan.my.id
  • Ardinata
    05 Juni, 2022
    Profil: https://www.blogger.com/profile/12882555823315594401
    terimakasih mbak igneil sangat membantu sekali
  • Muhammad Alif
    12 Januari, 2022
    Profil: https://www.blogger.com/profile/04556623481896383672
    kalo untuk sweria dan sejenisnya gmn kak?
    • Igniel
      09 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2023/04/widget-donasi-blog.html
  • Karlina
    23 April, 2021
    Profil: https://www.blogger.com/profile/09112368890672057648
    Mau donasi lewat mani ya kak igniel? Saya banyak belajar dari blog ini
  • Ihsan Subhan
    31 Januari, 2021
    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.
  • Ar-rahim 🇵🇸
    11 Januari, 2021
    Profil: https://www.blogger.com/profile/01898629167304355053
    Salam, Data post body yang mana kak, gak bisa
    • Harry Naga
      05 Juli, 2022
      Profil: https://www.blogger.com/profile/08476568569406367644
      itu biasa nya ada 2 buah.. pilih yang bawah .
  • moneralla
    09 Januari, 2021
    Profil: https://www.blogger.com/profile/13195966083111692339
    Cara ganti ke ovo atau gopay gimana ya?
  • Nurul Huda
    08 Juli, 2020
    Profil: https://www.blogger.com/profile/15643881846047476166
    Salam kenal mbak igniel, ini blog saya
    https://www.nurulhuda.id/
  • Kestrel Automotriz
    21 Juni, 2020
    Profil: https://www.blogger.com/profile/07388508398314043334
    #comments {margin:0; padding:10px 15px}
  • Anonim
    Anonim17 April, 2020
    Kak kalau mau merubah fontnha biar agak kecil an gitu gimana?
  • Admin HK
    17 Desember, 2019
    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 Oktober, 2019
    Profil: https://www.blogger.com/profile/13970350836269516607
    Mantul mbak Igniel, izin buat ATM dan share.. https://idekevin.blogspot.com
  • Calon Seo
    14 Oktober, 2019
    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 September, 2019
    Profil: https://www.blogger.com/profile/10816747632523906406
    Cara ganti ikon ke Ovo gimana kak
  • Nando Rifky
    30 Juni, 2019
    Profil: https://www.blogger.com/profile/12191756230874765486
    Mantap mbak igniel, langsung saya pasang hehe. cek https://renovasi-otak.blogspot.com
  • Admin
    27 Juni, 2019
    Profil: https://www.blogger.com/profile/18296305630197594280
    terima kasih kak tutorial nya , izin rewrite boleh ?
    • Igniel
      27 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Silakan. Cantumkan sumber ya.
  • Herli Azzahra
    20 Juni, 2019
    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 Juni, 2019
      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 Juni, 2019
    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
    • Usuluddin, S.Kom
      17 Juni, 2019
      Profil: https://www.blogger.com/profile/06140662608829657385
      You only need change the link PayTM for donation box
  • Kanjeng Mariyadi Ngawi
    08 Juni, 2019
    Profil: https://www.blogger.com/profile/04856905821293514049
    tolong dipandu kalo donasi via OVO gimana mbak igniel?
    • ⠀
      01 Mei, 2021
      Profil: https://www.blogger.com/profile/14861092182195724906
      tinggal ganti saja nama paypal jadi ovo dan link nya ke link ovo
    • ⠀
      01 Mei, 2021
      Profil: https://www.blogger.com/profile/14861092182195724906
      Link Ovo Anda Sendiri
  • Unknown
    07 Juni, 2019
    Profil: https://www.blogger.com/profile/05243891741540194763
    Izin membuat tutorial seperti ini kembali ya mbak ^_^
  • Andriyansyah Yusuf
    03 Juni, 2019
    Profil: https://www.blogger.com/profile/16049572179487529826
    jadinya malah gede banget mba, frame nya ngga ada, ada solusinya ngga mba ? :(
    • Andriyansyah Yusuf
      03 Juni, 2019
      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
    03 Juni, 2019
    Profil: https://www.blogger.com/profile/02077545965300180060
    Mantab...langsung praktek mbak igniel thanks udah berbagi
    • admin@angkasiji
      10 November, 2022
      Profil: https://www.blogger.com/profile/11603887484755304996
      oke langsung tempel, tapi kok warna logonya hitam ya knp?
  • Mas Dedy
    03 Juni, 2019
    Profil: https://www.blogger.com/profile/10358771741783502449
    Klo saya mlh tak hapus keyframenya mbak biar Wusshh Hehe
    • Igniel
      03 Juni, 2019
      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
    02 Juni, 2019
    Profil: https://www.blogger.com/profile/01897242004163215503
    Makasih Mbak udah lama menunggu tutorial ini. Mohon ijin nyontek Mbak
  • La Sidin
    02 Juni, 2019
    Profil: https://www.blogger.com/profile/13465444834119799778
    Mbak mau nanya. Apakah tombol donasi tidak boleh dipasang di blog gratisan seperti blogspot??
    • Igniel
      02 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kenapa mesti nggak boleh?
    • La Sidin
      02 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      Ada yang pernah ngomong gitu di grup Blogger Indonesia mbak
    • Igniel
      02 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Boleh-boleh aja.
    • La Sidin
      02 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      Siplah. Makasih banyak untuk tutorialnya
  • kangkur
    02 Juni, 2019
    Profil: https://www.blogger.com/profile/14754141361862654484
    Gak punya saldo ndan , semangat ngeblog ndan