Cara Membuat Kotak Donasi Paypal Responsive di Blog

Tutorial - sudah lama sekali saya tidak membuat tutorial. kali ini saya akan membagikan tutorial seputar blog dan website yaitu bagaimana cara membuat kotak Donasi sendiri dengan menggunakan CSS dan javascript dengan efek yang luar biasa lho. Penasaran? pastikan kamu mempunyai akun Paypal terlebih dahulu, dengan situs resminya yaitu :

https://www.paypal.me

Jika sudah membuat akun, selanjutnya kita akan langsung ke langkahnya.

Kotak Donasi Dengan Efek Memantul

Setelah membuat Username di PayPal.Me, selajutnya kamu buka Dashboard Blogger dan buka bagian Tema kemudian edit html. Simpan kode CSS berikut di atas ]]></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)}
}

Klik Simpan Tema, 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/faizaltech98' 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 membeli domain <b><i>https://faizaltech98.blogspot.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 dan responsive, Jika ingin menggunakan akun seperti Bitcoin dan lainnya ganti Url Paypal.Me tadi.

Bagaimana mudah bukan cara membuatnya, silahkan Share dan bagikan artikel ini jika bermanfaat dan sukses selalu!!!.

Source thanks to : www.igniel.com