Cara Membuat Kotak Donasi via Paypal Keren di Blogger

Jagoandzgn.com - Pada Kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat kotak donasi paypal dengan animasi di blogger. Artikel ini terispirasi dari sebuah blog legendaris yaitu mbak igniel yang membuat kotak tersebut.

Cukup banyak yang meminta bagaimana tutorial sederhana ini. Tidak jarang juga adamin melihat beberapa memakai kotak donasi tersebut. Ikuti tutorialnya sampai selesai, Langkah awal adalah kalian harus mempunyai sebuah akun Paypal terlebih dahulu. Silahkan langsung kesitus resminya dibawah ini.

https://www.paypal.me

Ikuti langkah - langkahnya sampai selesai.

Perlu kalian Ketahui, Kalian harus punya akun Paypal (Paypal.com). Nanti Link donasi ke akun Paypal.com akan di pendekan atau di ringkas oleh Paypal.Me.

Membuat Kotak Donasi Paypal di Blogger

1. Silahkan masuk ke dashboard blogger dan login dengan menggunakan Gmail.

2. Masuk ke menu Tema > Lalu klick Edit HTML.

3. Cari kode ]]></b:skin> atau </style> dengan menggunakan CTRL + F dan copy kode dibawah ini pastekan tepat DIATAS kode tersebut.

/* 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)}
}

4. Lalu simpan code HTML ini DIBAWAH <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.showdzgn.com</i></b>, Terima kasih.
  </div>
</div>

INGAT! Jangan Lupa untuk mengganti URL Paypal.Me, Ubah URL tersebut dengan link Paypal kalian.

Selesai, Apabila ada kendala silahkan koment di kolom komentar dibawah ini, berakhirlah sudah tutorial tentang cara membuat kotak donasi via paypal, terima kasih.