Cara Membuat Kotak Donasi Paypal Ala Masmalven
Cukup banyak yang meminta dibuatkan artikel tentang tutorial sederhana ini. Tidak jarang juga saya melihat beberapa blogger yang memakai kotak donasi PayPal di blog mereka. Nah, buat kamu yang mau juga pakai kotak donasi PayPal, ikuti tutorialnya sampai selesai.
Langkah Pertama: Kamu perlu membuat username Paypal.Me terlebih dahulu. Silahkan masuk ke situs resminya Disini.
Ikuti Semua langkah-langkahnya. Perlu diketahui bahwa kamu harus punya akun PayPal terlebih dahulu (paypal.com). Nanti link donasi ke akun paypal.com akan secara otomatis dipendekkan oleh PayPal.Me.
Cara Membuat Kotak Donasi PayPal di Bawah Postingan Blogger dengan Efek Memantul ala Masmalven
Setelah kamu membuat username di PayPal.Me, Silahkan buka dashboard akun Blogger dan buka pengaturan template kamu. Setelah itu, simpan kode CSS berikut di atas </style> atau ]]></b:skin>.
/* Paypal Donation Box Bounce by masmalven.com */
.MasMalvenDonasi {background:#6fa8dc; /* 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;}
.MasMalvenDonasi .ikon a {background-color:#008c5f; /* warna ikon */
color:#fff;
text-decoration:none; display:block; padding:5px; border-radius:7px; text-align:center; -webkit-animation:MasMalvenBounce 1s linear 1s infinite normal; animation:MasMalvenBounce 1s linear 1s infinite normal}
.MasMalvenDonasi svg {width:50px; height:50px}
.MasMalvenDonasi svg path {fill:#bde0b9}
.MasMalvenDonasi .ikon {margin-right:15px}
.MasMalvenDonasi .deskripsi {line-height:1.5em;}
.MasMalvenDonasi .deskripsi .judul {font-size:18px; font-weight:bold; display:block; margin-bottom:10px;}
@keyframes MasMalvenBounce{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 MasMalvenBounce{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)}
}Simpan kode HTML berikut tepat di bawah <data:post.body/>.
<!-- Paypal Donation Box Bounce by masmalven.com -->
<div class='MasMalvenDonasi'>
<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.masmalven.com</i></b>. Terima kasih.
</div>
</div>
Perhatian!! Ganti URL PayPal.Me dan ubah tulisannya sesuai dengan keinginan masing-masing.