Cara Membuat Kotak Donasi Paypal ala Igniel

Nyampling << N >> Cara Membuat Kotak Donasi Paypal ala Igniel. Halo sobat blogger dimanapun berada. Kali ini nyampling akan memberikan tutorial Bagaimana Cara Membuat Kotak Donasi Paypal ala Igniel. Tentu anda tidak asing lagi dengan Blogger yang namanya Igniel, Merupakan salah satu blogger yang patut diperhitungkan di jagat dunia maya, terutama dalam hal blog. Banyak sudah tutorial blogger yang sudah dishare, admin nyampling juga pun merupakan salah satu pengikut setia blog ini.

Banyak sekali referensi masalah blog yang dishare diblognya termasuk juga yang akan nyampling share kali ini yaitu "Kotak Donasi Via Paypal". Kotak doansi ini digunakan bagi anda yang mau berdonasi demi memperpanjang domain dari blog igniel. Bagi anda yang ingin membuat kotak donasi ala igniel ini juga maka anda dapat mengikuti langkah - langkah sebagai berikut :

Cara Membuat Kotak Donasi Paypal Efek Bounce ala Igniel

Langkah 1. Anda harus mempunyai akun Paypal, jika belum bisa dibuat disini
Langkah 2. Setelah akunnya siap maka link akun paypal anda akan dipendekkan terlebih dahulu, dengan membuat username disini
Langkah 3. Setelah membuat username pada langkah sebelumnya, maka anda login ke blogger >> Setelan >> Edit Html
Langkah 4. Tempelkan 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)}
}

Langkah 5. Kemudian 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.